【web】レスポンシブなサイトを作るテクニック①
今回はCSSでレスポンシブサイトを作るためにはどうすればいいのかを紹介します！
レスポンシブデザインとは？
まずは、web入門者のためにレスポンシブデザインとは何かを説明してきます。
レスポンシブデザインとはウィンドウの大きさに応じてＷｅｂサイトのレイアウトが変化するデザインのことです。
レイアウトの変更は基本的にHTMLはいじらずにCSSもしくはJSのみで変化させます。
近年、スマートフォンが増えてきてスマートフォン用のサイトを作らなければならないという点から出てきた技術です。
ちなみに本ブログもレスポンシブになっています。
PCで見ている方は、ウィンドウサイズを小さくしたり大きくしたりするとわかると思います！
CSSでレスポンシブデザインを作る方法
基本的にはCSSの”メディアクエリ”を使って実装します。
記述方法を見ながら説明します。
/*スマートフォン用デザイン*/ @media screen and (max-width: 767px){ /*ここにcssを記述します*/ } /*タブレット用デザイン*/ @media screen and (min-width: 768px) and (max-width: 1024){ /*ここにcssを記述します*/ } /*パソコン用デザイン*/ @media print, screen and (min-width: 1025px){ /*ここにcssを記述します*/ }
まず、「@media screen」でメディアクエリを使うぜ！って感じです。
「max-width: 767px」とあります。これは”横幅が0~767pxまでの場合ここのcssの記述を使う！”という意味になります。
「min-width: 1024px」の場合では”横幅が1024px以上の場合ここのcssの記述を使う！”という意味になります。
「and」を使うことで「768px~1024pxまで」というように連結させることが出来ます。
横幅に指定する値は何をとればいいのか？
横幅に指定している値（今回は768px, 1024px）はどう決めればいいのか悩みますよね＞＜；
この値をブレークポイントと呼びます。
768pxと1024pxはどんな値なのか？
それはipadのサイズです！
ぶっちゃけ、どのサイズがスマホでどのサイズがPCなのかはなかなか決めにくいところです。
なので結構売れてるipadを参考にしよう！ってまぁそんなところですｗ
今後はどんなサイズの端末が主流になるのか分からないので、あくまでも参考程度って感じです汗
【HTML/CSS】blockとinlineで変わる中央寄せの方法
中央寄せの方法がいまいちピンと来なかったので、メモっときます！
中央寄せの方法
中央寄せについては主に２つあります。
- margin: 0 auto;
- text-align: center;
２つの特徴は？
[ margin: 0 auto; ] ではcssを指定したタグを中央寄せします。
[ text-align: center; ] ではcssを指定した子要素を中央寄せします。
さらに！
[ margin: 0 auto; ] はブロック要素に使えます。
[ text-align: center; ] はインライン要素に使えます。
実際に試してみた！
まずは、[ margin: 0 auto; ] で中央寄せしてみます。
- block要素に適用
親要素
block要素 - inline要素に適用
親要素
inline要素 - inline-block要素に適用
親要素
inline-block要素
ブロック要素だけが中央寄せになっていることが分かります。
※幅が１００％のときは [ margin: 0 auto; ] は使えません
次に [ text-align: center; ] で中央寄せしてみます。
- block要素に適用
親要素
block要素 - inline要素に適用
親要素
inline要素 - inline-block要素に適用
親要素
inline-block要素
インライン要素とインラインブロック要素が中央寄せになっていることが分かります。
【WEB】Jqueryでアコーディオンを作ってみた
アコーディオンとはあれですね。
メニュー表示する際に「にょ～」って出てくるあれ！
サンプルは【凡才エンジニアの成果物】に貼っておきますね！
実装は、HTML , CSS , JavaScript を使います。
書かなくてもいいレベルで普通
全体の流れとしては、
非表示 ∧ 重ねているメニューを下にスライドさせながら表示させる！
だけです。
HTML
[ dl ] , [ dt ] , [ dd ] で実装しました。
これじゃなくて [ ul ] とかでもいいと思いますが、デフォで表示させる部分(今回は「メニュー」)の識別が面倒なのでこちらをおススメします。
最低限必要なものは [ position : absolute ] と [ display : none ] です。
つまり隠す処理ですね。
[ dt ] タグがクリックされたら、[ dd ] タグをスライドさせながら表示して∧ [ position ] を直していきます。
