【初心者向け】HTML／CSS中級2 - 気ままに趣味旅行

どうもhiroakiです。

今回は前回に続き、ウェブページを作るうえで大切な、HTML言語とCSS言語の中級編についてまとめていきます。中級編では基礎編より、少し踏み込んで説明していきます。説明の部分が多くなりますが、実際にコードを打ちながら試すことが大切です。

list-style関連プロパティについてまとめます。これも覚える必要はないので、忘れたら戻ってくるようにしてください。

種類	意味	指定できる値	CSSの使い方
list-style-type	リスト記号の型	none、disc、circle、square、decimal、decimal-leading-zero、lower-roman、upper-roman、lower-alpha、upper-alpha、hiragana、katakanaなど	セレクタ{list-style: none;}
list-style-image	リスト記号の画像	url("")	セレクタ{list-style-image: url("https://cdn-ak.f.st-hatena.com/images/fotolife/h/hiroakies4463/20181116/20181116165148.jpg");}
list-style-position	リスト記号の位置	outside、inside	セレクタ{list-style-position: outside;} outsideではリスト記号だけが先頭から出て文章がそろいます。insideでは記号も含めて文章の頭がそろいます。
list-style	まとめて指定	上記すべてをまとめて指定できます。	セレクタ{list-style: square url("https://cdn-ak.f.st-hatena.com/images/fotolife/h/hiroakies4463/20181116/20181116165148.jpg") inside;}

次は表を装飾する方法です。先日、表の作り方を紹介しました。基礎的なことはこちらで復習してください。

以下プロパティもよく使いますので覚えてください。

border-collapse・border-spacingプロパティ
種類	指定できる値	説明
border-collapse	separate、collapse	表の隣接するセルの罫線を重ねて表示する（collapse）か、離して表示する（separate）か指定します。ブラウザの標準ではseparateが指定されてます。
border-spacing	〇pxなど	border-collapseがseparateとなっている際、罫線間の距離を指定できます。

table.sample1 {border: solid 1px #000000; border-collapse: collapse;}
table.sample2 {border: solid 1px #000000; border-collapse: separate;}

以下もよく使うので覚えてください。

line-heightは文字の高さを指定できます。これはピクセルで指定するよりも倍率で指定する場合が一般的です。例えば文字が14px、文字の高さを20pxとしたい場合には20/14=1.429となりますので、下記のように指定します。

p {font-size: 14px;
    line-height: 1.429;}

次は画像を指定するための属性です。

「src」属性は表示する画像ファイルを指定します。

「alt」には画像の代わりに表示されるテキストを入力します。主に、目の不自由な人のためのスクリーンリーダーや画像を表示しないブラウザで利用されます。代替テキストを空白にする（alt=""）ことは可能ですが、省略はできません。

「width・height」には幅と高さを指定できます。

また、本文から参照される図版は次のように<figure>タグで囲みます。キャプションは<figcaption>で囲みます。

<figure>
    <figcaption></figcaption>
    <img src="" alt="" width="" height="">
</figure>

すべての画像を囲む必要はありません。本文から参照されるものを囲んでください。

今回は以上です。

また、基礎的な内容について心配な人は以前まとめてますので、参考にしてみてください。自分も学びながら紹介しているので、ご指摘やご意見ありましたら、コメントくださるとうれしいです。

では。