メディアクエリを使いこなそう

まずはじめに大事なこと・・・ メディアクエリは難しくない!

これを念頭に置いて、基本からやっていくこと。

以前の記事でもサンプルを作って公開していますが、

大きいサイトを作る時には、ソースが多くなって、悪戦苦闘してしまう・・・

という人にも、まずは基本をしっかり理解して、ひとつひとつコードを書くことで

苦手意識が拭えるということです。

 

まずはテキストだけを対応させる → 背景画像とテキストを対応させる → メニュー配置させる

 

徐々にうまく作れるようになって来てからステップアップする。

ステップアップして来たら、仕上がりのイメージが必要になってくるかも知れません。

そういう場合はPhotoshopやCacooを利用して仕上がりのイメージを作っておくといいですね。

 

まずは文字だけを変化させるページを作成する

HTML

CSS

仕上がったページを新しいタブで開く

 

背景画像とテキストを配置させてシンプルなWebページを作成する

仕上がったページを新しいタブで開く

 

画像が複数枚配置される場合のレスポンシブWebデザインを作成する

仕上がったページを新しいタブで開く

 

解説

3つのステップで製作してみましたが、意外と簡単だと感じた人、難しいと感じた人、それぞれだと思います。

まず1つ目はメディアクエリを使って、それぞれ3種類のデバイスによって変化する文字色を記述しています。

 

 

2つ目は、メディアクエリと呼ばれる方法を使わずに、

背景画像の上にテキストを配置するWebページの作成です。

背景画像には、高さを指定せずに幅と paddhing-top をそれぞれ%で指定する方法でレスポンシブWebデザインにする記述方法です。

 

3つ目も、メディアクエリを使わずに、画像の幅を%で指定して、レスポンシブ対応させる記述方法です。

メイン画像の最高幅を指定して、センター寄せにし、グローバルナビ用の画像が3つの設計なので、3/100=33%という指定をし、それを左寄せにしてレスポンシブ対応させています。

 

 

結論

メディアクリを使いこなすには、結論、レスポンシブWebデザインを使いこなすことである。

メディアクエリとレスポンシブWebデザインは同一のもので、プログラマーから初心者まで、仕組みをきちんと理解すれば、誰でも気軽に使いこなすことができると言えます!

 

参考ページ
https://y-com.info/contents/?p=4309
https://techacademy.jp/magazine/9369#sec2
http://www.taskinteractive.com/tecnical/responsive/

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA