★CSS基礎
3つのレイアウト手法 floatレイアウト flexboxレイアウト gridレイアウト float レイアウトの問題点 横並びにしたブロックの高さを揃えられない 横並びにしたブロックは上揃えにしかならない 幅の計算があわないとカラム落ちする float解除の仕組みが分かり…
floatの使い方 floatとは？ floatを指定した要素が「浮いた状態」になる特性です floatの使い方 横並びにしたい要素に対して、float: 値;を指定して使用します 値に記述するのは、以下のような「方向」を示すワードです 値 指定内容 left 横並びにした要素を…
スクロール後要素を固定するposition: sticky; スクロールで動き、要素を固定するposition: sticky; stickyを適用した要素はスクロールに応じて追従するように動き、指定した位置に固定することができます positionプロパティはstickyの他にも下記の4つがあ…
要素を固定する position: fixed; positionプロパティを使って要素位置を固定するfixed コンテンツを画面に固定させて表示させたい場合に利用します positionプロパティはfixedの他にも下記の4つがあります relative absolute static sticky position: fixed…
要素の絶対位置を指定するposition: absolute; position: absolute; は、要素の配置を自由に設定することができます position: absolute; は単体で使用せず、position: relative; とセットで使います positionプロパティはabsoluteの他にも下記の4つがありま…
相対位置を指定する position: relative; 現在位置を基準に、相対位置を指定することができます position: relative; は単体で使用せず、position: absolute; とセットで使うことが多いです positionプロパティはrelativeの他にも下記の4つがあります fixed …
position: static; positionプロパティは、要素の配置を指定するプロパティです 通常、positionプロパティは「top」「right」「bottom」「left」の4つのプロパティと合わせて要素の配置を指定します static：位置も重なりも指定できない、positionプロパティ…
positionプロパティで要素を配置 positionプロパティとは positionプロパティは、要素の「位置」を指定する際に使用するCSSプロパティです 要素を自由に配置したい 要素の重なり順を変えたい ヘッダーを固定して表示したい positionプロパティの使い方 posit…
背景画像 画像解説が必要な場合：img要素 画像解説が不要な場合：backgroundプロパティ プロパティ意味値初期値 background-color背景色カラーコード｜カラーネーム｜transparenttransparent（透明） background-image背景画像url（ファイルパス）｜nonenone…
ナビゲーションの種類（PC版） ボタン形式（面） ロゴとナビゲーションを横に並ぶ ボタン形式（面） <html lang="ja"> <head> <meta charset="UTF-8"> <title>SHELLY’S</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <header class="header"> <h1 class="logo"><a href="#"></a></h1></header></div></body></html>
Flexboxで横並び <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>Flexboxで横並び</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="wrapper"> <div class="box"> <img src="img/01.jpg" alt=""> <p>左の画像の説明</p> <…</div></div></body></html>
Flexboxで横並び シンプルな横並び 幅の計算は、box-sizing: border-box; を前提にする 親要素にpaddingがついている場合 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>flexboxで横並び</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <…</body></html>
Flexboxアイテムで指定できるプロパティ order：並び順 .itemA{ order: 4; } .itemB{ order: 1; } .itemC{ order: 3; } .itemD{ order: 2; } flex-grow：伸び率 flexコンテナーの幅に余りがある場合にflexアイテムの伸び率を他のflexアイテムとの相対値（整…
justify-content：水平方向の位置 justify-content: flex-start（デフォルト） .container { display: flex; justify-content: flex-start; } justify-content: flex-end .container { display: flex; justify-content: flex-end; } justify-content: center…
Flexboxとは CSS3 Flexible Box (可変ボックス) CSS Flexible Box Layout Module Level 1 ボックスのレイアウト方法を定めるCSSの機能 ボックスを任意の方向にレイアウトしたり、ボックスの大きさを伸縮可能（flex）にするもの flex：融通のきく、柔軟なとい…
Flexbox 「display: flex;」で、要素を横並びにできます 「リストや画像を横並びにしたい」 「要素間の余白を均等にして、はみ出たら折り返したい」 「表示する順番を逆からにしたい」 「画像とテキストを左右交互に配置したい」 Flexboxの性質 以下の性質が…
要素の横並び displayプロパティの初期値 block inline inline-block none display: block <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>display: block</title> <style> /*--…</meta></meta></meta></head></html>
擬似クラス 特定の状態に対してのみスタイル（CSS）が反映されるセレクタを作る :hover 主にマウスカーソルの動作に対して使われる擬似クラスです マウスカーソルがホバーした時（要素の上に乗った時）にスタイルを反映させる <p><a href="#">テキストリンク</a></p> a { color: inh…
演習 CSSの記述は、内部参照（embed）で記述 問題 CSS1 #1B888D #355584 <body> <h1>style要素</h1> <h2>style element</h2> <p>HTML文書内にまとめて設定します。</p> </body> 問題 CSS2 幅の指定は300px #006AB8 #BAD4EB <body> <h1>background-colorの設定</h1> <p>見出しには濃いめの色を背景に指定し、文字を白抜</p></body>…
ブロックレベル要素とインラインレベル要素 ブロックレベル要素の特徴 テキストP.076〜P.077 要素が縦に並ぶ（その前後で改行表示されます） 幅と高さを指定できる（デフォルト状態で親要素と同じ幅を持っています） 余白を自由に調整できる 要素の配置を指…
文字の囲み borderを使用して、要素に枠線をつける borderプロパティの値を指定する セレクタ { boder: 線の太さ, 線の種類, 線の色 ; } 上下左右の枠線を個別に指定する 「border」と記述することにより、上→右→下→左をショートハンドで記述したことになり…
文字設定 - font 文字の修飾 ページ全体に反映したい場合は「body」に指定します（継承） 文字のプロパティ color : 文字の色 font-size : 文字の大きさ font-family : フォントの種類 font-weight : 文字の太さ font-style : 文字のスタイル line-height : …
ボックスモデル テキストP.076〜 HTMLタグでマークアップされた要素は１つの箱とみなされます HTMLの要素は4つの領域を持っています 表示領域 要素の内側の余白（padding） 要素の外側の余白(margin) paddingとmarginの境界線(border) 記述するプロパティの…
CSSとは テキストP.066〜 Cascading Style Sheets 構造化された文書をどのように表現するのかを指定するための言語 文字の色、文字の大きさ、余白などのレイアウトの指定 CSSのコーディング規約（Google） Google HTML/CSS Style Guide CSSの基本書式 テキス…
