新規のWeb制作やリニューアル Webサイトの種類 大きく分けると「データベース」が必要な場合とそれ以外 コーポレートサイト プロモーションサイト・LP ブランディングサイト サービスサイト ECサイト 採用・リクルートサイト メディアサイト 課題として制作…
課題サイトまとめ（３） 完成例 Photoshop / Illustrator 記述例 psai.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Photoshop / Illustrator | 課題サイト</title> <link rel="stylesheet" href="css/style.css"> </link></meta></meta></head></html>
課題サイトまとめ（２） 完成例 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>
課題サイトまとめ（１） 完成例 メイン画像または背景色 画像は、適宜選択 PCサイズ（幅「100％」高さ「400px」） モバイルサイズ（幅「100％」高さ「240px」） トップページ記述例 ドロワーメニューの背景色は適宜変更する index.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>課題サイト</title> </meta></meta></head></html>
ドロワーメニュー JavaScriptでイベント作成（jQueryを利用しない場合） ドロワーメニューの考え方 PCサイズで横並びのナビゲーションメニュー スマートフォンサイズでは、初期では「ハンバーガーメニュー」が見えていて、ナビゲーションメニューは非表示に…
フォルダー構成 ディレクトリー制作ルール フォルダー構成は、目的・制作内容によって異なります 上位表示が目的の場合 複数人で引き継ぐ場合 効率よく管理する場合 それまで作っていた構成を活かしたまま管理したい（今回はこのケースです） 上位表示が目的…
Ascii Tree Generator フォルダーのツリー構造をテキストで作成する Ascii Tree Generator VS Code拡張機能 見本テキスト 以下のテキストをフォーマットとして覚えさせる . └── Modules ├── Module A │ └── SubModuleA ├── Module B │ └── SubModuleB ├── Mo…
テキストナビゲーション 中心から外に線が伸びる（下部） 記述例 index.html <nav class="gnav"> <ul> <li><a href="#" class="current">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Service</a></li> <li><a href="#">Contact</a></li> </ul> </nav> style.css @charset "UTF-8"; /* ------------------------------------ reset ---…
Transform［トランスフォームアニメーション］ 要素に移動(translate)、拡大縮小(scale)、回転(rotate)、傾斜(skew)などの変形(transform)を適応させるCSSプロパティです transformプロパティの値に指定できる関数 関数名 読み方 実行効果 translate トラン…
Transition［トランジションアニメーション］ transitionを使えば、ある状態から別の状態へ滑らかに変化させることができます transition と animation の違い animation は、連続したアニメーションを作成するためのもの @keyframesで、変化していく形状な…
ハンバーガーメニュー（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>
属性セレクター (attribute selector) ある種類の属性のある要素を対象に指定できます developer.mozilla.org <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>属性セレクター</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } .sample …</meta></meta></head></html>
課題サイトロゴ作成 見本例の場合 書体を選択 pm85122.onamae.jp Illustratorで作成 文字をアウトライン 「書式」メニュー → 「アウトラインを作成」 アートボードの変更 「オブジェクト」メニュー → 「アートボード」 → 「選択オブジェクトにあわせる」 別…
Font Awesome 記号を「文字（Font）」で利用する この例は「ハンバーガーメニュー」のアニメーションが不要な場合 fontawesome.comGoogle icon 「Font Awesome 」以外の選択肢 fonts.google.com ハンバーガーメニューを作成する場合（文字を置換する場合） …
課題サイトサンプル 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) { /* ここ…
レスポンシブWebデザインの誕生 Responsive Web Design は、2010年イーサン・マルコッテ氏が提唱した制作手法です alistapart.com レスポンシブWebデザイン レスポンシブWebデザインとは、ブラウザーのウィンドウ幅に合わせてCSSでWebページのレイアウトを変…
