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

WebコーディングCss適用編

小清水 和真

Css適用編

前回作成した、「初めてのコーディング実践編」で作成したHTMLデータを元にCSSを適用していきます!!

前回のデザイン内容

下記の画像の内容を元にCssを調整していきます!!

サンプル画像

完成HTML




Webコーディング実践編











ログテキスト


tel:000-0000-0000





  

    

  

  
    
    
    • 
    
    • 
    
    • 
  

  

   

      

      

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

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

      

    

  

  

    
News

    

      
2018.00.00

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

      
2018.00.00

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

      
2018.00.00

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

      
2018.00.00

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

    

  

  

    
    
      
    • 
      
    • 
    

  

  
    
    
    • 
    
    • 
    
    • 
    
    • 
    
    • 
    
    •

ヘッダーを調整

ヘッダーの内容を整えていきましょう!!

header{
  width: 1200px;/*ヘッダーの横幅の設定*/
  margin: auto;/*センター寄せのための記述*/
  display: flex;/*横並びの設定*/
  justify-content: space-between;/*均等に設定するための設定*/
  flex-wrap: wrap;/*要素をはみ出した際に折り返す指定*/
}
header h1{
  width: 50%;/*ロゴ部分の横幅の指定*/
}
header p{
  width: 50%;/*電話番号部分の横幅設定*/
  text-align: right;/*テキスト右寄せの設定*/
}
header nav{
  width: 100%;/*グローバルナビの横幅設定*/
}
header nav ul{
  display: flex;/*横並びの設定*/
  justify-content: space-between;/*均等に設定するための設定*/
  list-style: none;/*リストスタイルをなくす設定*/
}

ヘッダー調整完了

下記の画像の用にレイアウトが整います。

コンテンツを調整

main{
  width: 100%;/*メインコンテンツ全体の幅の設定*/
}
.mv{
  width: 100%;/*メインビジュアルの大枠の横幅*/
  background-color: #ccc;/*背景カラーの設定*/
  text-align: center;/*画像のセンター寄せ設定*/
}
.list01{
  width: 1200px;/*メインビジュアルの下のバナー横幅設定*/
  margin: auto;/*センター寄せ設定*/
  display: flex;/*横並び設定*/
  justify-content: space-between;/*均等に配置するための設定*/
  list-style: none;/*リストスタイルなしの設定*/
}
.box01{
  width: 100%;/*横幅の設定*/
  background-color: #ccc;/*背景カラーの設定*/
}

.box01wapper{
  width: 1200px;/*横幅の設定*/
  margin: auto;/*ボックスのセンター寄せ設定*/
  display: flex;/*横並び設定*/
}

.news{
  width: 520px;/*横幅の設定*/
  margin: auto;/*センター寄せ設定*/
  text-align: center;/*テキストセンター寄せ設定*/
}

.news dl{
  display: flex;/*横並び設定*/
  flex-wrap: wrap;/*はみ出した要素の折り返し設定*/
}
.news dl dt{
  width: 30%;/*横幅の設定*/
  margin: 0px 0px 10px 0px;/*下の要素との間を設定*/
  padding: 0px;/*デフォルトの値のリセット設定*/
}
.news dl dd{
  width: 70%;/*横幅の設定*/
  margin: 0px 0px 10px 0px;/*下の要素との間を設定*/
  padding: 0px;/*デフォルトの値のリセット設定*/
}

.box02{
  width: 100%;/*横幅の設定*/
  background-color: #ccc;/*背景カラーの設定*/
  padding: 50px 0px;/*内側の余白を広げる設定*/
  margin: 50px 0px;/*外側の余白を広げる設定*/
}
.box02 ul{
  width: 1200px;/*横幅の設定*/
  margin: auto;/*センター寄せ設定*/
  display: flex;/*横並び設定*/
  justify-content: space-between;/*均等に配置するための設定*/
  list-style: none;/*リストのスタイルをなくす設定*/
}

.bana{
  width: 1200px;/*横幅の設定*/
  margin: auto;/*センター寄せ設定*/
  display: flex;/*横並び設定*/
  flex-wrap: wrap;/*はみ出した要素の折り返し設定*/
  list-style: none;/*リストのスタイルをなくす設定*/
}

コンテンツ調整完了

下記の画像の用にレイアウトが整います。

フッター調整

footer{
  width:100%;
  margin:auto;
  background-color: #ccc;
  text-align: center;
}

フッターの調整完了

下記の画像の用にレイアウトが整います。

これで大枠のレイアウトが完成しました。

上記の調整に加えて、paddingやmarginなどを使い細かな間の調整や、大きさの調整を行う事で、綺麗な見た目を表現することが可能です。

共有:

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