こんにちは。
ゆうです。
じわじわとブログのデザイン改変を進めているわけだけど、
HTML・CSSをパチパチと打ち込んでいるうちに何となくコツが分かってきた部分が出てきた。
自分はHTML・CSSはビギナーではあるけれど、
これから初めて自分でHTMLを打ってみようという人には有益なコツを伝えれるのではないか？
生意気ながらそんなこと思いまして。
今日は自分がつまづいたことを振り返りつつ、ちょっとしたコツや、
こんな感覚で書いていくと分かりやすいというものを紹介してみたいと思う。
この記事の対象者
今回の記事はHTML・CSSの超初心者さん向け。
でも、全く分からないというレベルが対象ではない。
基本的なHTMLとCSSの関係は分かっているし、タグとかプロパティが何かも分かっているけど、
いざCSSでレイアウトを調整していこうと思うと、どうもうまく出来ない…
というような人が対象。
理屈も必要だけど、もっと感覚的に落とし込んでいくことも出来ると思う。
出来る限り、イメージを先に説明して、
実際にそのイメージを具現化するにはどう書けばいいのか？という順で説明していければいいなと思っている。
自分がする説明は必ずしも正しい理屈に沿ったものではないかもしれない。
でも、感覚的に受け入れやすいだろうし、結果的に早くHTML・CSSの概念を物に出来ると思う。
出来るだけ噛み砕いて噛み砕いて説明を試みてみる。
なるべく図も多用して説明していくつもり。
少しでもこれからWebページを作ってみようという人の手助けになったらとても嬉しい。
HTMLの要素は箱に入っている
まずはこの「箱理論」を理解していただきたい。
HTMLの要素と言えば<p>とか<h1>やら<h2>やら、いろいろあるけれど、実は全ての要素は箱に入っている。
こんな感じになる。
いきなり「箱」と言われても、箱ってなんぞ？って感じよね…。
上の画像をもう一度見てみてほしい。
見出しや本文に当たる部分が線で囲まれているのが分かると思う。
この囲まれた部分が「箱」だ。
<p>も<h1>も<h2>も、その他全ての要素は基本的に箱を持っていて、
記述された時点で勝手に自分で箱を用意して、その中に入る。
いくつか要素を並べて書くと、上の画像みたいに記述された順で
上から詰められた状態で並んでいく。
これだけ読んでもまだピンとこないと思う。
だけどまず、全ての要素は箱に入っていて、箱に入ったまま並ぶということを覚えておいてほしい。
参考までにここに書いたのは、これ。
<h1>h1要素</h1>
<h2>h2要素</h2>
<p>p要素</p>これだけを書いて、箱の境界線に線を引いた。
HTMLの要素はみんな左上に集まりたがる
左上が心地よい
HTMLで記述していくと上から順番に箱が並んでいくと説明した。
でも、ただ上から並ぶのではなくて、実は左上に集まって並びたがる。
いやいや、今更なにを…と思うかもしれないけど、これは基本だと思う。
この図を見てみよう。
こんな感じで画面上の左上に陣取る。
もうちょっと文章増やしたり、見出しを付けたりして要素を増やしたとしても、やっぱり左上に集まろうとする。
どうやら左上の角が一番居心地がいいらしい（笑）。
（※分かりやすくするために箱の大きさは調整してある）
みんな左上に行こうとするんだけど、先約の箱がいるとその箱にくっつくように並んでいく。
重なったりはしない。
左上が心地いいと言えども、他の箱があるときちんと順番に、お行儀よく並んでいくのだ。
要素は基本、縦にしか並ばない
で、もう一つ大事なのが、HTMLで書くと各要素は縦にしか並ばないということ。
HTMLを書いていけば、上から下方向へと勝手に並んでいく。
横には並ばない。
上から下へと順番に箱が並んでいく。
左上が好きだけど箱が複数あると順番に並ぶ。
結果、上の図のような並び方をしていく。
超基礎だけでもこのくらい出来る
ここまでが超基礎編。
この記事のもう少し先の方で、ちょっとずつCSSの使い方を書き始めるけれど、
・要素が箱に入っているということ
・左上に集まりたがるということ
この２点については、しっかりと覚えておいてほしい。
CSSと言われて構えてしまう気持ちもわかるけど、
結局のところCSSでレイアウトするというのは、箱の大きさや箱同士の間隔を決めるとか、
縦に順番に並んでいくはずの要素の並び順を変更するものだと思ってくれればいいと思う。
あとは色を変えるとか、箱に沿って線を引くとかそういうことも出来る。
最初の時点では、それ以上複雑な物だと思う必要はない。
多分、どんどん進んでいけばもっと難しいことも出来るんだろうけど、最初はこんなもん。
この辺りを理解しておくだけでも、十分過ぎるくらい様々なレイアウトが組める。
先日、このブログのデザインをこんな風にしようとしているという記事を書いた。
結構、複雑そうに見える？
でも、これも実際は左上に集まりたがる箱を横に並べてみたり、
小さい箱を何個か集めて大きい箱に入れて、箱の大きさや箱同士の間隔を調整したりしているだけ。
それ以外の難しいことはしていない。
案外これだけで出来てしまう。
じゃあ、小さい箱を集めてどうやって大きい箱に入れていくのか？
それを次の項目で説明していこうと思う。
しつこいけど、キーワードは「箱」と「左上」ね。
配置は箱の中に箱を並べていくイメージで
<div> を使って大きい箱を作る
では、さっそく箱の中に箱を入れてみよう。
箱の中に箱を作るにはまず大きな箱を作る必要がある。
それが <div> という要素。
何の略かは定かじゃないけど、多分divisionとかdivideとかそういう単語の頭を取っていて、
分けるとか、仕切るとかそういうような意味の言葉。
<div> </div>で囲うことで、大きな箱を作ることが出来る。
だから、<h2>と<p>を同じ箱に入れたいと思ったら、
<div>
<h2>◯◯◯</h2>
<p>◯◯◯◯◯◯</p>
</div>という書き方をする。
これをブラウザで表示させるとこんなイメージになる。
このように<div>という箱の中に、
<h2>と<p>の箱が並べられている。
こうすると、箱の中に箱を入れることが出来る。
もちろん、大きな箱の外に更に大きな箱を作ることも出来る。
こうして箱の中に箱を入れることで、複数の要素をグループ化することが出来るようになる。
箱に名前を付けよう ー classを知る
これでいくらでも箱の中に箱を入れていけるようになったわけだけど、
無作為にこれをやっていくと段々と箱が雑多になって散らかってくる。
この辺はどうもお部屋と一緒で、適当に物を置いていくとすぐに汚くなってしまうようだ。
部屋の片付けと一緒で、どうせなら箱もキレイに整理しながら、
わかりやすく配置をしていきたい。
そこで箱に名前をつけて、何が入っているのかすぐに分かるようにしてみよう。
それにはclassというものの考え方を知る必要がある。
<div class=“title”>
こんなような感じの表記を見たことがないだろうか？
これは「title」という名前の箱だよという意味になる。
<div class=“◯◯”>
HTMLファイル内にこの書き方をすることで名前付きの箱を作れる。
◯◯の部分が名前に当たり、この名前の部分は自由に変えることが出来る。
ちなみにこのclassを使っての名前付けは、他の要素にも使うことが出来る。
例えば<h2 class=“◯◯”>とか<p class=“◯◯”>とか。
次のような書き方も出来る。
<div class=""about_me"">
<h2 class=""title"">自己紹介</h2>
<p class=""text"">こんにちは。ゆうです。</p>
</div>これをブラウザで表示させるとこうなる。
このように書くと、about_meという箱の中に、
titleという名前を付けた箱があって、
textという名前を付けた箱がある、
ということになる。
about_meという箱の中に、h2の箱と、pの箱を入れましたとも言える。
箱の中に箱を収納することで、キレイに各要素を配置していくことが出来る。
名前をつけることの効果
箱に名前をつけるのはとても大事な考え方で、
きちんと名前を付けておくことで、CSSを適用させたいと思った時に細かい調整が出来るようになる。
上の例で行くと、titleという名前の箱に対してCSSを書けばh2タグだけにCSSが反映される。
同じようにtextという箱に対してCSSを書けばpだけにCSSが適用される。
名指ししてCSSを書くことが出来るので、
ただただHTMLが読みやすくなるだけでなくて、正しく狙ったところにだけCSSを反映させることが出来る。
classとid
ちなみに名前をつける時にidという付け方がある。
<div id=“◯◯”>という書き方。
どっちで書けばいいの？と思ったらclassで名前を付けよう。
名前をつけることに関して言うと、idの方がお偉いさんだ。
お偉いさんは乱用することが出来ない。
対してclassは下っ端。
下っ端だから人数もいっぱいいて、たくさん使っても大丈夫なようになっている。
idじゃないと出来ないこともある。
迷うくらいの情況ならclassで名前をつければいい。
どんどん勉強していってidを使う時が来たとしても、
idはidで付けないとどうしようも出来ないという情況でのみ使うと覚えておけばいいと思う。
まとめ
この記事で何となくHTMLの習性は伝わっただろうか？
主に「箱」が「左上」に向かって並ぶこと、
箱の中に箱を並べるイメージについて述べてみた。
これにより要素をグループ化するイメージもつかめたと思う。
長くなったので、ここで一回記事を切って、また次の記事に続きを書こうと思う。
次の記事では実際にCSSを記述しながら、
箱の中に箱を並べたり、
要素を横並びさせる感覚をお伝えしたい。
次の記事のイメージまでつかめると、
かなり自由な配置をHTMLとCSSだけで作っていけるのではないかと思う。
参考になってくれていれば幸い。
次の段階として初心者さんがつまづきやすいfloatの使い方と、
margin・paddingの違い、
横いっぱいに広がるヘッダーを作るという記事も書いてみた。
参考にしてもらえるのではないだろうか。
それでは。
昨日よりほんのちょっとステキな明日があなたに訪れますように。
