CSS
HTMLでは画像やテキストを配置するが縦に並ぶだけになる
CSSで色やサイズや余白を調節できる。
アニメーションで画像を移動させることができる。
HTMLのところに<style>〇〇〇〇</style>と囲んで書くこともできるが別のファイルを作成するのが普通。
別のファイルで作成し名前を〇〇.cssにする。
1行目に@charset "UTF-8";を書く。
htmlのプログラムを書いたheadのところに<link rel="stylesheet" href="〇〇.css">とかきＣＳＳファイルを読み込むようにする。
CSSの構成
| プログラム | 説明 | |
| 対象{内容} | p{color:red;font-size:1cm;} | 対象はタグの名前のほかにクラスやidも使える。 クラスを使うときはHTMLのところに<p class="A"></p>というふうにクラスをつける。 idを使うときはHTMLのところに<p id="B"></p>というふうにidをつける。 |
| クラス(A){内容} | .A{color:red;font-size:1cm;} | クラスは.を使う。 |
| id(B){内容} | #B{color:red;font-size:1cm;} | idは#を使う。 |
| imgのsrcが画像.pngのもの{内容} | img[src="画像.png"]{border: 2px solid red; } | タグ内の属性の要素は[]を使う。 |
| プログラム | 説明 | |
| クラス(A)とクラス(B){内容} | .A,.B{color:red;font-size:1cm;} | 複数選択するときは,で区切る。 |
| クラス(A)でありクラス(B)のもの{内容} | .A.B{color:red;font-size:1cm;} | 空白を開けずそのままつなげる。クラス(A)でありクラス(B)のものは<p class="A B"></p>というふうにクラスをつける |
| クラス(A)の中にあるクラス(B)というもの{内容} | .A .B{color:red;font-size:1cm;} | 空白を開けてつなげる。たとえば<div class="A"><p class="B"></p></div>というもの |
文字
| プログラム | 説明 | |
| 色「赤」 | color:red; | 文字の色を赤色にする。#7a00b0のような形で色の指定もできる。 |
| サイズ「1cm」 | font-size:1cm; | 文字のサイズを1cmにする。 |
| よせ「中央」 | text-align:center; | 文字を中央に寄せる |
| よせ「中央」 | margin: 0 auto 0 auto; | block 要素でありwidthが指定されていれば、autoで左右の余白が均等になるように枠が中央に寄る |
| 余白「左10%右20%」 | margin:0 20% 0 10%; | 余白を枠の外側につける。%は画面の横幅を100%としてどれくらいかを示す。 余白の順番は上、右、下、左。 |
| フォント「サンセリフ」 | font-family:sans-serif; | フォントをサンセリフにする |
| 行間「1.5文字」 | line-height:1.5; | 文字のサイズを１として行間をどのくらい空けるか |
| 文字影「右に2px 下に2px ぼやけ5px 黒色」 | text-shadow:2px 2px 5px black; | 右、下、ぼやけ度、色。 |
枠
| プログラム | 説明 | |
| 背景色「赤」 | background-color:red; | 背景の色を赤色にする。#7a00b0のような形で色の指定もできる。 |
| 背景画像「背景画像.png」 | background-image: url(背景画像.png);background-repeat: no-repeat;background-size: cover;background-position: center center; | 背景を覆うように画像をはる。画像を中央に寄せる。背景画像はHTMLの画像と違い、上に文字を書くことができる。 |
| 枠線「2px 直線 緑色 丸み15px」 | border: 2px solid green; border-radius: 15px; | 枠線の太さ 種類 色 の順番。追加で丸みの度合いをつける。 solid直線 dashed破線 dotted点線 double二重線 groove彫り込み風 ridge浮き出し風 inset内側にへこむ outset外側に浮き出る |
| 枠影「右に2px 下に2px ぼやけ5px 黒色」 | box-shadow: 5px 5px 15px black; | 右、下、ぼやけ度、色。 |
| 内余白「右10px 左20px 上5px 下5px」 | padding:5px 10px 5px 20px; | 内側の余白 上右下左の順番 |
| 横「3cm」 | width:3cm; | 枠の横のサイズ |
| 縦「3cm」 | height:3cm; | 枠の縦のサイズ |
| はみ出しを非表示 | overflow:hidden: | はみ出した要素を非表示にする |
| はみ出しをスクロール | overflow:scroll; | はみ出した要素を横にスクロールで表示する |
状態
| プログラム | 説明 | |
| ブロック | display:block; | 横いっぱいに広がる |
| インライン | display:inline; | 文字と同じ。横いっぱいに広がらない。margin paddingが使えない。 |
| インラインブロック | display:inline-block; | 文字と同じ。横いっぱいに広がらない。margin paddingが使える。 少しCSSのレイアウトが崩れることがある。 |
ポジション
| プログラム | 説明 | |
| 基準化・上左「1cm、1cm」 | position:relative; top:1cm;left:1cm; | 基準にし、基準が元の位置から上左に余白を開けた位置。 （元の位置に透明な分身が残る） |
| 基準の親から・上左「1cm、1cm」 | position:absolute; top:1cm;left:1cm; | 基準の親から上左に余白を開けた位置 |
| 画面から・上左「1cm、1cm」 | position:fixed; top:1cm;left:1cm; | 画面に固定。画面から上左に余白を開けた位置 |
| 画面に残る・上「1cm」 | position:sticky; top:1cm; | 親の範囲内で消えないように画面に残る。画面から上の余白開けた位置になる |
| 優先度「10」 | z-index:10; | ほかの兄弟要素のpositionのものと前後関係を変える。大きいほど手前になる |
タグに追加するもの
| プログラム | 説明 | |
| ：未使用リンク | a:link | 未使用リンクの色などを変えることができる |
| ：使用済みリンク | a:visited | 使用済みリンクの色などを変えることができる |
| ：乗せた時 | p:hover | カーソルを乗せた時色などを変えることができる |
| ：押した時 | p:active | クリックしている時色などを変えることができる |
| ：2番目 | p:nth-of-type(2) | 親要素の中で２番目のpの色などを変えることができる |
| ：2の倍数番目 | p:nth-of-type(2n) | 親要素の中で２の倍数番目のpの色などを変えることができる |
その他
| !重要 | p{display: block !important;} | 直接styleにつけたCSSより優先したCSSにできる。 （通常classでつけたCSSより直接styleに書きこんだCSSが優先される。） |
| 画面が700pxより小さいとき【□□□□□□□】 | @media(max-width:700px){□□□□□□□} | CSSの内容を丸ごと囲む。パソコンサイズとスマホサイズではレイアウトが変わる。画面が「700pxより小さいとき」を後の方に書くことで、スマホサイズの時に設定を上書きしスマホサイズのレイアウトにできる。 |
変化
| プログラム | 説明 | |
| 移動右下「5cm、2cm」 | transform: translate(5cm, 2cm); | 右と下に移動。マイナスの値にすれば左と上に移動 |
| 拡大XY「1.5倍、1.5倍」 | transform: scale(1.5, 1.5); | 拡大する。１以下にすれば縮小する。 |
| 時計回りに回転「45度」 | transform:rotate(45deg); | 回転する。マイナスにすれば反時計回りに回転する。 |
| 要素を斜めに傾けるXY | transform: skew(20deg,10deg); | 左上と右下を引っ張るように傾く。 まとめてかくことができる。transform: translate(50px, 0) rotate(15deg) scale(1.2); |
| 3秒かけて移動 | transition: transform 3s ease; | 移動、回転、拡大などと一緒に使う。 :hoverでなく普通のところにつける。すると離して戻る時にも発動するようになる。 ease最初と最後がゆっくり ease-in-out最初と最後がゆっくりで真ん中が一番早い linear 一定 |
アニメーション
| プログラム | 説明 | |
| アニメ実行「動きプログラム、２秒、無限」 | animation: 動きプログラム 2s infinite; | 動きプログラムの内容を実行するようになる。 infinity 無限 alternate ０％→１００%→０％にする。繰り返すにはinfinityをつける必要がある。 |
| アニメ枠「動きプログラム」 | @keyframes 動きプログラム { | プログラム名を書く。これはp{ }の{}内ではなく外に書く。 |
| アニメ絵「0％、回転0度」 | 0％ {transform: rotate(0deg); } | 0%の姿を書く |
| アニメ絵「50％、回転100度」 | 50％ {transform: rotate(100deg); } | 50%の姿を書く。0%から50%まで滑らかに動くようになる |
| アニメ絵「100％、回転360度」 | 100％ {transform: rotate(360deg);} | 100%の姿を書く。50%から100%まで滑らかに動くようになる |
| アニメ枠閉じる | } |