【旧】レスポンシブ対応の基本フォーマットを作成した-ツイート-シェア---LINEで送る-B!ブックマーク-pocket-rss2017-09-292020-02-11イラストACの画像をもとに加工しています。HTMLとCSSだけで、レスポンシブに対応したWebページの基本フォーマットを作成しました。1カラム2カラム(左メニュー、右メニュー)3カラム(両端メニュー)の4パターンを用意しています。cssクラスを1か所変えるだけでパターン変更ができて、スマホになるとサイドメニューが下の方に表示されるようにしています。HTML5,CSS3からもっとかんたんに作れるようになったので、ソースコードサンプルを全面的に見直しました。最新サンプルはこちらで見ることができます。"1カラム(メインコンテンツのみ)のサンプルページ"2カラム(左メニュー、右メインコンテンツ)のサンプルページ2カラム(右メニュー、左メインコンテンツ)のサンプルページ3カラム(両端メニュー、中央メインコンテンツ)のサンプルページまとめHTML,CSS基本フォーマット作成に際して近年、Webのフロント開発では当たりのレスポンシブウェブデザイン。それを実現するには、とくにCSSに専門性の高い知識が求められています。(高度なことを行う場合はJavaScriptも)でも、じっさいに触ってみると意外と簡単にできてしまうのもHTML、CSSの魅力です。今回HTMLとCSSだけで、レスポンシブウェブデザイン対応のHTMLの基本フォーマットを作成しました。このようなものは、WordPressのテーマなどテンプレートの中にすでに組み込まれています。普段は意識する必要はないですし、絶対に必要な知識でもありません。根本的なことを知ることは損ではないので、学習用としてあってもいいかなと思って作成しました。4パターンのサンプル作成HTMLは約20行です。CSSは150行くらいですが、読みやすいようにあえてまとめた記述をしていません。視覚的にわかりやすいような定義も30%ぐらいあるので、レスポンシブの部分に関する記述は少ないです。これだけの記述で、cssのクラス名を1か所変えるだけで、4パターンのフォーマットが切り替えられるようになっています。パターンは次の4つです。1カラム(メインコンテンツのみ)2カラム(左メニュー、右メインコンテンツ)2カラム(右メニュー、左メインコンテンツ)3カラム(両端メニュー、中央メインコンテンツ)これにヘッダとフッタの領域もつけました。スマホやタブレットで表示するときは、メニューがメインコンテンツの下に表示されます。レスポンシブデザインをどのように実現しているのか知りたい人にぜひ参考にしていただければと思います。レスポンシブに対応したHTML文HTMLの全文です。class="footer">Footer</div></body></html>レスポンシブに対応したCSSCSSは150行くらいありますが、レスポンシブのところは40行目以降からです。むずかしいことは何ひとつありません。}}レスポンシブ対応基本フォーマットのサンプルページそれぞれ4パターンのサンプルページを用意しました。ソースはさっきのHTML&CSSの2つです。各ボタンを押すとサンプルが表示されます。ブラウザの横幅を変えるだけでレスポンシブにコンテンツが変化します。ブラウザの開発ツールでテスト用スマホ、タブレットでも確認できます。column2-left">に変更するだけで、コンテンツが切り替わります。column2-right">に変更するだけで、コンテンツが切り替わります。column3">に変更するだけで、コンテンツが切り替わります。sampleまとめクラス名を変えるだけでフォーマットを変更するしくみは、すべてのフォーマットに対応するクラスをCSSに書くことです。これでHTMLでクラス名を変更すると、それに対応したCSSの定義だけが実行されフォーマットが切り替わります。プログラムでHTMLのclass属性を変えて動的に変更することもできる。そのほかCSSのポイントは、スマホ、タブレットの記述はほとんどありません。PC、iPadPro用に入れたwidthの処理をクリアしているだけです。auto;}スマホ、タブレットのコードはこれだけです。PC版はひとつだけ工夫が必要です。サイドメニューの表示位置をCSSで調整しました。leftHTMLはスマホの表示順に合わせてサイドメニューを定義します。スマホ、タブレットのときCSSではほとんど制御しません。HTMLを上から順に表示します。HTMLはスマホの表示順に合わせて書くCSSのスマホ・タブレットの記述はwidthのクリア処理だけCSSは、PC、iPadPro用のサイズ指定とサイドメニューの位置調整が中心フォーマット切り替えはクラス名を変更するだけレスポンシブの方法はだいたいこんな感じです。ほとんどのことはこれの応用でできます。HTML&CSSで不可能な高度なことをしたいときはJavaScriptを使います。【旧】レスポンシブ対応の基本フォーマットを作成したCSSHTMLレスポンシブHTML&CSSの本どうしてもインターネットで調べて勉強するのが苦手という人のために、HTMLとCSSの最新技術と基本を網羅できる本を2冊選びました。この内容を身につければ、ほかの本は必要ありません。将来的には、自分の力で、書籍を使わずに、インターネットにある情報だけで学べます。関連記事SNSでも記事を配信しています。*メールアドレス(公開されません。*このフォームを使用することにより、このウェブサイトによるデータの保管および取り扱いに同意するものとします。コメントデータの処理方法の詳細はこちらをご覧ください。(全16回)日本国憲法を読む。views今上天皇の読み方。Vol.3天皇の皇位継承の解決策は既にある。Vol.2天皇の男系・女系・双系の違い。Vol.14図で見りゃわかる。このサイトの使用を継続することで、その使用に同意したとみなされます。コントロール方法を含む詳細についてはこちらをご覧ください。(1)プロフィールシステムエンジニア&プログラマ。SIerに12年、フリーと会社員を交互に繰り返すこと4年。心疾患をわずらってしまい実家に戻って静養中。何もしないのはヤバいので、今まで得てきたものをWebサイトで発信しながら少しだけ活動中。静養しながらできることをして、迷走して、転んで、怪我してをくり返している。コメント等いただいておりますが、回答・回答は遅くなりがちです。(1週間以内で早い方。)20%くらいの力しか出せてないので、その点はご了承ください。コメント等のコミュニケーションは面と向かって話すのと同じだと思っています。初対面でいきなりケンカ腰で来られると、『いきなり刺されるかも?』と同じくらいに感じるので、100%レスポンスがあるとはかぎりません。そのエネルギーがないだけなんですが...くわしく見るSNSでも記事を配信しています。ただ屋ぁのブログ.topこの記事を気に入ったらぜひシェアも!!。