
【HTML/CSS コーディング練習】中級編:コーポレートサイト/固定サイドメニュー
目次
- コーディング練習課題
- コーディングをはじめよう!
- ①「模写コーディング」に挑戦する
- デモサイト
- コーディングのヒント(レイアウト構成)
- コーディング例(ソースコード)
- 参考(模写コーディングの手順)
- ②「デザインカンプからのコーディング」に挑戦する
- デザインカンプ
- コーディングのヒント(レイアウト構成)
- コーディング例(ソースコード、デモサイト)
- ①「模写コーディング」に挑戦する
コーディング練習課題
- 課題内容
- 近所のハウスメーカーからコーポレートサイトのリニューアル依頼がきました。
まずはトップページのコーディングを行います。 - 設定単価
- コーディング(トップページのみ):7万円
- 素材
-
学習用の素材をダウンロードする
※素材の中で使用している画像は当サイトのものではない為、グレー画像に置き換えています - デザインイメージ
- コーディング仕様
-
- フォント
- Google Fonts の「Noto Sans JP」を使用します。
- コンテンツ幅
- 固定サイドメニューは300pxでメインコンテンツの最大幅は900px、横のパディングは20pxです。
- サイドメニュー
- 300pxで固定します。レスポンシブ時も横幅を伸縮させません。スマホ時はハンバーガーメニューに切り替えます。
- 動画
- 全幅で背景に固定します。
- 建築事例をご紹介
-
背景は徐々に暗くなるようグラデーションの透過を設定します。
画像の白枠線はCSSで設定し、画像内のテキストの下に影をつけます。画像全体をリンクにします。 - 明るいHOUSEの特徴
-
背景は透過にします。
3つの円はリンクにして、ホバー時は左から右にスライドするよう背景色を変更します。(※詳細はデモ参照) - 家ができるまでの流れ
- フロー図はCSSで作ります。(※実務では画像を使用することが多いですが、今回は練習なのでCSSで作ってみましょう!)
- お問い合わせ
- 3つのボックスにリンクを設定し、ホバー時は枠線を太く(3px)します。枠線を太くした際にレイアウトがずれないよう注意しましょう。
- トップへ戻るボタン
- スクロール位置が700pxを超えた時点で右下に表示します。クリックすると最上部へ戻ります。
- レスポンシブ
-
ブレークポイントは960pxです。
スマホの場合はヘッダーを上部に固定します。
コーディングをはじめよう!
コーディング練習は、下記の2つからお選びいただけます。
- ①模写コーディング:デモサイトを見ながら同じサイトを作る
- ②デザインカンプからのコーディング:デザインデータをもとにサイトを作る
①「模写コーディング」に挑戦する
デモサイトをもとに、模写コーディングに挑戦してみましょう!
デモサイト
コーディングのヒント(レイアウト構成)
コーディングで悩んだ場合は、下記のレイアウト構成の組み立て方を参考にしてみてください。
サイト全体と各パーツのレイアウト構成について解説しています。
コーディング例(ソースコード)
コーディングが完了したら、下記の「ソースコード」を参考に、自分の作ったコードとサイトをチェックしてみてください。
コーディングの1例です。コーディングの仕方は1パターンだけではないので、あくまでも参考として自分のソースコードと比較しながらチェックしてみてください。
参考(模写コーディングの手順)
模写コーディングのやり方に迷った方は、こちらの模写コーディングの手順を参考にしてみてください。
②「デザインカンプからのコーディング」に挑戦する
デザインカンプからのコーディングに挑戦してみましょう!
Adobe XD デザインカンプ
・WEB版
・ダウンロード版
※ダウンロード版のファイルを開くには、Adobe XDのインストールが必要です。
※画像はグレー画像に置き換えています。
コーディングのヒント(レイアウト構成)
コーディングで悩んだ場合は、下記のレイアウト構成の組み立て方を参考にしてみてください。
サイト全体と各パーツのレイアウト構成について解説しています。
コーディング例(ソースコード、デモサイト)
コーディングが完了したら、下記の「ソースコード」と「デモサイト」を参考に、自分の作ったコードとサイトをチェックしてみてください。
ソースコード
コーディングの1例です。コーディングの仕方は1パターンだけではないので、あくまでも参考として自分のソースコードと比較しながらチェックしてみてください。
デモサイト
デモサイトと自分で作成したサイトを比較して、デザインや動きなどをチェックしてみてください。