HTMLのタグについてまとめた記事はこちら↓
関連記事
(adsbygoogle = window.adsbygoogle || []).push({}); これまで学んできたHTMLについて、定番の骨組み・主要なタグについてまとめました。 定番の骨組み <![…]
今回は、CSSの基本的な書き方・主なスタイルについて、まとめたいと思います。
基本的な書き方
CSSを記述する場所について
CSSを記述するのは、下記3つのいずれかの場所です。ほとんどの場合が3番目。
- HTML内の各タグ属性styleとして書く。
- HTML内の<style> </style>タグ内に書く。
- index.htmlと同じ階層に、「css」フォルダ > 「style.css」ファイル を作成し、別ファイルとして書く。
書き方
h1 {
color: red;
}
color: red;
}
「h1」部分（セレクタ）に、装飾したい場所を書く。
{ }内（プロパティ）に、装飾方法を書く。
{ }内（プロパティ）に、装飾方法を書く。
主なセレクタまとめ
| h1 { } | タイプセレクタ。同じタグ（ここでは<h1>）内のすべての要素を選択。 |
| * { } | 全称セレクタ。すべての要素を選択。 |
| .photo { } | クラスセレクタ。同じクラス名（ここでは”photo”）をもつ要素を選択。 先頭に.（ドット）をつける。 |
| #logo { } | idセレクタ。同じid名（ここでは”logo”）をもつ要素を選択。同じidはつけられないため、実質的に1つの要素を指定。 先頭に#（シャープ）をつける。 |
| a:hover{ } | 擬似クラス。ある要素が特定の状態のときのみ選択。 要素名のあとに:（コロン）をつけ、スペースは入れない。 a:link { }…a要素の未訪問リンク a:visited { }…a要素の訪問済みリンク a:hover { }…a要素にマウスが乗ったとき a:active { }…a要素をクリックしたとき ＊これら4つは必ずこの順序で書く。 |
| header li{ } | 子孫セレクタ。特定の親要素に含まれる子要素を選択。 セレクタ同士の間は （半角スペース）で区切る。 子要素を全て書く必要はなく、いきなり孫要素を書いて良い。できるだけ短い書き方にする。 |
| td, th { } | 複数のセレクタに1つのスタイルを適応。 セレクタ同士の間は,（カンマ）で区切る。 |
| header li > a { } | a要素の中でも、header内のli直下にあるものだけを選択。 |
| input[name=“〇〇”] | 属性セレクタ。inputタグ内の、name属性〇〇を持つものを選択。 []の前には空白なし。 お問い合わせフォーム等のCSSでよく使う。 |
主なプロパティまとめ
色・フォントの表現
| color: 〇〇; | 〇〇部分に色を指定。指定方法は以下4つ。 ・red / blue / green などの色名を書く。 ・rgb(0, 0, 255) など、RGBの0~255数値を書く。All 0が白、All 255が黒。 ・#0000ff など、RGBを0~fの二桁づつで書く。上記の簡易版。 ・#00f RGBそれぞれで同じ数値が続く場合は一桁に短縮できる。 ＊親要素を引き継ぎたい場合は、〇〇部分にinheritを記入。 |
| font-family: 〇〇; △△ | フォントの指定。ページ全体の指定は、htmlセレクタ内に書く。 〇〇部分にフォントを指定。ない場合の指定フォントは、△△に指定。 例）ゴシック体… sans-serif、明朝体… serif フォント名にスペースを含むときは、フォント名を”（ダブルクォーテーション）で囲む。 |
| font-size: 〇〇px; | フォントサイズの指定。 |
| line-height: 〇〇; | 行間の指定。〇〇には、行の高さをフォントの何倍にするかを「1.5」などの単位なしで書く。 |
画像・背景の表現
| height: 〇〇px; | 高さを〇〇pxに。 |
| width: 〇〇px; | 幅を〇〇pxに。 |
| background-color: 〇〇; | 背景色の指定。〇〇部分に色を指定。色の指定方法は上記参照。 |
| background-image: url(〇〇); | 背景に画像を指定。〇〇部分に指定したい画像のファイルパスを入れる。 |
| background-repeat: no-repeat; | 背景画像を繰り返ししない。特定方向に繰り返し表示する場合は、以下のように書く。 ・x方向のみ繰り返し…repeat-x ・y方向のみ繰り返し…repeat-y ・xy方向に繰り返し…repeat |
| background-size: cover; | 背景の大きさを、縦横比そのままでできる限り広げる。 |
| background-position: 50% 50%; | ブラウザを拡大縮小した時、背景の大きさを中心を起点にする。 |
| opacity: 0.6; | 透明度の指定。60%に。 |
| border-radius: 〇〇px; | 周りを〇〇pxの範囲で丸める。pxの代わりに”50%”と入れると、円になる。 |
| border-color: 〇〇; | 周りを〇〇色で囲む。 |
| border-width: 〇〇px; | 周りを〇〇pxの線で囲む。 |
| border-style: solid; | 周りを実線で囲む。 実線…solid、点線…dotted、長めの点線…dashed、線なし…none （＊上記3つをまとめて、border: 〇〇px solid 〇〇;と書くこともできる。順不同。） |
| box-shadow: x y blur color; | 影を付ける。 xとyには、各方向につけたい影の大きさ(px)を書く。blurには、ボカシ具合(px)を書く。 colorには、影の色を書く。 |
配置関係
| margin-top/-bottom/-right/-left: 〇〇px; | 余白（上下左右）の指定。〇〇部分にpx数指定。 四方すべて同じ場合は、「margin: 〇〇px;」でOK。数値0の時は、単位なしでOK。 上下、左右がそれぞれ同じ場合は、「margin: 〇〇px △△px;」でOK。 margin部分を、paddingなどに変更する。（現状は、デベロッパーツールのboxで確認できる。） pxの代わりにautoとすると、余白を指定した側に割り当てる。 左右ともにautoにすれば、中央構えになる。 「margin: 〇〇px △△px □□px;」と、3桁にすると、最後は下部のmarginに設定される。 |
| text-align: left / right / center; | 左 / 右 / 中央揃え。テキストだけでなく、コンテンツ内の画像も行揃えする。 |
| vertical-align: top / bottom; | 上 / 下揃え。 |
| max-width: 〇〇px; | 伸縮するボックスの左右最大幅。 合わせて左右マージンをautoにすることで、〇〇px以上の画面幅で中央配置する。 |
| float: left; | 親要素の左上に配置。後続の要素はその周りを回り込むように配置。 浮かせた配置になり、その要素がないものとしてその他が配置される。 縦並びだったものを、横並びにできる。 右上に配置…right、回りこみなし…none |
| clear: both; | フロートプロパティfloatの解除。フロートを使ったら、必ずどこかで解除する。 |
| display: flex; | その子要素を横並びにする。伸縮も親要素の幅に合わせる（画像以外）。 ＊横並びにした子要素ボックスの伸縮・固定を個別に設定する方法 ・flex: 1 1 auto; 幅を伸縮させる場合。 ・flex: 0 0 〇〇px; 幅を固定させる場合。 |
| display: block; | 横並びした子要素のフレックスボックスレイアウトを解除する。 レスポンシブデザインとしてよく使用。 |
現状のmarginやpaddingの大きさなどは、デベロッパーツールで確認できます。
デベロッパーツールの使い方や、marginの変更の仕方などは、こちらの記事に詳しく書いています↓
関連記事
(adsbygoogle = window.adsbygoogle || []).push({}); こんにちは、sateです。 私はwordpressのテーマ「THE THOR ザ・トール」を使って、このブ[…]
リスト・テーブルデザイン
| list-style-type: none; | リストのスタイル（黒丸）を消す。 |
| display: inline-block; | リストを横並びにする。 |
| display: block; | リストを縦並びにする。 |
| border-collapse: collapse; | テーブルの隣り合うセルの罫線を1本にする。 |
レスポンシブデザイン関係
| html * { box-sizing: border-box; } | ボックスモデルの変更。width, heightプロパティの値をボーダー領域まで含む形にする。 レスポンシブデザインにする際に多用。 |
| img { max-width: 100%; height: auto;}; |
imgタグで表示している画像を、画面幅に合わせて伸縮させる。 親要素のボックス幅に合わせて伸縮。元のサイズより大きくはならない。 レスポンシブデザインで画像を扱う時のお決まりスタイル。 |
| @media (条件; 値) { スタイル } | メディアクエリ。 （）内の条件を満たす時だけ、{ }内のスタイルが適用される。 条件としては、(max-width; 767px)がよく使われる。（iPadの画面幅が768pxのため。） { }内のスタイルの書き方は、通常と同じ。 |
以上、CSSの主要なスタイルをまとめてみました。
今回紹介したものだけでも綺麗なサイトを作ることができますが、
これらはほんの一部で、この他にもたくさんのスタイルがあります。
有用なスタイルと出会ったら、随時更新していきたいと思います。
