magazine mediaquery grid flexbox showcase

WordPress new theme for Experiment

新テーマのサプライズ

  1. モバイルファースト
  2. 最新HTML・CSSコーディング
  3. スマートフォンアプリ ビジュアル再現
  4. マテリアルデザイン
  5. WebP採用(要プラグイン)
  6. JSON-LD導入
  7. 4K DPR3 レスポンシブイメージ
  8. マテリアルデザイン / Material Icon / マテリアルカラー
  9. サイトはgridレイアウト・flexboxコンテンツ デザイン
  10. PageSpeed Insights数値向上策
magazine mediaquery grid flexbox showcase

SEOでアクセスアップSEMでオーダーアップSEO塾

SEO塾は、一般的な検索エンジン対策はもとより、特に、アルゴリズムの変更やペナルティの導入に、非常に敏感です。

数百サイトで数千ページのアンテナを張り巡らしていますから、異変をいち早く検知し、実験と検証によってリカバリーも
リアルタイムでおこないます。

購読するメリット

スモール・ビジネスを中心とした、サイトオーナーやウェブマスターの方は、毎日、SEO情報を探し回るヒマはありません。

さらに、あれこれつまみ食いしても、迷うばかりで、軸も定まらず、ぶれっぱなしとなります。

「何をやればいいの?」「どれが正しいの?」。泣き言が出たらお終いです。

今、一番必要な、オリジナルの情報をお届けします。

まぐまぐ 登録・解除

2003年8月創刊、2005-08-08 まぐまぐの殿堂入り!

まぐまぐ殿堂入り

SEOでアクセスアップSEMでオーダーアップSEO塾

下記から登録を、どうぞ。

SEOアクセスアップSEMオーダーアップSEO塾

SEOでアクセスアップSEMでオーダーアップSEO塾

メディアクエリ 2023年最新版

gridレイアウトとflexboxコンテンツでは、ほとんどそのままでレスポンシブになります

このページでも、gridレイアウトを採用しています
さらに上のセクションもこのセクションも、flexboxコンテンツです

デバイス別のレイアウトを変更するメディアクエリ

まず、モバイルファーストは、CSSの書き方からスタートです
そもそも、メディアクエリは当然ながら、レスポンシブやらブレイクポイントなどは、CSSでまかない、それに応じてHTMLを記述します
ところで、モバイルファーストは、スマートフォンの縦画面ファーストということ
さらに、モバイルファーストですから、スマートフォンの横画面、そしてタブレットの縦画面です
最後にデスクトップ画面、つまりパソコンのモニター画面ですね

メディアクエリ・ブレイクポイントは

2023年最新版、というよりもこのサイトで採用しているプレイクポイントは、
(1)スマートフォン縦画面:599px以下
(2)スマートフォン横画面・タブレット縦画面:600pxから960px
(3)タブレット横画面・デスクトップ画面:961px以上

メディアクエリ2023年最新版

gridレイアウトは、自由自在

このコンテンツ箇所では、パソコンのモニター画面で左と右の画像が、タブレット縦画面やスマートフォン横画面で画像が横並びに、そしてスマートフォン縦画面では縦並びに

このように、gridレイアウトでは、非常に簡単にレスポンシブでレイアウトを変更できます

もちろんレスポンシブで有っても無くても、レイアウトそのものが自由自在になりますね
ここのコンテンツのHTMLソースは、このテキストが最初、「gridレイアウト」のテキスト画像が次、「flexboxコンテンツ」のテキスト画像が一番下
それが、左画像・中テキスト・右画像、左画像と右画像が横並びで下にテキスト、左画像が上・右画像が下・テキストはその下

画像は回転できても元の画像の幅と高さは変わらない

ところで、画像を90度 右や左に回転させることは簡単にCSSで可能です
しかし、回転は回転で、もと画像の幅と高さは変わらないので、回転したあとのCSS設定は無理です
そこで、このコンテンツ箇所ではインチキですが、画像を2パターン用意して、背景で読み込む裏技を使っています

画像背景を縦横2パターン用意

そこで、モバイルファーストのメディアクエリで、背景画像のところを設定
次にタブレット中心 スマートフォン横画面のブレイクポイント
最後にデスクトップのブレイクポイント

こうして、あらかじめデバイスの画面の向きを想定して、そのようなメディアクエリを設定すれば、というよりもそのように設定しやすいのが、gridレイアウトとflexboxコンテンツですね
ちなみに、ここではgridコンテンツということになりました

gridレイアウトの威力!

最後に、ここの実験ページ群は、サイドバーの有る無しで1カラム・2カラム・3カラムのレイアウトとなりますが、サイドバーのHTMLソースがあればその配置をCSSのgrid設定で簡単に組み込むことができます
デスクトップやタブレット横画面で左右を見ると、サイドバーが左や右や両方や、表示されます
もちろん、スマートフォンの縦画面・横画面、タブレットの縦画面では、ほとんど違いは分かりません
パソコンではChromeやFirefoxのデベロッパーツールで確認してください

flexboxコンテンツの魅力!

蛇足ですが、このページではコンテンツ箇所だけでなく、ヘッダー箇所、メニュー箇所、フッター箇所もflexbox製です
また、コンテンツ箇所やサイドバー箇所の上のサムネイルと見出し説明の「ページ インフォ カード」も、もちろんflexbox製です
flexboxの魅力は、gridレイアウトと同じように、レスポンシブでの表示変化、大画面では横並びで小画面では縦並び、また左右や上下の配置も簡単にできるところですね

この下の、シェアボタンもレスポンシブではないですが、flexboxで並べています
なぜflexboxなのかというと、単なる横並びでもgapでアイテムの隙間が設定できるところです
アイテムのサイズ統一も簡単です
flexboxは魅力たっぷりです

アバター

author-primary による

Algorism Inc. 株式会社アルゴリズム 代表取締役。SEO塾運営。このサイトは2023年新発売のWordPressテーマのショーケース