見出し画像

【超有料級】元プロ講師が教える🔥Webページの作り方講座｜第6回【レスポンシブデザイン】

【無職クリエイター】アリキタ

⭐経歴＆実績⭐
・小中学生プログラミング教室の校責任者として、200名以上に個別授業
・中高大生プログラミング教室の校責任者として、100名以上に集団授業
・教育企業の管理職向けDX研修担当者として、50名以上に集団研修
・教育業界の現状を変えるため退職、無職クリエイター活動開始🤞


皆さん、こんにちは！
「元プロ講師が教える🔥Webページの作り方講座」、前回に続き第6回は、【レスポンシブデザイン】の解説です！

👇 本記事は、配信動画を見ながら進めると、よりスムーズに理解できます👇



今回の目標


前回の復習

  • 擬似クラス
    特定の状態や順番に飾り付けるため、セレクタに付加するキーワード

  • 擬似要素
    特定の部分に飾り付けるため、セレクタに付加するキーワード

  • CSSアニメーション
    要素をアニメーションさせるCSSの機能

  • フレックスボックス（Flexible Box Layout Module）
    要素を横並びに配置する時に使用するCSSのレイアウト手法
    横幅や高さを柔軟にコントロール可能で、細かい箇所は自動調整
    フレックスコンテナ：フレックスボックスのレイアウトを適用する親要素
    フレックスアイテム：フレックスコンテナ内の各要素


レスポンシブデザイン

Webコンテンツを様々な画面サイズに対応できるように設計する手法、パソコンやスマホなど異なるデバイスでWebコンテンツを最適に表示できます。

@media（メディアクエリ）
出力デバイスの画面サイズが、条件（ブレイクポイント：レイアウトを切り替えるポイント）を満たす場合のみスタイルを適用できます。
小さい→大きい順：モバイルファースト
大きい→小さい順：デスクトップファースト
スマホのみのユーザーが過半数を超える現在では、デスクトップファーストで指定すると、読み込みに時間がかかり表示が遅くなってしまいます。

スマホ縦　 メディアクエリの指定なし
スマホ横　 @media screen and (min-width: 480px)
タブレット @media screen and (min-width: 768px) and (max-width: 1024px)
パソコン　 @media screen and (min-width: 1025px)

/* スマホ縦：メディアクエリの指定なし */



/* スマホ横：画面向けメディア、かつ、横幅が480px以上のデバイス */
@media screen and (min-width: 480px) {
    
}


/* タブレット：画面向けメディア、かつ、横幅が768px以上、かつ、1024px以下のデバイス */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    
}


/* パソコン：画面向けメディア、かつ、横幅が1025px以上のデバイス */
@media screen and (min-width: 1025px) {
    
}


検証

Chrome「検証」ツールでは、Webページのコードや様々な画面サイズ表示を確認できます。
この機能を使用すると、世の中にあるWebページがどんなコードで実現されているのか、一目で確認できます。
display: flex;「Open flexbox editor」マークをクリックすると、様々なレイアウトを確認できます。

<meta name="viewport" content="width=device-width, initial-scale=1.0">
ビューポートの横幅を端末画面に合わせて初期倍率を1.0に設定、メディアクエリの不具合を防ぎます。

.flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;/* 修正 */
    align-items: center;
}
.section__tag {
    position: absolute;
    top: 1.5rem;/* 修正 */
    right: 0;
    left: 0;/* 修正 */
    z-index: -1;
    margin: 0 auto;/* 修正 */
    color: rgba(var(--main-color-rgb), 0.1);
    font-weight: var(--font-weight-bold);
    font-size: 5rem;/* 修正 */
    font-family: var(--font-set-en-tag);
}
.header {
    position: fixed;
    top: 0;
    z-index: 10;
    width: 100%;
    padding: 5px 50px;/* 修正 */
}
.nav__item {
    position: relative;
    margin: 10px;/* 修正 */
    list-style: none;
}
.nav__link:hover {
    border-bottom: 3px solid var(--main-color);/* 修正 */
    background-image: repeating-linear-gradient(-45deg, rgba(var(--main-color-rgb), 0.1), rgba(var(--main-color-rgb), 0.1) 5px, transparent 5px, transparent 10px);
}
.concept {
    display: flex;
    flex-wrap: wrap;/* 修正 */
    justify-content: center;/* 修正 */
    align-items: center;
}
.concept__img {
    overflow: hidden;
    width: 100%;/* 修正 */
    height: 270px;
    margin-bottom: 30px;/* 修正 */
    border-radius: 30px;
    object-fit: cover;
}
.story__inner {
    display: flex;
    flex-direction: column;/* 修正 */
    flex-wrap: wrap;/* 修正 */
    justify-content: center;/* 修正 */
    align-items: center;
    margin-bottom: 60px;/* 修正 */
}
.story__inner:last-of-type {
    margin-bottom: 0;/* 修正 */
}
.story__title {
    margin-bottom: 30px;/* 修正 */
    font-size: 2rem;
    font-family: var(--font-set-en);
}
.story__text {
    width: 80%;/* 修正 */
    margin-bottom: 30px;/* 修正 */
    font-size: 1.2rem;
}
.story__img {
    overflow: hidden;
    width: 100%;/* 修正 */
    height: 270px;
    border-radius: 30px;
    object-fit: cover;
}
.about {
    max-width: 90%;/* 修正 */
    margin: 0 auto 100px;
}
.about__item {
    width: 60%;
    padding: 48px 10px;/* 修正 */
    border-bottom: solid 1px var(--main-color);
}
.about__text {
    width: 40%;
    padding: 48px 5px;/* 修正 */
    border-bottom: solid 1px var(--main-color);
    font-weight: var(--font-weight-bold);
}


