TECH I.S.

HTMLレイアウトの要素とテクニック


Webサイトでは、コンテンツが複数の列に表示されることがよくあります(雑誌や新聞など)。


都市
ロンドン

ロンドンはイングランドの首都です。イギリスで最も人口の多い都市であり、1,300万人を超える大都市圏があります。

テムズ川沿いに立つロンドンは、2000年にわたって主要な入植地でした。その歴史は、ロンディニウムと名付けられたローマ人によって設立されたものにまでさかのぼります。

フッター


HTMLレイアウト要素

HTMLには、Webページのさまざまな部分を定義するセマンティック要素がいくつかあります。

HTML5 Semantic Elements
<header>- ドキュメントまたはセクションのヘッダーを定義します
<nav>- 一連のナビゲーションリンクを定義します
<section>- ドキュメント内のセクションを定義します
<article>- 独立した、自己完結型のコンテンツ
<aside>- コンテンツ以外のコンテンツを定義する(サイドバーなど)
<footer>- ドキュメントまたはセクションのフッターを定義します
<details>- ユーザーがオンデマンドで開閉できる追加の詳細を定義します
<summary>- <details>要素の見出しを定義します
HTML5 Semantic Elements
  • <header>- ドキュメントまたはセクションのヘッダーを定義します
  • <nav>- 一連のナビゲーションリンクを定義します
  • <section>- ドキュメント内のセクションを定義します
  • <article>- 独立した自己完結型を定義します コンテンツ
  • <aside>- コンテンツ以外のコンテンツを定義する(サイドバーなど)
  • <footer>- ドキュメントまたはセクションのフッターを定義します
  • <details>- ユーザーがオンデマンドで開閉できる追加の詳細を定義します。
  • <summary>- <details>要素の見出しを定義します

セマンティック要素の詳細については、HTMLセマンティクスの章を参照してください。


HTMLレイアウトのテクニック

複数列のレイアウトを作成するには、4つの異なる手法があります。各手法には長所と短所があります。

  • CSSフレームワーク
  • CSSfloat プロパティ
  • CSSフレックスボックス
  • CSSグリッド

CSSフレームワーク

レイアウトをすばやく作成したい場合は、p.xBootstrapなどのCSSフレームワークを使用できます。


CSSフロートレイアウト

CSSのfloatプロパティを使用してWebレイアウト全体を行うのが一般的です。Floatは簡単に習得できます。floatプロパティとclearプロパティがどのように機能するかを覚えておくだけで済みます。短所:フローティング要素はドキュメントフローに結び付けられているため、柔軟性が損なわれる可能性があります。
floatについて詳しくは、CSS floatとclearの章をご覧ください。

都市
ロンドン

ロンドンはイングランドの首都です。イギリスで最も人口の多い都市であり、1,300万人を超える大都市圏があります。

テムズ川沿いに立つロンドンは、2000年にわたって主要な入植地でした。その歴史は、ロンディニウムと名付けられたローマ人によって設立されたものにまでさかのぼります。

フッター


CSSフレックスボックスのレイアウト

フレックスボックスを使用すると、ページレイアウトがさまざまな画面サイズやさまざまなディスプレイデバイスに対応する必要がある場合に、要素が予測どおりに動作することが保証されます。

フレックスボックスについて詳しくは、CSSフレックスボックスの章をご覧ください。

都市
ロンドン

ロンドンはイングランドの首都です。イギリスで最も人口の多い都市であり、1,300万人を超える大都市圏があります。

テムズ川沿いに立つロンドンは、2000年にわたって主要な入植地でした。その歴史は、ロンディニウムと名付けられたローマ人によって設立されたものにまでさかのぼります。

フッター


CSSグリッドレイアウト

CSSグリッドレイアウトモジュールは、行と列を含むグリッドベースのレイアウトシステムを提供し、フロートや配置を使用せずに Webページを簡単にデザインできるようにします。

CSSグリッドの詳細については、CSSグリッドの概要の章をご覧ください。



プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう!

スクールの詳細