Try   HackMD
tags: CSS

CSSのレイアウト

よくあるものや，今回のホームページ制作で使うスタイリングの方法をいろいろ紹介します．

以下のように，適当な名前の新しいフォルダとindex.html，style.css を作成してください．

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

HTMLファイルは以下を記述してください．

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>スタイリングの練習</title>
</head>
<body>
  
</body>
</html>

JavaScriptが出てくることがありますが，無視してください．

もくじ

display プロパティ

要素をブロック要素とインライン要素のどちらとして扱うか、およびその子要素のために使用されるレイアウト、例えば フローレイアウト，グリッド，フレックスなどを設定する.
要素の内側と外側の表示種別を設定します．外側の型は要素のフローレイアウトへの参加方法を設定し，内側の型は子要素のレイアウトを設定する．

リファレンス：https://developer.mozilla.org/ja/docs/Web/CSS/display

ブロック要素

文書の書字方向の中で，段落として一つが他の物の後に表示される．

インライン要素

インライン要素はインライン方向，つまり文書の書字方向に従って，文の中で言葉が表示される方向に表示される.

フローレイアウト

通常フロー とも呼ばれ，フロー(flow)は流れのという意味．
HTMLで記述された順番に，ブロック要素は縦の方向に配置し，インライン要素は横の方向に配置する．
レイアウトが指定される前のレイアウト．デフォルトのレイアウトだと理解してもいいかもしれない．

グリッドレイアウトやフレックスレイアウトは，このフローレイアウトを変更すること．

リファレンス：【HTML&CSS】私的レイアウト入門講義

グリッド

グリッドレイアウトモデルでは，ページを大きな領域に分割することや，HTML のプリミティブから構成されたコントロールの部品間の，寸法，位置，レイヤーに関する関係を定義することに優れている．

リファレンス：CSS グリッドレイアウト

フレックス

フレックスレイアウトモデルでは，フレックスコンテナーの子は任意の方向にレイアウトすることができ，また使われていない空間を埋めるために伸長したり，あるいは親のあふれることを避けるために収縮したりと，そのサイズを「伸縮」することができる．
子の水平方向と垂直方向の両方の整列を，容易に操作することが可能．

今回のホームページ制作では，主にフレックスレイアウトを用います．

リファレンス：CSS フレックスボックスレイアウト

さらに詳しく使うのは，もう少し後で．

position プロパティ

文書内で要素がどのように配置されるかを設定する．
top, right, bottom, left の各プロパティが，配置された要素の最終的な位置を決める．

リファレンス：https://developer.mozilla.org/ja/docs/Web/CSS/position

static

要素は文書の通常のフローに従って配置される．top, right, bottom, left，z-index プロパティは効果がなく，これはデフォルト値です．

absolute

要素は文書の通常のフローから除外され，ページレイアウト内に要素のための空間は作成されない．
直近の配置されている祖先があれば，それに対して相対配置され，そうでなければ初期の包含ブロックに対して相対配置される．最終的な位置は top, right, bottom, left の値によって決定される．
絶対位置指定ボックスのマージンは，他の要素のマージンと相殺されない．

relative

要素は文書の通常のフローに従って配置され，top, right, bottom, left の値に基づいて自分自身からの 相対オフセット で配置される．オフセットは他の要素の配置には影響を与えない．

fixed

要素は文書の通常のフローから除外され，ページレイアウト内に要素のための空間は作成されない．ビューポートによって定められた初期の包含ブロックに対して相対配置される．
この値は，常に新しい重ね合わせコンテキストを作成し，印刷文書の場合，要素は各ページの同じ位置に配置される．

sticky

要素は文書の通常のフローに従って配置され，直近のスクロールする祖先および包含ブロック (直近のブロックレベル祖先，表関連要素を含む) に対して top, right, bottom, left の値に基づいて相対配置される．
オフセットは他の要素の配置には影響を与えない．

詳しくは，「positionプロパティを身に着けよう！stickyの仕様と使い方を解説！」

border 関係

border

一括指定プロパティで，要素の境界を設定する．

  • border
    • border-width：境界線の幅
    • border-style：境界線のスタイル
    • border-color：境界線の色

border-radius

要素の境界の外側の角を丸める．
半径の長さを指定していることを意識してみるといいかもしれない．

  • border-radius
    • border-top-left-radius ：左上
    • border-top-right-radius ：右上
    • border-bottom-right-radius：右下
    • border-bottom-left-radius ：左下
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

.style2 の場合

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

.style5 の場合

overflow プロパティ

要素のオーバーフロー時，要素の内容が多すぎてブロック整形コンテキストに収まらない場合の望ましい動作を両方向について設定する．

  • overflow
    • overflow-x
    • overflow-y

min-・max-

width

  • max-width：要素の最大幅
  • min-width：要素の最小幅