/* スマホ横：画面向けメディア、かつ、横幅が480px以上のデバイス */
@media screen and (min-width: 480px) {
    .flex {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }
    .section__tag {
        position: absolute;
        top: 0;
        right: 0;
        left: unset;/* 修正 */
        z-index: -1;
        margin: 0;/* 修正 */
        color: rgba(var(--main-color-rgb), 0.1);
        font-weight: var(--font-weight-bold);
        font-size: 6rem;
        font-family: var(--font-set-en-tag);
    }
    .header {
        position: fixed;/* 要素をレイアウトから除外、ビューポートに対して相対配置 */
        top: 0;/* 上辺からの距離を0に設定 */
        z-index: 10;
        width: 100%;/* 親要素に対して100%に設定 */
        padding: 25px 50px;
    }
    .nav__item {
        position: relative;
        margin: 0 0 0 40px;/* 修正 */
        border-bottom: 3px solid var(--main-color);
        list-style: none;
    }
    .nav__link:hover {
        padding: 0 1rem;
        background-image: repeating-linear-gradient(-45deg, rgba(var(--main-color-rgb), 0.1), rgba(var(--main-color-rgb), 0.1) 5px, transparent 5px, transparent 10px);
    }
    .concept {
        display: flex;
        flex-wrap: nowrap;/* 修正 */
        justify-content: normal;/* 修正 */
        align-items: center;
        column-gap: 40px;
    }
    .concept__img {
        overflow: hidden;
        width: 50%;
        height: 270px;
        margin-bottom: 0;/* 修正 */
        border-radius: 30px;
        object-fit: cover;
    }
    .story__inner {
        display: flex;
        flex-direction: row;/* 修正 */
        flex-wrap: nowrap;/* 修正 */
        justify-content: normal;/* 修正 */
        align-items: center;
        margin-bottom: 0;/* 修正 */
        margin-left: 40px;
        column-gap: 40px;
    }
    .story__inner:nth-child(2n) {
        flex-direction: row-reverse;
        margin-right: 40px;
        margin-left: 0;
    }
    .story__title {
        margin-bottom: 0;/* 修正 */
        font-size: 2rem;
        font-family: var(--font-set-en);
    }
    .story__text {
        width: 60%;
        margin-bottom: 0;/* 修正 */
        font-size: 1.2rem;
    }
    .story__img {
        overflow: hidden;
        width: 40%;
        height: 270px;
        border-radius: 30px;
        object-fit: cover;
    }
    .about {
        max-width: 50%;
        margin: 0 auto 100px;
    }
    .about__item {
        width: 60%;
        padding: 48px 0;
        border-bottom: solid 1px var(--main-color);
    }
    .about__text {
        width: 40%;
        padding: 48px 0;
        border-bottom: solid 1px var(--main-color);
        font-weight: var(--font-weight-bold);
    }
}


/* タブレット：画面向けメディア、かつ、横幅が768px以上、かつ、1024px以下のデバイス */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    
}


/* パソコン：画面向けメディア、かつ、横幅が1025px以上のデバイス */
@media screen and (min-width: 1025px) {
    
}


スクリプトの作成（簡易プログラム）

addMetaTag('viewport', 'width=device-width, initial-scale=1');
HtmlOutputオブジェクトにメタタグを追加します。
Apps ScriptのHTMLファイルに直接含まれているメタタグは無視されます。

コード.gsに以下をコピペしましょう！

function doGet() {
  const htmlOutput = HtmlService.createTemplateFromFile("index").evaluate();
  htmlOutput.addMetaTag('viewport', 'width=device-width, initial-scale=1');
  return htmlOutput;
}


デプロイ（Webページの公開）

「デプロイ」＞「新しいデプロイ」＞「種類の選択：ウェブアプリ」＞「アクセスできるユーザー：全員」＞「URL」をコピーしましょう！


まとめ

  • レスポンシブデザイン
    Webコンテンツを様々な画面サイズに対応できるように設計する手法
    パソコンやスマホなど異なるデバイスでWebコンテンツを最適に表示

  • @media（メディアクエリ）
    出力デバイスの画面サイズが、条件を満たす場合のみスタイルを適用

  • 検証
    Webページのコードや様々な画面サイズ表示を確認できるChromeの機能

今回は、【レスポンシブデザイン】を解説しました。
これからも、インプットとアウトプットを繰り返して、一緒にレベルアップしていきましょう！

少しでも良かったなと思った方は、チャンネル登録よろしくお願いします！
第7回は【JavaScriptの基礎】を配信します。それでは、また次回〜！🖐️

この記事が気に入ったらサポートをしてみませんか？