Edited at

HTML&CSS覚書


目的

HTMLとCSSの基礎とかお作法的なものを備忘として残す。


背景

フロントエンド開発をする期間があいてしまうと

いつも基礎的なところが抜けてしまうので。

これを見れば思い出せる、というものを作りたい。

勉強しながら書いていこうと思うので、

最初は情報が少ないかもしれないけどそこはご勘弁を。

ただし、情報が最新じゃないのでゆくゆくはHTML5とかCSS3として別記事にまとめたい


前提

備忘とはいえ、ググった結果をそのままつらつら書くのではなく、

考え方的なことも残していきたい。


HTMLファイルテンプレート

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title>Hogehoge</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
</body>
</html>


代表的なHTMLタグ(HTML要素)


<h1>hogehoge</h1>,<h2>,...<h6>

heading(見出し)。

実務ではあまり使わない気がする。


<p>hogehoge</p>

paragraph(段落)。

spanばかり使わないでブロック要素のテキストならこっちかな。


<a href="url">hogehoge</a>

anchor(アンカー)。

リンクとしてよく使う。hrefみたいなのを属性っていう。

「あんかーえいちれふ〜」


<img src="url">

image(画像)。

そのまま。終了タグがいらない。

「いめーじそーす〜」


<ul><li></li></ul>

unordered list(順序がないリスト)。

liはlist itemの略。

普通の箇条書き。

ulがなんの略か知らなかったのでちょっとした発見。

ちなみに、以下のようにCSSで指定するとポチが消える。

li {

list-style:none;
}


<ol><li></li></ol>

ordered list(順序があるリスト)。

そのまま。数字つき。


<div></div>

division。

使いすぎて逆に使うべきではないケースがわからない。

あくまでグループ化するために使うべきで、

こいつ自身が末端の子要素になることは望ましくないかもしれない。


<header>,<footer>

WEBページを構成するにあたって、

<div class="header">とか<div class="footer>

頻発するので、タグ化されている。


ブロック要素とインライン要素

全然知らなかったが、HTML5からはこの考え方がなくなり、

コンテンツ・モデルという考え方が採用されている。

ここではとりあえず従来のブロック・インラインについて

基本的な考え方だけ残しておこうと思う。

コンテンツ・モデルに関してもいずれ別記事でまとめたい

要素
width&height
padding&margin
配置
代表的タグ
display
補足

ブロック
指定可能
指定可能

div,h1,p
block
前後に改行が入る、自分の親要素目一杯の幅に広がる

インラインブロック
指定可能
指定可能


inline-block
ブロック要素とインライン要素の中間

インライン
指定不可
左右のみ指定可能

span,a,img
inline
前後に改行が入らない


ボックスモデル

すべてのHTML要素にはborder(初期状態では非表示)が存在し、

その外側をmargin、内側をpaddingとする。

marginとpaddingの指定は上から時計回り。

marginにautoを指定する場合は、width指定も必須なので要注意。

(ただし上下はmargin指定ができない)


body部の構造

最上位でよく使われるタグが<header><footer>

同じく最上位("最”じゃないケースも)でよく使われるクラスがwrappercontainer

headerやfooterはともかく、wapperとcontainerの使いわけがよくわからず。

調べてみても結構ケースバイケースのようだが、

ある程度共通していると思われるのが、


  • wrapper:body部を区切る(基本的に最上位に配置)

  • container:wrapper内のコンテンツを区切る(最上位にはあまり配置されない)

のような気がする。つまり、

<body>

<header></header>
<div class="main-wrapper">
<div class="main-container">
<div>
<p>hogehoge...</p>
<span>fugafuga...</span>
</div>
<div>
....
</div>
</div>
</div>
<footer></footer>
</body>

こんな感じかな。

こうしておけば、例えば背景画像をwrapperで指定しておいて、

中身はcontainer内に配置させるとか、そんな使い分けができそう。

このサイトの言葉がしっくりきたんだけど、


  • wrapper:単一のオブジェクトを包む

  • container:複数の要素を含む

というのが定石らしい。


CSSのお作法


セレクタ

セレクタはh1とかdivとか.hogeclassとか#fugaidとか。

classとかIDのことをセレクタと呼ぶのかと思ってたけど、正確じゃなかった。

覚え方の順番が逆。


要素セレクタ

divとかspanのようなHTMLタグ。


classセレクタ

同じスタイルを複数箇所に適用したいとき。

.hogeclassって感じでドットを使う。


idセレクタ

システム内で固有のスタイルを適用したいときに。

#fugaidって感じでシャープを使う。

classとidの使い分けはいまいちまだ掴みきれていない。


擬似要素

div:beforeとか。

要素の一部分を指定して要素として扱う。


擬似クラス

span:hoverとかdiv:activeとか。

特定状態にある要素を指定する。

擬似要素との違いは、擬似クラスは指定された要素全体を扱うのに対し、

擬似要素は指定された要素の一部分を扱う。

before(擬似要素)なら「ある要素の直前」の箇所。

hover(擬似クラス)なら「カーソルが乗っている状態」の要素。


入れ子

.hogehoge span {}

hogehoge要素の子span要素のみを指定する。


複数指定

.hogehoge .fugafuga {}

hogehoge要素とfugafuga要素に同じスタイルを適用する。


プロパティ(属性)


float

詳しいサイトがあった(説明放棄)。

http://taneppa.net/float/

というのも、CSS3からはdisplay:flexが一般的のよう。

よほどのことがない限りfloatは使わない方がいいかもしれない。


background-image: url(画像のURL)

image要素に気を取られがち(自分だけ?)で頭から抜け落ちやすい。

背景として画像を配置したい場合はこっちを使おう。


text-align

ブロック要素に対して指定することで、対象のブロック要素内の

インライン要素とインラインブロック要素の配置を指定できる。

言い換えれば、インライン要素やインラインブロック要素の配置を揃えたい(例えば中央)ときは

親のブロック要素に対してtext-alignを指定(例えばcenter)することで実現できる。

逆に、ブロック要素そのものの配置を揃えたい(例えば中央)ときは

marginを0やautoに指定することで実現する。


line-height

本来は行間を調整するために使うが、要素のheightと合わせることで文字を上下中央に配置することができる。


position(absolute,relative)

親要素にrelativeを指定して、子要素にabsoluteを指定することで、子要素の基準位置を親要素の左上に合わせることができる。

また、fixedを指定することでその要素の位置を常に固定することができる。


z-index

positionと併用することで、要素の重なりを調整できる。