s13y

独身27歳の中卒ニートが人生に危機感を覚えながら書くブログ

はてなブログのサンプルテーマ「Boilerplate」に使われているCSSのプロパティを確認する

サンプルテーマ「Boilerplate」は学びの宝庫

記述されている値を適宜変えるだけでも「使えるテーマ」としてカスタマイズが出来るので、CSSプロパティの使い方を学んでしまえば「1から作る必要はないな」という結論に至ってしまう方もおられるでしょう。はてなブログが用意しているサンプルテーマはそれほどに実用的ですので、これを利用しない手はありません。

サンプルテーマで使われているCSSのプロパティを一覧で確認する

これから学ぶ項目を予め把握しておきましょう。並び順は順不同です。

    font-family:
    font-size:
    font-weight:
    line-height:
    text-decoration:
    text-align:
    text-overflow:
    top:
    left:
    color:
    background:
    background-size:
    background-color:
    border:
    border-top:
    border-bottom:
    border-collapse:
    border-spacing:
    border-radius:
    padding:
    padding-bottom:
    padding-left:
    padding-right:
    width:
    height:
    max-width:
    margin:
    margin-top:
    margin-bottom:
    margin-left:
    margin-right:
    position:
    overflow:
    outline:
    white-space:
    word-wrap:
    list-style:
    float:
    opacity:
    cursor:
    align-items:
    display:
    justify-content:
    -webkit-box-flex:
    -webkit-box-orient:
    -webkit-box-direction:
    -webkit-box-pack:
    -webkit-box-align:
    -webkit-box-sizing:
            box-sizing:
    -ms-flex:
        flex:
    -ms-flex-align:
    -ms-flex-direction:
        flex-direction:
        flex-wrap:
    -ms-flex-pack:

実際に使われるプロパティは意外と少ない

ソースコードを覗けば値と共に圧倒されて大量にあるような気がしますが、プロパティだけに絞ればこれだけしかありません。

ショートハンド(短縮形)

例えばmarginmargin-topmargin-bottommargin-leftmargin-rightなどの指定をまとめて行うことができます。CSSプロパティにはこのようなものがありますのでややこしいと思いますが、適材適所で使っていきましょう。

各項目の簡易的な説明

プロパティがどういう意味を持っているのかを一覧にしています。どのプロパティがどのような場所で使われているか想像するとより理解しやすいかも知れません。ただ使ってみなければやはりわからないものも多いです。今回は「値」を記述していませんので役割だけを把握してみてください。

文字色・背景

color

文字色を指定します。

background

背景に関する指定をまとめて行います。

background-color

背景色を指定します。

フォント

font-family

フォントの種類を指定します。

font-size

フォントのサイズを指定します。

font-weight

フォントの太さを指定します。

テキスト

line-height

行の高さを指定します。

text-decoration

テキストの線・色・スタイルをまとめて指定します。

text-align

ブロックコンテナ内の行の揃え位置・均等割付を指定します。

text-overflow

はみ出たテキストの表示方法を指定します。

word-wrap

IE独自の仕様ですが、単語の途中で改行するかどうかを指定します。

white-space

ソース中のスペース・タブ・改行の表示の仕方を指定します。

幅・高さ

width

幅を指定します。

height

高さを指定します。

max-width

幅の最大値を指定します。

マージン・パディング

margin

マージンに関する指定をまとめて行います。個別に設定する際に「margin-top」「margin-bottom」「margin-left」「margin-right」などを利用します。マージンとは領域間のスペースになります。

padding

パディングに関する指定をまとめて行います。マージンと同じプロパティと値が用意されています。パディングは領域内のスペースになります。

ボーダー

border

ボーダーのスタイル・太さ・色を指定します。個別に設定したい場合は「border-top」などで指定します。

表示・配置

overflow

はみ出た要素の表示方法を指定します。

position

ボックスの基準位置を指定します。

top,bottom,left,right

基準位置「position」からの配置位置(距離)を指定します。

float

左または右に寄せて配置します。

display

要素の表示形式(ブロック・インライン・フレックス等)を指定します。

text-overflow

はみ出たテキストの表示方法を指定します。

テーブル

border-collapse

セルのボーダーの表示の仕方を指定します。

border-spacing

セルのボーダーの間隔を指定します。

リスト

list-style

マーカーに関する指定をまとめて行います。

アウトライン

outline

アウトラインのスタイル・太さ・色を指定します

カーソル

cursor

マウスカーソルの形状を指定します。

CSS3

以下からCSS3で追加されたプロパティになります。

背景とボーダー

background-size

背景画像のサイズを指定します。

border-radius

角丸をまとめて指定します。

透過色

opacity

要素の透明度を指定します。

ベンダープレフィックス(接頭辞)

ブラウザのバージョンによってはベンダープレフィックスをつけないと効果が得られません。はてなブログではフレキシブルレイアウトのプロパティにベンダープレフィックスをつけています。

「-webkit-」Google Chrome、Safari
「-ms-」Internet Explorer

フレキシブルレイアウト

CSS3から新しいレイアウトモジュールとして「Flexbox」というものが使用出来るようになりました。 複雑なレイアウトでも今までより少ないコードで実装することができます。

フレックスアイテムの配置・折り返し・順序

flex-direction

フレックスコンテナ内のアイテムの配置方向を指定します。

flex-wrap

フレックスコンテナ内のアイテムの折り返し方法を指定します。

フレックスアイテムの幅

flex

フレックスコンテナ内のアイテムの幅についてまとめて指定します。

フレキシブルレイアウトの旧仕様

後継のプロパティがありますが、はてなブログではなぜか旧仕様がそのまま使用されています。

box-orient

ボックス内の子要素の配置方向を指定します。後継プロパティ「flex-direction」

box-direction

ボックス内の子要素の表示方向を指定します。後継プロパティ「flex-direction」

box-align

ボックス内の子要素の縦方向の揃え位置を指定します。後継プロパティ「align-items」

box-flex

伸縮ボックスの伸縮比率を指定します。後継プロパティ「flex-grow」

box-pack

ボックス内の子要素の横方向の揃え位置を指定します。後継プロパティ「justify-content」

インターフェース

box-sizing

ボックスサイズの算出方法を指定します。

ボックスの揃え位置

justify-content

コンテナ内全体の横方向の揃え位置を指定します。

align-items

コンテナ内のアイテムの縦方向のデフォルト揃え位置を指定します。

どんな役割かわからないプロパティ

「flex-align」と「flex-pack」に関しては精査する段階で確かめて見たいと思います。何かわかれば記述させて頂きます。

まとめ

説明がなくてもわかるものもありますね。前回のソースと一緒に見返して、よく使われるプロパティを把握しましょう。プロパティをざっと眺めた時にどういう役割があるのかパッと見てわかるようになるとページ全体の状態を把握し易くなります。