画面のリサイズなどによって要素の幅が変わるとき，その最大最小値を設定する．

height

  • max-height：要素の最大高
  • min-height：要素の最小高

画面のリサイズなどによって要素の高さが変わるとき，その最大最小値を設定する．

Flexボックス

Flexbox レイアウトは親要素の displayプロパティ の値に flex または inline-flex を指定することで定義される．

flex-wrap プロパティ

フレックスアイテムを単一行に押し込むか，あるいは複数行に折り返してもよいかを指定する．
折り返しを許可する場合は，行を積み重ねる方向の制御も可能です．

リファレンス：https://developer.mozilla.org/ja/docs/Web/CSS/flex-wrap

flex-direction プロパティ

主軸の方向や向き (通常または逆方向) を定義することにより，フレックスコンテナー内でフレックスアイテムを配置する方法を設定する．

リファレンス：https://developer.mozilla.org/ja/docs/Web/CSS/flex-direction

align-items プロパティ

フレックスボックスでは，交差軸方向のアイテムの配置を制御する．
グリッドレイアウトでは，グリッド領域におけるアイテムのブロック軸方向の配置を制御する．

リファレンス：https://developer.mozilla.org/ja/docs/Web/CSS/align-items

justify-content プロパティ

フレックスコンテナーの主軸およびグリッドコンテナーのインライン軸に沿って，中身のアイテムの間や周囲に間隔を配置する方法を定義する．

リファレンス：https://developer.mozilla.org/ja/docs/Web/CSS/justify-content

align-content プロパティ

フレックスボックスの交差軸 (縦方向) またはグリッドのブロック軸方向の内部のアイテムの間または周囲の空間の配分方法を設定する．

リファレンス：https://developer.mozilla.org/ja/docs/Web/CSS/align-content

flex プロパティ

フレックスアイテムをフレックスコンテナーの領域に収めるために，どのように伸長・収縮させるかを指定する．

  • flex
    • flex-grow：フレックスアイテムの主軸方向の寸法のフレックス伸長係数
    • flex-shrink：フレックスアイテムの縮小係数
    • flex-basis：フレックスアイテムの主要部分の初期の寸法

リファレンス：https://developer.mozilla.org/ja/docs/Web/CSS/flex

CSSのflexboxをゲーム感覚で学べるサイト：https://flexboxfroggy.com/#ja

まとめ

ここまでで，いろいろなレイアウト方法を紹介してきました．
gridレイアウトについて興味のある方は，自身で学んでみてください！

いよいよホームページ制作です！

Last changed by 
 
HTML・CSS講座
講座用
0
764

Read more

ホームページ制作 - テンプレート作成編

&#x3044;&#x3088;&#x3044;&#x3088;&#x5927;&#x8A70;&#x3081;&#x3067;&#x3059;&#xFF01; &#x4ECA;&#x307E;&#x3067;&#x5B66;&#x3093;&#x3060;&#x3053;&#x3068;&#x3092;&#x30D5;&#x30EB;&#x6D3B;&#x7528;&#x3057;&#x3066;&#x3044;&#x304D;&#x307E;&#x3057;&#x3087;&#x3046;&#xFF01; &#x305F;&#x3060;&#xFF0C;&#x3059;&#x3079;&#x3066;&#x81EA;&#x5206;&#x3067;&#x30B3;&#x30FC;&#x30C7;&#x30A3;&#x30F3;&#x30B0;&#x3067;&#x304D;&#x308C;&#x3070;&#x3044;&#x3044;&#x3067;&#x3059;&#x304C;&#xFF0C;&#x305D;&#x3046;&#x3082;&#x3044;&#x304B;&#x306A;&#x3044;&#x3068;&#x601D;&#x3046;&#x306E;&#x3067;&#xFF0C;&#x307E;&#x305A;&#x306F;&#x898B;&#x306A;&#x304C;&#x3089;&#x81EA;&#x5206;&#x306E;&#x624B;&#x3067;&#x30B3;&#x30FC;&#x30C7;&#x30A3;&#x30F3;&#x30B0;&#x3059;&#x308B;&#x3053;&#x3068;&#x3092;&#x3084;&#x3063;&#x3066;&#x307F;&#x307E;&#x3057;&#x3087;&#x3046;&#xFF01; &#x305D;&#x3046;&#x3057;&#x3066;&#x3044;&#x304F;&#x3046;&#x3061;&#x306B;&#xFF0C;&#x3060;&#x3093;&#x3060;&#x3093;&#x3068;&#x30D1;&#x30BF;&#x30FC;&#x30F3;&#x306E;&#x3088;&#x3046;&#x306A;&#x3082;&#x306E;&#x304C;&#x5206;&#x304B;&#x3063;&#x3066;&#x304F;&#x308B;&#x3082;&#x306E;&#x3067;&#x3059;&#xFF0E; &#x4ECA;&#x307E;&#x3067;&#x5B66;&#x3093;&#x3067;&#x304D;&#x305F;&#x30D7;&#x30ED;&#x30D1;&#x30C6;&#x30A3;&#x305F;&#x3061;&#x304C;&#xFF0C;&#x304A;&#x4E92;&#x3044;&#x306B;&#x3069;&#x3046;&#x4F5C;&#x7528;&#x3057;&#x3042;&#x3046;&#x306E;&#x304B;&#x3092;&#x4F53;&#x611F;&#x3057;&#x3066;&#x3044;&#x304D;&#x307E;&#x3057;&#x3087;&#x3046;&#xFF01; &#x76EE;&#x6A19;&#x306E;&#x78BA;&#x8A8D; &#x30A2;&#x30AF;&#x30BB;&#x30B9;&#x3057;&#x3066;&#x307F;&#x3066;&#x304F;&#x3060;&#x3055;&#x3044;&#xFF01;

