前回は、リセットCSS、Normalize.cssについて記載いたしました。
「ページ作成を頻繁に行うようになると、スタイル方法も
人それぞれ癖の様なものがございます。」
と記載いたしましたが、これは決して悪いとこでは無く、
自分のパターンをある程度決めておくことで、
コーディングのスピードが速くなります。
また、ブラウザ事態のヴァージョンアップなどもございますので、
このパターンは、定期的に見直すことをおすすめします。
パターンを見直す際は、いかに短いソースコードで、
シンプルにを心がけるようにすると、ページの読み込み速度が上がり、
スムーズにページが表示されることとお思います。
ここ最近、ソースコードを確認していて、
あまりにもテンプレート化された、長いソースコード、
また、あまりにもページで使用されていないコードを見ることが
多々ございますので、そのあたりを気を付ける必要があります。
それでは今回はッ、
・ボックスレイアウト
・ブロック要素
・インライン要素
上記について、記載していきます…。
HTMLでは多くの要素タイプが定義されていますが、
そのうちbody要素の中で使用されるものは、大きく分けて、
ブロック要素とインライン要素に分けることが出来ます。
この概念は非常に重要で、このことを理解していないと、
思ったようなスタイルをCSSで記載しても、CSSが効かない原因になりますので、
じっくりと理解できるまで、勉強することをおすすめします。
それでは概念は、
ブロック要素は、見出し、段落、表などを構成する基本要素で、
箱や入れ物と例えられることもございます。
p、見出し（h1、h2、etc）ul、ol、dl、table、div、form、pre、blockquote、noscript
そしてインライン要素は、箱の中の入れ物…。
具体的に記載すると、上記のブロック要素の内側に記載できる要素。
img、a、span、strong、br、b、em、cite、code、font、q、s、sub、tt、var
See the Pen
BayEKxV by masakado (@kadokado354)
on CodePen.
ブロック要素は、表示（ボーダーなどを記載しない場合）されることはございませんが、
長方形の枠をもっています。このことをボックスと呼びます。
ボックスは内側の余白「パディング」、境界線「ボーダー」、外側の余白「マージン」
で構成されます。
ボックスの概念は、スタイルシートの基本になり、
ページを思い通りにレイアウトする為に、下記図を参考にしっかり理解してください。
ブロック要素は、h1などの見出しやp要素などの段落、また、
divなどのように、前後に改行が入るひとつのまとまった要素になります。
初期状態は、幅はブラウザの横幅いっぱい、高さは内容に合わせて
決まりますが、CSSを使えば幅や高さを指定することが出来ます。
ブロック要素は何もCSSを指定しなければ、縦に並んでいきます。
floatや絶対配置であるAbsoluteを指定すれば、横に並べることも可能です。
See the Pen
BayEKPV by masakado (@kadokado354)
on CodePen.
インライン要素は、ブロック要素に対して、文中の一部分に意味合いを持たせる
書式設定をおこなうものになります。
インライン要素は行の一部として扱われますので、改行などはおこなわれません。
See the Pen
qBEwZMq by masakado (@kadokado354)
on CodePen.
インライン要素は親要素に対して広がらない為、
基本的にはサイズや、マージンの上下を指定することは出来ません。
ただし、img、input、textarea要素は、マージンやパディング、幅や高さを
指定することが可能です。
また、インライン要素でも「display :block;」とCSSで指定することで、
ブロック要素に変換することが可能です。
インライン要素をブロック要素化することで、マージン、パディング、
幅、高さを指定することも可能になります。
実際のウェブ制作の現場では、
a要素を「display :block;」として使用することが多々ございます。
a要素はリンクでインライン要素になりますので、
そのままブロックに変換せずに使用すると、リンクの幅や高さが少ない為、
display :block;として、CSSで指定をおこなうことが多くなります。
See the Pen
abzxNXZ by masakado (@kadokado354)
on CodePen.
今回よりCSSでのレイアウトのご説明になりました。
今回記載いたしました、レイアウトをおこなう際の重要なポイントは、
ズバリ！ブロック要素とインライン要素、
これはHTMLのマークアップをおこなう時点でも、はずせない重要事項で、
しっかりと、ブロック要素とインライン要素を意識することが重要です。
またCSSでレイアウトをおこなう際も、最後にご説明いたしました、
aタグのdisplay: block;、コレもまた、頻繁に使用する要素で、
コレを忘れると、閲覧ユーザーがなかなかクリックできない！
などの事象が発生してしまいますので、身につけたいスキルのひとつですね。
とりあえず、今回はここまで…。
お仕事のご依頼は↓コチラより…、それではまた次回…。
