HTMLを書いてみよう！Part2

k7taros

こんばんは！カナやんです🇪🇸

前回はHTMLの各セクション名の働きと記述していく際のポイントを書いていましたが、今日は実際に書くにあたって何から始めたらいいのかを紹介！


手順みたいな事になるから完全に備忘録でしょう＿笑

下記手順⬇️
VScodeにディレクトリ>index.htmlを作成
　　　　　　　　　　  >CSSディレクトリ>style.css
                                        >imgディレクトリ>001.png  002.png  003.png・・・

／　実装する時はHTMLの欄で「！  tab」（エメット）で初期値が作成したされる
／　headのTitleを変更し、CSSを相対パスにて読み込ませておく「link tab」

✔️   index.html をGoogle Chromeで見たときにタブのタイトルが変更されているか
✔️   開発者モードにしてconsoleタブに何も表示されていないか
CSSや画像などのファイルが読み込めているかを確認するには、検証ツールの「コンソール（Console）」を見てエラーがないか確認すると良い！

コーディングを始める前に、デザインを観察する
・どんなレイアウトになっているか（声に出して書き出してみよう！）
・共通パーツ化できるものはないか（共通のスタイルとなっているパーツはあるか）
・PC / SP 両デザインの違いはどんなところか

HTML → CSS の順番で実装していこう
💡header.class名>div.class名　＋tab で纏まってHTMLが書ける

<header>ポイント
／ログインメニューではクリックするとトップページに戻る動きが一般的
　ログインクラスの中に<h1>>><a><img></h1>でリンクを入れる
／<img>のalt属性はサイト名と同じにする
／リンクボタンにはnavタグ>>リストタグでリンク先<a>を作成
💡リストタグにすることでdisplay:flex やjustifyが適用できるから！

<footer>ポイント
／©マークをウェブページ上に表示させるには©マークの変わりに&copy; 
コピーライト表記は
<p class="footer-copyright"><small>©　2021 TRIANGLE.</small></p>

<main>ポイント〜各セクション
<fv (firstview)>  <section-about>  <section-gallery>
セクションに見出しがある場合は<sectcion>タグを指定！
／画像はimgタグで直接置いておいいがfigure等でbox作るのがおすすめ


<head>に入れ込むgoogle fontのサイト
　・　https://fonts.google.com/
　・　https://googlefonts.github.io/japanese/


それでは次回はCSS編へ！

いいなと思ったら応援しよう！