★レスポンシブ実践
課題サイトまとめ（２） 完成例 JavaScript / jQuery 記述例 jsjq.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript / jQuery | 課題サイト</title> <link rel="stylesheet" href="css/style.css"> </link></meta></meta></head></html>
ドロワーメニュー JavaScriptでイベント作成（jQueryを利用しない場合） ドロワーメニューの考え方 PCサイズで横並びのナビゲーションメニュー スマートフォンサイズでは、初期では「ハンバーガーメニュー」が見えていて、ナビゲーションメニューは非表示に…
ハンバーガーメニュー（jQuery） 完成例 スクロールしても「ハンバーガーメニュー」は固定の状態にする 記述例 index.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>【コーディング練習】ハンバーガーメニュー</title> <link rel="stylesheet" href="css/style.css"> </link></meta></meta></head></html>
課題サイトロゴ作成 見本例の場合 書体を選択 pm85122.onamae.jp Illustratorで作成 文字をアウトライン 「書式」メニュー → 「アウトラインを作成」 アートボードの変更 「オブジェクト」メニュー → 「アートボード」 → 「選択オブジェクトにあわせる」 別…
課題サイトサンプル 3ヶ月目の目標
課題13 BLOG テキスト「Part3」の「2カラムレイアウト」を応用 テキスト例 Travel Blog - スペイン編 NEW COLUMN SERIES Q&A CONTACT スペイン観光に欠かせないのがアントニ・ガウディが残した建築物 READ MORE スペイン南部のアンダルシア地方にある「白い…
課題 Recipe Diary unsplash.com ひよこ豆とアボガドのタコス たっぷりのひよこ豆とレンズ豆にアボガドとトマトを添えて、少しライムを絞ったらおいしいタコスのできあがりです。 材料（2人分） ひよこ豆 約400g レンズ豆 約100g アボカド 1個 トルティーヤ …
課題12 IKECODE 完成例 記述ポイント 横並びを縦並びに変更するために、メディアクエリ内で「display: block;」を指定する 文字を読みやすくサイズ変更 画像の並びをスマートフォンに最適化する style.css @charset "UTF-8"; /* ---------------------------…
課題11 Flower Coffee 完成例 記述ポイント 横並びを縦並びに変更するために、メディアクエリ内で「display: block;」を指定する 文字を読みやすくサイズ変更 style.css @charset "UTF-8"; /* -------------------------------- reset ---------------------…
課題10 MyStyle 完成例 記述ポイント 横並びを縦並びに変更するために、メディアクエリ内で「display: block;」を指定する スマートフォンでのナビゲーションは、画面いっぱいに押しやすい状態に広げて設定 文字を読みやすくサイズ変更 style.css @charset "…
課題09 The Web Design 完成例 記述ポイント 横並びを縦並びに変更するために、メディアクエリ内で「display: block;」を指定する style.css @charset "UTF-8"; /* ------------------------------------------ reset -------------------------------------…
課題08 宅配朝食サービス 完成例 記述ポイント スマートフォンでは、「ロゴ」を「ホームボタン」の替わりに設定し、メニューからは削除 ナビゲーションは、押しやすい間隔で配置 ボタン（CTA）を、角丸ではなくスマートフォンの横幅いっぱいにして押しやすく…
課題07 Girly Style 完成例 記述ポイント 文字を読みやすいバランスに変更 style.css @charset "UTF-8"; /* ---------------------------------------- reset ---------------------------------------- */ * { margin: 0; padding: 0; box-sizing: border-b…
課題06 旬の野菜便 完成例 記述ポイント 横並びを縦並びに変更するために、メディアクエリ内で「display: block;」を指定する 文字サイズを読みやすい大きさに変更 画像の幅を100％に変更 ボタン（CTA）を、角丸ではなくスマートフォンの横幅いっぱいにして…
課題05 スペインの魅力 完成例 記述ポイント 横並びを縦並びに変更するために、メディアクエリ内で「display: block;」を指定する lead文の幅と画像の幅を変更 style.css @charset "UTF-8"; /* --------------------------------------- reset -------------…
課題04 NEWS 完成例 記述ポイント 横並びを縦並びに変更するために、メディアクエリ内で「display: block;」を指定する style.css @charset "UTF-8"; /* ------------------------------------------ reset ------------------------------------------ */ *…
課題03 Recipe Diary 完成例 記述ポイント PC用では、brタグを使わずに「white-space: pre-line;」で見たままの改行を表示する メディアクエリを使って、文字の読みやすさを工夫する .copy > p { margin-bottom: 80px; line-height: 1.7; white-space: pre-l…
課題02 ポートフォリオ 完成例 記述ポイント メディアクエリは、不要 「min()」を使うことで、マルチデバイス対応が可能 style.css @charset "UTF-8"; /* ------------------------------------ reset ------------------------------------ */ * { margin: …
レスポンシブ対応の記述とモックアップ作成 ブレイクポイント ブレイクポイントを基準に表示を変化させます すでにPC用の記述がある場合 横幅の最大値767px（767px以下の場合） /* すでにあるPC用の記述 */ @media screen and (max-width: 767px) { /* ここ…
