Webコーディング実践編

Posted on 2018年10月14日2018年12月9日 by 小清水和真

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

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

今回のコーディング内容

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

サンプル画像

samole02

HTMLを作成していきます

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





Webコーディング実践編

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

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

追記ごのタグ





Webコーディング実践編

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

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

tel:000-0000-0000

記載ごのタグ





Webコーディング実践編










tel:000-0000-0000

ナビ01
ナビ02
ナビ03
ナビ04
ナビ05
ナビ06
ナビ07

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

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

  
    
  
  
    
    
    
  
  
    
      
      <>
        タイトルテキストタイトルテキスト
        テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

News

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

記載ごのタグ




Webコーディング実践編










tel:000-0000-0000


  
    
  
  
    
    
    
  

    
      
      <>
        タイトルテキストタイトルテキスト
        テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト