【新旧比較】レスポンシブ対応の基本フォーマットを作成した-ツイート-シェア---LINEで送る-B!ブックマーク-pocket-rss2018-10-302019-01-15イラストACの画像をもとに加工しています。HTMLとCSSだけでつくった、レスポンシブに対応したWebページの基本フォーマットを全面的にアップデートしました。1カラム2カラム(左メニュー、右メニュー)3カラム(両端メニュー)の4パターンを用意しています。cssクラスを1か所変えるだけでパターン変更ができて、スマホサイズになるとサイドメニューが下の方に表示されるようにしています。ここでは、新旧サンプルの比較を行います。CSS3は、レスポンシブウェブデザインに対応するため、いろいろな機能が追加されています。それによって、いままでちょっと工夫が必要だった処理がかんたんにできるようになりました。ぼくが以前つくったサンプルも、もっとかんたんに、さらに完成度が高いものができるようになったので、全面的に作り替えることにしました。新旧のサンプルの記事はこちらです。レスポンシブ対応の基本フォーマットを作成したtadtadya.com_このようなものは、WordPressのテーマなど、テンプレートの中にすでに組み込まれています。普段は意識する必要はないですし、絶対に必要な知識でもありません。根本的なことを知ることは損ではないので、学習用としてあってもいいかなと思って作りました。レスポンシブデザインをどのように実現しているのか知りたい人にぜひ参考にしていただければと思います。レスポンシブに対応したHTML文HTMLの全文です。</div></body></html>修正前のHTMLの全文です。class="footer">Footer</div></body></html>無駄なdivがなくなってスリムになっています。ヘッダー・フッターはHTML5から追加されたheader・footerタグを使うように変更しました。90行くらいありますが、レスポンシブ用のCSSは、25行目からです。難しいことは何1つしていません。}}次に修正前のCSSです。}}ボリュームが50行、1/3くらい減りました。float:right』の回り込みから、『display:flex』に替えたことです。flexコンテナは、CSS3から使えるもので、レスポンシブデザインのために追加されました。これを使うことで細かい微調整がいらなくなりました。メディアクエリ(@media)で細かいデバイスの区切りが不要になったこともその一つです。今回のサンプルでは、メディアクエリは1つしか使っていません。新コードの解説はあとにして、まずはサンプルページを表示してみましょう。(比較のために、修正前のサンプルページもリンクします。)レスポンシブ対応基本フォーマットのサンプルページそれぞれ4パターンのサンプルページを用意しています。ソースは上のHTML・CSSの2つです。各ボタンを押すとサンプルが表示されます。ブラウザの横幅を変えるだけでレスポンシブにコンテンツが変化します。ブラウザの開発ツールでテスト用スマホ、タブレットでも確認できます。-old修正前は、微調整のためにマージンを使っているので、コンテンツの間にどうしてもマージンができてしまいます。ヘッダー・フッターの幅が、メインコンテンツと違います。これだと、PCのモニターが27インチなど大きなものではバランスが悪くなります。修正後は、これらがかんたんに解決されています。完成度が一段と高くなっていると思います。(2カラム・3カラムでも修正されています。class="column2-left">に変更するだけです。-old修正前は、floatを使って回り込みを行っているので、サイドメニューが下になる一瞬、デザインが崩れているように見えます。PCのブラウザの幅を変えながら確認すると、修正後のデザインはなめらかに変化します。これが少ないコードでかんたんに解決しています。(2カラムの右サイドメニュー、3カラムでも修正されています。class="column2-right">に変更します。class="column3">に変更するだけです。CSS3で作ったフォーマットは、デザインが崩れることが一瞬もないので、スムーズにレスポンシブデザインに対応できます。一段と完成度の高いレスポンシブデザインになることが実感できるでしょう。HTMLのスリム化、CSSのボリューム削減は、floatによるコンテンツの回り込みから、flexコンテナに替えたことでできました。処理の内容もシンプルになっています。HTMLはスマホの表示順に合わせて書くCSSはスマホメインで書くCSSのメディアクエリは、PCの横並びコンテンツ調整が中心フォーマット切り替えはHTMLでクラス名を変更するだけ行なっている処理はこれだけです。CSS3の新機能を使うのに躊躇する人もいると思いますが、余程のことがないかぎり使っていく方がよいです。【新旧比較】レスポンシブ対応の基本フォーマットを作成したCSSHTMLレスポンシブ最近Webカテゴリでよく読まれている記事です。ドメイン取得の意味が分からない人へ。王道の方法を紹介します。ドメインの登録業者を選ぶのに悩む必要はないです。サイトを簡単に早く公開するには全くいらないことで、むしろ邪魔です。『お名前.com』というサービスは必ず耳にします。そのお名前.comのメリットとデメリットと一緒に、ドメインの意味が分からない人が一番失敗しないドメインの取得方法を紹介します。tadtadya.com_関連記事SNSでも記事を配信しています。*メールアドレス(公開されません。*このフォームを使用することにより、このウェブサイトによるデータの保管および取り扱いに同意するものとします。コメントデータの処理方法の詳細はこちらをご覧ください。(全16回)日本国憲法を読む。views今上天皇の読み方。Vol.3天皇の皇位継承の解決策は既にある。Vol.2天皇の男系・女系・双系の違い。Vol.14図で見りゃわかる。このサイトの使用を継続することで、その使用に同意したとみなされます。コントロール方法を含む詳細についてはこちらをご覧ください。(1)プロフィールシステムエンジニア&プログラマ。SIerに12年、フリーと会社員を交互に繰り返すこと4年。心疾患をわずらってしまい実家に戻って静養中。何もしないのはヤバいので、今まで得てきたものをWebサイトで発信しながら少しだけ活動中。静養しながらできることをして、迷走して、転んで、怪我してをくり返している。コメント等いただいておりますが、回答・回答は遅くなりがちです。(1週間以内で早い方。)20%くらいの力しか出せてないので、その点はご了承ください。コメント等のコミュニケーションは面と向かって話すのと同じだと思っています。初対面でいきなりケンカ腰で来られると、『いきなり刺されるかも?』と同じくらいに感じるので、100%レスポンスがあるとはかぎりません。そのエネルギーがないだけなんですが...くわしく見るSNSでも記事を配信しています。ただ屋ぁのブログ.topこの記事を気に入ったらぜひシェアも!!。