HTML
note
このページの日本語版はGoogle翻訳による機械翻訳です。
AGLではHTMLを直接コーディングするのではなく、EJSテンプレートを使用します。
このアプローチにより、より迅速なコーディングと柔軟なHTMLファイルのリンクが可能となります。
会社側はタスクを開始する際にテンプレートを提供します。
HTML Semantics
必須のスキルは、HTML タグと、そのタグを正しい目的で使用する意味を理解することです。
たとえば、メニュー バーを作成する場合は次のようになります。
Good ❤️
<nav>
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</nav>
Bad 💢
<div>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
👉 HTML セマンティクスを参照してください。
よくあるWEBサイトのパーツを理解する
ボタンの作り方
すること: 「作成」ボタン
- 基本的なタグ
- font-awesome のアイコン
- ブロック、インラインブロック、フレックスのどれが表示に適していますか?
- ホバリング, アクティブ, 集中
note
- デザインにホバー効果が必要ない場合、ボタン/リンクに設定されているデフォルトのホバーの不透明度は 0.7 です。 ・リンクにパスが指定されていない場合は、href=”#”を設定してください。
- リンクのカバレッジ エリアに注意してください。リンクは、リンクの正しい位置でカバーされている必要があります。
- 外部リンクには target=_blank 属性が必要です。
ヘッダーの作り方
すること: 作成
- 基本的なタグ
- ブロック、インラインブロック、フレックスのどれが表示に適していますか?
- ホバリング, アクティブ, 集中
セクションの作り方
すること: 作成
- 基本的なタグ
- ブロック、インラインブロック、フレックスのどれが表示に適していますか?
- セクションの構造を正しく理解する
note
1 セクションの注記:
- 少なくとも 1 つの見出しタグ
<h>が必要です。見出しタグがない場合は、div を使用します。 <h4>タグがある場合は、その前に<h3>、<h2>タグが必要です。- セクション内の見出しタグのフォントサイズは、
h2>h3>h4>h5>h6の規則に従っている必要があります。
リストの作り方
すること: 作成
- リストを作成するときにタグを使用する方法を理解する
- ブロック、インラインブロック、フレックスのどれが表示に適していますか?
- 列ごとにレイアウトを理解する
画像の処理
すること: 画像
- img . タグの使用法を理解する
- 高解像度の画面で画像がどのように表示されるかを理解する
- ダウンロードに最適な画像形式を理解する
note
atlが必要です。altにはセクションまたは項目のメイン タイトル、ブロックが含まれます。ロゴのaltは Web サイト名です。- 応答時に画像が歪まないようにする必要があります。
- Mobile および Rentina 画面では画像の比率が 2 倍である必要があることを確認してください。
HTML コーディング時の注意事項
- 正しい構文と正しいタグを使用して HTML を作成します。
- HTML W3C の検証 をテストする必要があります。
- 1 ページにはタグ
<h1>が 1 つだけあり、タグ<h1>にはロゴは含まれませんが、そのページのキー タイトルが 1 つ含まれます。