Posted in コーディング

Webコーディング実践編

   2018年10月14日  Leave a comment

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

初めて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





  

    
メインイメージ

  

  
    
    
  • バナーイメージ
    • 
    
  • バナーイメージ
    • 
    
  • バナーイメージ
    • 
  



    

      

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

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

News

2018.00.00
タイトルテキストタイトルテキスト
2018.00.00
タイトルテキストタイトルテキスト
2018.00.00
タイトルテキストタイトルテキスト
2018.00.00
タイトルテキストタイトルテキスト
  • バナーイメージ
  • バナーイメージ
  • バナーイメージ
  • バナーイメージ
  • バナーイメージ
  • バナーイメージ
  • バナーイメージ
  • バナーイメージ

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

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

 コピーライトテキスト

記載ごのタグ




Webコーディング実践編











ログテキスト


tel:000-0000-0000





  

    
メインイメージ

  

  
    
    
  • バナーイメージ
    • 
    
  • バナーイメージ
    • 
    
  • バナーイメージ
    • 
  

  

   

      

      

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

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

      

    

  

  

    
News

    

      
2018.00.00

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

      
2018.00.00

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

      
2018.00.00

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

      
2018.00.00

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

    

  

  

    
    
      
  • バナーイメージ
    • 
      
  • バナーイメージ
    • 
    

  

  
    
    
  • バナーイメージ
    • 
    
  • バナーイメージ
    • 
    
  • バナーイメージ
    • 
    
  • バナーイメージ
    • 
    
  • バナーイメージ
    • 
    
  • バナーイメージ
    • 
  





  コピーライトテキスト

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

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

Author: 小清水 和真

WebディレクションからWebザイン・コーディングを主に行っております。 2021年株式会社を設立。講師もしております。

コメントを残す