Sep 7, 2022
GitHub Pagesの準備

&#x524D;&#x63D0; &#x300C;&#x4E8B;&#x524D;&#x6E96;&#x5099;&#x300D;&#x8CC7;&#x6599;&#x3092;&#x7D42;&#x3048;&#x3066;&#x3044;&#x308B; GitHub&#x30A2;&#x30AB;&#x30A6;&#x30F3;&#x30C8;&#x3092;&#x4F5C;&#x6210;&#x6E08;&#x307F; PC&#x306B;Git Bash&#x3092;&#x5C0E;&#x5165;&#x6E08;&#x307F; cmd&#x3068;PowerShell&#x3067;git&#x30B3;&#x30DE;&#x30F3;&#x30C9;&#x3092;&#x4F7F;&#x3048;&#x308B;&#x3088;&#x3046;&#x306B;&#x30D1;&#x30B9;&#x3092;&#x901A;&#x3059;(Win&#x306E;&#x307F;) &#x6CE8;&#x610F; &#x3053;&#x306E;&#x8CC7;&#x6599;&#x4F5C;&#x6210;&#x65E5;&#x6642;&#x306F;2022/09/07&#x3067;&#x3059;&#xFF0E; GitHub Pages&#x306E;&#x30A2;&#x30C3;&#x30D7;&#x30C7;&#x30FC;&#x30C8;&#x306A;&#x3069;&#x306B;&#x3088;&#x308A;&#xFF0C;&#x672C;&#x8CC7;&#x6599;&#x3068;&#x5B9F;&#x969B;&#x306E;GitHub Pages&#x306A;&#x3069;&#x306E;UI&#x304C;&#x8CC7;&#x6599;&#x306E;&#x95B2;&#x89A7;&#x6642;&#x671F;&#x306B;&#x3088;&#x3063;&#x3066;&#x7570;&#x306A;&#x3063;&#x3066;&#x3057;&#x307E;&#x3046;&#x5834;&#x5408;&#x304C;&#x3042;&#x308A;&#x307E;&#x3059;&#xFF0E;

Sep 6, 2022
ホームページ制作 - Indexページ編

index.html &#x306E;&#x4F5C;&#x6210;&#x3092;&#x884C;&#x3063;&#x3066;&#x3044;&#x304D;&#x307E;&#x3059;&#xFF0E; &#x3082;&#x304F;&#x3058; Font Awesome &#x306E;&#x5C0E;&#x5165; Index.html&#x7528;&#x306E;CSS&#x3092;&#x8AAD;&#x307F;&#x8FBC;&#x307F; &#x30E1;&#x30A4;&#x30F3;&#x30B3;&#x30F3;&#x30C6;&#x30F3;&#x30C4;&#x3092;&#x4F5C;&#x308B; &#x30B3;&#x30DF;&#x30C3;&#x30C8;&#x3068;&#x30D7;&#x30C3;&#x30B7;&#x30E5; &#x307E;&#x3068;&#x3081;

Sep 4, 2022
ホームページ制作 - Aboutページ編

&#x3053;&#x3053;&#x3067;&#x306F;&#xFF0C;About&#x30DA;&#x30FC;&#x30B8;&#x3092;&#x4F5C;&#x3063;&#x3066;&#x3044;&#x304D;&#x307E;&#x3059;&#xFF0E; &#x307E;&#x305A;&#x306F;tmp.html&#x306E;&#x5185;&#x5BB9;&#x3092;about.html&#x306B;&#x30B3;&#x30D4;&#x30DA;&#x3057;&#x307E;&#x3059;&#xFF0E; &#x3082;&#x304F;&#x3058; &#x76EE;&#x6A19;&#x7269; HTML CSS &#x30B3;&#x30DF;&#x30C3;&#x30C8;&#x3068;&#x30D7;&#x30C3;&#x30B7;&#x30E5;

Sep 4, 2022
Read more from HTML・CSS講座
Published on HackMD