にしし ふぁくとりー(西村文宏 個人サイト)

Presented by Nishishi via Movable Type. Last Updated: 2016/11/03. 13:00:34.

レスポンシブな2段組レイアウトを作るHTML+CSSの書き方

レスポンシブな2カラムレイアウトを作るCSSの書き方ウェブページのレイアウトで「2段組(=2カラムレイアウト)」はかなり需要がありますよね。
このレイアウトを(HTMLは共通のままで)PCやモバイル端末などのあらゆる端末に楽に対応させるには、

  • スマートフォンなどの狭い画面では1カラム(段組なし)で表示、
  • タブレットなどの中間サイズでは一部分だけをマルチカラムにして表示、
  • PCなどの広い画面では2カラムで表示

……という動的なレイアウト変更ができると便利です。
そのような表示を実現する「レスポンシブ・ウェブデザイン」を使って、2段組(2カラムレイアウト)ページを作成するHTML+CSSソースの書き方をAll Aboutで解説しました。

レスポンシブな2カラムレイアウトを作るCSSの書き方(@All About ホームページ作成)

2段組レイアウトを作る場合、「HTMLソースの記述方法(順序)」と「実際の2段組の構造(表示順)」をパターンにすると、4通りの実現方法があります。
これら4通りについて、それぞれサンプルを用意しています。お望みのソース構造やレイアウトに合わせた解説を参考にしてみて下さい。

コメント

コメント数: 0件

コメント投稿欄 この日記に対するコメント投稿を歓迎します。

保存しますか?



※本文中にURLは書けません。(書くと投稿が拒否されますのでご注意下さい。)

※投稿内容は、実際にページ上に掲載される前に、管理者によって確認される設定にしている場合があります。その場合は、投稿後にその旨が表示されます。たいてい1~2日以内には表示されるはずですので、気長にお待ち願います。m(_ _)m

トラックバック

このエントリーへのトラックバックURLを表示するにはここをクリック
※スパム防止のため、トラックバックURLは別ウインドウで表示します。(JavaScriptが有効でないと表示されません。)

--- 当サイト内を検索 ---