投稿日：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;
}

　 Tweet
Qiitaで続きを読む

投稿日：2020-08-09T14:13:14+09:00

【初心者でもわかる】要素の順番をPCとスマホで変える方法（レスポンシブ）

どうも7noteです。レスポンシブサイトを作る時、PCとスマホで要素の順番を入れ替える方法。

レスポンシブサイトを作る時、PCとスマホで要素の順番を変えたい時のCSSの書き方について記述していきます。
flexbox（フレックスボックス）を使って、順番を変更する方法です。

PCデザイン

スマホデザイン

コーディング例
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;を使うことで、並び順を逆順に変えることができます。

「１・２・３・４・５」と要素があれば、flex-flow: row-reverse;を指定することで
「5・4・3・2・1」という順番になります。

これでスマホとPCで要素の順番を変えることで、それぞれのデザインに合わせたCSSを書くことができます。

まとめ

flex-flowを使うには、必ずdisplay: flex;を指定してください。
レスポンシブサイトへの対応は必要な場面が多くあるので、覚えておきたい技術です。

おそまつ！

（コメント・質問・ソースの指摘等なんでもウェルカムです！初心者の方でも気軽に質問ください！）

　 Tweet
Qiitaで続きを読む

投稿日：2020-08-09T08:33:18+09:00

なぜかCSSがあたらないってとき

自分用メモみたいな感じですが

どう考えてもちゃんと書いてるのになぜか反映されず、キャッシュクリアしても chrome の検証にもそもそも出てこないってときは、一番基本に立ち返ってよーくコードを見ます。
タイプミスもしくは余計な文字が入っていることでしょう（}が一個多いとか）。

　 Tweet
Qiitaで続きを読む

投稿日：2020-08-09T00:45:21+09:00

<a>タグのクリックできる範囲

<a>タグはインライン要素なので、中身のテキストの部分しか大きさを持ちません。
その結果、<a>タグをクリックできる範囲はテキストの部分だけになってしまいます。
<a>タグをブロック要素にすると、大きさが親要素いっぱいに広がるので、全体をクリックできるようになります。
style.css
.header-right a {
  display: block;
}

　 Tweet
Qiitaで続きを読む

投稿日：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>

　 Tweet
Qiitaで続きを読む

投稿日：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.css
a.btn {
  display: inline-block;
}

	ブロック要素（`<div>`タグなど）	インラインブロック要素	インライン要素（`<a>`タグなど）
width, height	指定できる	指定できる	指定できない
margin, padding	指定できる	指定できる	左右のみ指定できる
配置	縦並び	横並び	横並び

　 Tweet
Qiitaで続きを読む

投稿日：2020-08-09T00:08:51+09:00

文字の感覚を調整する

文字の間隔を調整する

letter-spacingプロパティを用いることで文字の間隔を指定することができます。
style.css
.letter-space{
 letter-spacing: 2px;
}

　 Tweet
Qiitaで続きを読む

投稿日：2020-08-09T00:08:51+09:00

文字の間隔を調整する

文字の間隔を調整する

letter-spacingプロパティを用いることで文字の間隔を指定することができます。
style.css
.letter-space{
 letter-spacing: 2px;
}

　 Tweet
Qiitaで続きを読む

投稿日：2020-08-09T00:07:53+09:00

要素を透過させる

要素を透過させる

opacityプロパティを使えば要素を透明にできます。
透明度は0.0(完全に透明) ~ 1.0(完全に不透明)の数値で指定します。
style.css
header {
  opacity: 0.9;
}

　 Tweet
Qiitaで続きを読む

投稿日：2020-08-09T00:05:04+09:00

要素を中央に配置する

中央に寄せるためにはmarginの左右にautoを指定する。
marginにautoを指定するときは必ずwidthも併せて指定しましょう。
なお、上下のmarginにautoは指定できません。
style.css
.box {
 width: 300px;
 margin: 0 auto;
}

　 Tweet
Qiitaで続きを読む

投稿日：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>

　 Tweet
Qiitaで続きを読む

20200809のHTMLに関する記事は11件です。

レスポンシブデザイン入門

レスポンシブデザインとは

メディアクエリの利用

メディアクエリ（Media Queries）とは

利用方法

viewportの設定

記述方法

レイアウト崩れの回避

`box-sizing: border-box;`

【初心者でもわかる】要素の順番をPCとスマホで変える方法（レスポンシブ）

どうも7noteです。レスポンシブサイトを作る時、PCとスマホで要素の順番を入れ替える方法。

コーディング例

解説

まとめ

おそまつ！

なぜかCSSがあたらないってとき

<a>タグのクリックできる範囲

Font Awesomeの利用方法

利用方法

displayプロパティの利用方法

インラインブロック

`display`

文字の感覚を調整する

文字の間隔を調整する

文字の間隔を調整する

文字の間隔を調整する

要素を透過させる

要素を透過させる

要素を中央に配置する

ヘッダとフッターの実装

日付別

タグ一覧