- 投稿日:2020-08-09T14:34:50+09:00
レスポンシブデザイン入門
レスポンシブデザインとは
レスポンシブデザインとは、様々なデバイスや画面サイズに合わせて、コンテンツのレイアウトを調整するためのものです。
例えば、全体要素の幅を固定したサイトを作成した場合、それより画面幅が狭くなると、コンテンツの一部が隠れてしまいます。
ここにレスポンシブデザインを適用することで、画面のサイズに合わせて最適なレイアウトを組めるようになります。メディアクエリの利用
メディアクエリ(Media Queries)とは
メディアクエリとは、ブラウザの画面サイズに応じてCSSのスタイルを設定できる手法です。
利用方法
viewportの設定
レスポンシブデザインを適用する準備として、
<head>
タグ内にviewport
を設定しましょう。
viewport
を設定しないと、スマートフォンやタブレットでの閲覧時にメディアクエリが正しく機能しません。index.html<head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <head>記述方法
メディアクエリは、
@media (条件) { .... }
という様に記述します。
指定された条件が当てはまるときにのみ{ }
内のCSSが適用されます。style.css@media(max-width: 1000px) { /* 画面幅が1000px以下のときに適用するCSSを記載する */ }メディアクエリの条件には、
max-width
(最大幅)、またはmin-width
(最小幅)を指定できます。
max-width: ◯◯px
と指定すると、画面幅が◯◯px以下の時にCSSを適用できます。min-width
はその反対となります。
max-width: ◯◯px
(またはmin-width: ◯◯px
)のようにメディアクエリの条件を指定するとき、◯◯px
の部分をブレイクポイント
と呼びます。
今回はスマートフォンの画面幅は670px以下、タブレットの画面幅は670px ~ 1000pxと想定して、ブレイクポイントを設定しましょう。style.css/* タブレット */ @media (max-width: 1000px) { h1 { color: blue; } } /* スマホ */ @media (max-width: 670px) { h1 { color: green; } }レイアウト崩れの回避
要素の
width
が25%
などの割合で指定されている場合、左右のpadding
などがあると要素の幅の合計が100%を超えてしまい、レイアウトが崩れてしまうことがあります。
このようなレイアウト崩れは、box-sizing: border-box;
を用いることで防ぐことができます。
box-sizing: border-box;
box-sizing
をborder-box
に指定すると、要素の幅(width
)の合計にpadding
とborder
が含まれるようになります。そのため、padding
やborder
を追加した時に生じるレイアウト崩れを未然に防ぐことができます。
※ただし、margin
はborder-box
での合計値に含まれないので注意
box-sizing: border-box;
を指定するときは、*
(アスタリスク)に対して指定することが推奨されています。
*
はすべての要素に対してCSSを適用したい場合に用います。
border-box
をすべての要素に対して適用することで、レイアウトを管理しやすくなります。style.css* { box-sizing: border-box; }
- 投稿日:2020-08-09T14:13:14+09:00
【初心者でもわかる】要素の順番をPCとスマホで変える方法(レスポンシブ)
どうも7noteです。レスポンシブサイトを作る時、PCとスマホで要素の順番を入れ替える方法。
レスポンシブサイトを作る時、PCとスマホで要素の順番を変えたい時のCSSの書き方について記述していきます。
flexbox(フレックスボックス)を使って、順番を変更する方法です。コーディング例
index.html<h2>■レスポンシブデザインとは</h2> <ul> <li class="reverse"> <div class="text"> <h3>point1</h3> <p>PCとスマホ両方に対応。<br> 1つのHTMLファイルで済む。</p> </div> <img src="point1.jpg" alt="point1"> </li> <li> <div class="text"> <h3>point2</h3> <p>CSSファイルでメディアクエリを使い、 cssを書き分けることができる。</p> </div> <img src="point2.jpg" alt="point2"> </li> </ul>style.css/* 共通CSS(主にスマホ用) */ body { background: #9afeff; /*背景色に青を指定*/ } h2 { font-size: 20px; /*フォントサイズを指定*/ } ul { margin: 0; /*ブラウザのCSSを無効化*/ padding: 0; /*ブラウザのCSSを無効化*/ } ul li .text h3 { font-size: 16px; /*文字サイズを16pxに指定*/ font-weight: bold; /*太文字に指定*/ } ul li .text p { font-size: 14px; /*フォントサイズを14pxに指定*/ } ul li img { width: 100%; /*画像を幅いっぱいにする*/ } /* PC用CSS */ @media screen and (min-width:750px) { h2 { } ul { width: 500px; /*表示するエリアの幅を指定*/ } ul li { display: flex; /*要素を横並びにする*/ } ul .reverse { flex-flow: row-reverse; /*.reverseが付いている要素の順番を逆順に変える*/ } ul li .text { width: 50%; /*テキストの幅を50%に指定*/ padding-right: 10%; /*画像との距離を取るため10%を右側に指定*/ } ul .reverse .text { padding-right: 0; /*右のpaddingを無効化*/ padding-left: 10%; /*画像との距離を取るため10%を左側に指定*/ } ul li img { width: 40%; /*画像の幅を40%に指定*/ } }解説
フレックスボックスの
flex-flow: row-reverse;
を使うことで、並び順を逆順に変えることができます。「1・2・3・4・5」と要素があれば、
flex-flow: row-reverse;
を指定することで
「5・4・3・2・1」という順番になります。これでスマホとPCで要素の順番を変えることで、それぞれのデザインに合わせたCSSを書くことができます。
まとめ
flex-flowを使うには、必ず
display: flex;
を指定してください。
レスポンシブサイトへの対応は必要な場面が多くあるので、覚えておきたい技術です。おそまつ!
(コメント・質問・ソースの指摘等なんでもウェルカムです!初心者の方でも気軽に質問ください!)
- 投稿日:2020-08-09T08:33:18+09:00
なぜかCSSがあたらないってとき
自分用メモみたいな感じですが
どう考えてもちゃんと書いてるのになぜか反映されず、キャッシュクリアしても chrome の検証にもそもそも出てこないってときは、一番基本に立ち返ってよーくコードを見ます。
タイプミスもしくは余計な文字が入っていることでしょう(}
が一個多いとか)。
- 投稿日:2020-08-09T00:45:21+09:00
<a>タグのクリックできる範囲
<a>
タグはインライン要素なので、中身のテキストの部分しか大きさを持ちません。
その結果、<a>
タグをクリックできる範囲はテキストの部分だけになってしまいます。
<a>
タグをブロック要素にすると、大きさが親要素いっぱいに広がるので、全体をクリックできるようになります。style.css.header-right a { display: block; }
- 投稿日:2020-08-09T00:30:53+09:00
Font Awesomeの利用方法
TwitterやFacebookのアイコンを使いたい場合、
Font Awesome
というものを利用できます。
たくさんのアイコンが用意されており、自分の気に入ったアイコンを簡単に使うことが出来ます。
https://fontawesome.com に詳しい使い方やアイコンの一覧が載っています。利用方法
Font Awesomeは、以下の手順で使用することができます。
①Font AwesomeのCSSファイルを読み込むindex.html... <head> ... <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> </head> ...②
<span>
タグにfa
クラスとfa-アイコン名
クラスを指定する
(Font Awesomeのサイトにアイコンごとのクラス名が載っています。)
これだけで簡単にアイコンを表示させることができます。index.html<span class="fa fa-facebook"></span> <span class="fa fa-twitter"></span>
- 投稿日:2020-08-09T00:16:03+09:00
displayプロパティの利用方法
ボタンを
<a>
タグで実装しようと思ったときなど、
<a>
タグはインライン要素なのでwidth
やheight
が指定できないなど不都合がある場合があると思います。
そんな時はdisplay
プロパティでインラインブロック要素に変更することができます。インラインブロック
ブロック要素とインライン要素の特徴を併せ持つ
インラインブロック要素
というものがあります。
インラインブロック要素はインライン要素と同様に横に並びますが、ブロック要素のように幅や高さをもちます。
ブロック要素( <div>
タグなど)インラインブロック要素 インライン要素( <a>
タグなど)width, height 指定できる 指定できる 指定できない margin, padding 指定できる 指定できる 左右のみ指定できる 配置 縦並び 横並び 横並び
display
<a>
タグは初期状態でインライン要素になっていますが、display
プロパティを使うと、インラインブロック要素に変更することができます。
display
プロパティはblock
(ブロック要素),inline-block
(インラインブロック要素),inline
(インライン要素)を指定することができます。style.cssa.btn { display: inline-block; }
- 投稿日:2020-08-09T00:08:51+09:00
文字の感覚を調整する
- 投稿日:2020-08-09T00:08:51+09:00
文字の間隔を調整する
- 投稿日:2020-08-09T00:07:53+09:00
要素を透過させる
- 投稿日:2020-08-09T00:05:04+09:00
要素を中央に配置する
中央に寄せるためには
margin
の左右にauto
を指定する。
margin
にauto
を指定するときは必ずwidth
も併せて指定しましょう。
なお、上下のmargin
にauto
は指定できません。style.css.box { width: 300px; margin: 0 auto; }
- 投稿日:2020-08-09T00:03:03+09:00
ヘッダとフッターの実装
HTML5には
<header>
と<footer>
というタグが用意されているのでヘッダとフッタを実装するときはこのタグを使いましょう?♀️
index.html<div class="header"></div> <div class="contents"></div> <div class="footer"></div>?♀️
index.html<header></header> <div class="contents"></div> <footer></footer>