サイトアイコン WEBデザインMATOME

Webコーディング実践編

初めてのコーディング実践編

初めて1からコーディングをする時の手順を公開します!!

今回のコーディング内容

下記の画像の内容をコーディングしていきます。

サンプル画像

samole02

HTMLを作成していきます

HTMLの基本的なテンプレートを準備





Webコーディング実践編








コンテンツの大枠から入力

まずは外枠から順番に内容を記載していきます!!
「body」の中に各コンテンツのタグを記載します。

追記ごのタグ





Webコーディング実践編






ヘッダー部分のタグを入力

ヘッダー部分のタグを入力します。
「header」内に下記を記載

tel:000-0000-0000

記載ごのタグ





Webコーディング実践編






メインコンテンツ部分のタグを入力

ヘッダー部分のタグを入力します。
「main」内に下記を記載

  

タイトルテキストタイトルテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

News

2018.00.00
タイトルテキストタイトルテキスト
2018.00.00
タイトルテキストタイトルテキスト
2018.00.00
タイトルテキストタイトルテキスト
2018.00.00
タイトルテキストタイトルテキスト

記載ごのタグ




Webコーディング実践編






フッター部分のタグを入力

フッター部分のタグを入力します。
「footer」内に下記を記載

 コピーライトテキスト

記載ごのタグ




Webコーディング実践編






これでHTMLが完成しました。

上記の内容でHTML部分が完成になります。
ここからcssの内容を適用して作業を進めていきます!!

共有:

モバイルバージョンを終了