コーディングするサイト
デザインファイル
デザインXDファイルダウンロードファイル構成
[作業フォルダ]
└─ assets
├─ css
│ └─ style.css
└─ image
└─ (画像いろいろ)
コーディング仕様
- コンテンツ幅
- コンテンツの横幅: 960px
メインビジュアルだけ横幅いっぱい - メインビジュアル
- 高さは600px固定
- About
- 画像をCSSで丸く切り抜きます。
画像とテキストを横並びの中央寄せで配置します。 - Bicycle
- 画像を両端ぞろえの横ならびに配置します。
VSCode立ち上げ
VSCodeを立ち上げ、[フォルダーを開く]ボタンから、作業フォルダを指定して開きます。
（※ボタンが出てこなかった場合は上部メニューから[ファイル]→[フォルダーを開く]を選択）
[信頼しますか？]のメッセージが出てきたら[はい、作成者を信頼します。]をクリックします。
▼
▼
index.htmlを作成してHTMLの基本テンプレートを書く
[ファイル]→[新しいファイル]→ファイル名に【index.html】を入力して、作業フォルダ直下に保存します。
VSCodeではHTMLファイル上で"html:5"と入力してエンターすると、HTMLの基本テンプレートが自動で書き出されます。
▼
▼
▼
Live Serverを起動してブラウザでプレビューできるようにする
VSCode右下にある[Go Live]をクリックして、Live Serverを起動します。
起動完了すると[Go Live]が[Port:5500]に変わり、同時にブラウザが開きます。
▼
CSSファイルを配置する
assets/css/style.cssを作成し（※今回は既に作ってあります）、index.htmlから読み込みます。
ファイル構成
[作業フォルダ]
├─ index.html
└─ assets
├─ css
│ └─ style.css
└─ image
└─ (画像いろいろ)
【HTML】HTMLファイルでCSSファイルを読み込む方法
headタグ内にlinkタグを記述します。
基本タグスタイルをリセットする【ress】を読み込む
タグの初期設定として決まっているマージンやpaddingをリセットするために、ressを読み込みます。
先に読み込んだassets/css/style.cssより前に記述します。
作成の全体の流れを考える
- 【HTML】全体のレイアウトを決める【レイアウトタグ】を書く（同時にidも指定する）
- 【HTML】1で作ったレイアウトタグの中身（タグとコンテンツ）を書く
- 【HTML】各枠内でクラス指定が必要な箇所にクラスを書く（今回はなしでもできます。）
- 【CSS】デフォルトのフォント種類、色、サイズなどをCSSのhtml属性に書く（今回は既に書いてあります。）
- 【CSS】各枠ごとに、上から順にCSSスタイルを当てていく
全体のレイアウトを決める
HTMLヒント
- header
- ロゴとグローバルナビをheaderタグで囲みます。
- main
- コンテンツのメインエリア全体をmainタグで囲みます。
- メインビジュアル
- メインビジュアルのエリアをdivタグで囲みます。
- Aboutセクション
- Aboutコンテンツのエリアをsectionタグで囲みます。
- Bicycleセクション
- Bicycleコンテンツのエリアをsectionタグで囲みます。
- footer
- コンテンツ下のフッター部分をfooterタグで囲みます。
CSSヒント
- header
- 横幅を960pxで固定し、中央配置にします。
- メインビジュアル
- width:100%で横幅いっぱいにします。
- aboutセクション、bicycleセクション
- header同様に横幅960pxで固定し、中央配置にします。
【CSS】ブロック要素の幅を決める方法
ブロック要素の幅はwidthで決めることができます。
headerパーツの作成
HTMLヒント
ロゴ画像をh1タグ、グローバルナビをnavタグとul,liタグで囲います。
各メニューはクリックできるようaタグで囲います。
CSSヒント
- header
- ロゴとグローバルナビをflexの両端揃えで横ならびに配置します。上下は中央揃えにします。
- ロゴ
- 横幅と上下余白をデザイン通りに指定します。
- グローバルナビ
- navタグで囲んだ中に、ul、liタグを使用してCSSのflexで横並びに配置します。
【CSS】コンテンツを横並びにする方法
display: flexを親要素に指定することで、直下のコンテンツを横並びにできます。
また合わせて下記記述で上下左右の配置、コンテンツ間の余白を指定できます。
flexについての詳細はこちら
【CSS】余白を設定する
ブロック要素の内側に余白を取るにはpaddingを使います。
メインビジュアルの作成
HTMLヒント
divタグ内に画像を配置します。
CSSヒント
divタグの高さは600pxに指定し、画像はobject-fit:coverで余白無しいっぱいに表示します。
【CSS】画像を領域いっぱいに余白なく表示する方法
画像にobject-fit: cover;を指定することで、領域いっぱいに余白なく表示できます。
単にwidth:100%, height: 100%を指定しただけでは画像が伸びてしまいますが、object-fit:coverを入れることで比率を保ったままになります。（ただし比率を保つことが優先されるので上下は見切れます）
object-fitについてもっと詳しく知りたい方はこちら:https://webdesign-trends.net/entry/8148
Aboutセクションの作成
HTMLヒント
Aboutエリア全体をsectionタグで囲み、見出しはh2で囲みます。
プロフィールエリアはプロフィール画像とテキストを画像エリアとテキストエリアで分け、それぞれdivで囲み全体はsectionで囲みます。
プロフィール内の名前はh3で囲みます。
CSSヒント
h2タグは中央揃えにして、下部にボーダーを引きます。
プロフィール画像エリアとテキストエリアを囲うdivをflexで横並び、中央揃えで配置します。
【CSS】ブロック要素の幅をコンテンツに合わせる方法
ブロック要素の幅をコンテンツ幅に合わせるにはwidth:fit-contentを使います。
【CSS】ボーダーラインを引く方法
borderプロパティで上下左右に線が引けます。
borderについてもっと詳しく知りたい方はこちら:https://zero-plus.io/media/css-border/
【CSS】画像を丸にくり抜く方法
画像に幅と高さを指定したうえでborder-radius: 50%;を指定すると円でくり抜けます。%値を変えることで角丸にもできます。
border-radiusについてもっと詳しく知りたい方はこちら:https://zero-plus.io/media/border-radius/
Bicycleセクションの作成
HTMLヒント
bicycleエリア全体をセクションで囲み、各画像は上記のようにul､liタグで囲みます。
CSSヒント
画像部分のul,liはflexで横並び、中央揃えにします。横並び間の余白は左右のmarginで指定します。
【CSS】ブロック要素内テキストを中央揃えにする方法
text-alignで寄せ方向を指定できます。
text-alignについてもっと詳しく知りたい方はこちら:https://www.itra.co.jp/webmedia/text-align.html
footerの作成
HTMLヒント
フッター全体をfooterタグで囲みます。コピーライトをpタグで記述します。
CSSヒント
コピーライトはtext-alignプロパティで中央配置します。
【HTML】©マークの記述方法
©マークなど特殊記号は決まった書き方があります。
いろいろな特殊記号の書き方ははこちら:https://gray-code.com/html_css/list-of-symbols-and-special-characters/