このページは、オンライン講座「Web開発入門完全攻略コース」のサポートサイトです。

セクション7 「実践：Webサイトのコーディング」

サンプルコード

完成版のHTMLとCSSを掲載します。
エラーが発生した時に見比べたり、動作するコードをコピー＆ペースとして実行したいときなど、個人の学習用にご利用ください。

HTML

  


  
    
    
    
    
    
    
   
  
    
    

    
CSS Cafe
    
    
    
    
    

      

        
      
      
      

        

          
お知らせ
          

            
2018年3月10日
            
リニューアルオープンしました。
            
2018年4月15日
            
4/27（金）は設備メンテナンスのため休業いたします。
            
2018年4月20日
            
ゴールデンウィークは休まず営業いたします
          
        
        

          
キャンペーン情報
          

            
日頃の感謝を込めて、パスタ全品がいつもよりお得に！
            
平日11時から14時までお得なランチタイムを実施中。
            
バイオリン演奏付きのスペシャルディナーイベントの早期予約受付中。
          
        
      
      
      
      
      
    
    
    
    
    
  
  

CSS

@charset "utf-8";

body {
  font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
}

/* header */
header {
  border-top: 8px solid #614226;
}

header h1 {
  font-size: 2.0em;
  margin: 40px 0 30px 0;
  text-align: center;
}

header nav ul {
  width: 940px;
  margin: 0 auto 30px auto;
  padding-left: 0;
  list-style-type: none;
}

header nav ul li {
  float: left;
  width: 155px;
  margin-right: 2px;
  text-align: center;
}

header nav ul li:last-child {
  margin-right: 0;
}

.clearfix:after {
  content: '';
  display: block;
  clear: both;
}

header nav ul li a {
  display: block;
  padding: 10px 0;
  text-decoration: none;
  color: #fff;
  background-color: #614226;
}

header nav ul li a:hover,
header nav ul li a:active,
header nav ul li.current a {
  background-color: #000;
}

/* main */
main {
  width: 940px;
  margin: 0 auto;
}

main h2 {
  font-size: 1.5em;

  margin-bottom: 50px;
  text-align: center;
}

#main_image {
  margin-bottom: 30px;
}

#main_content {
  float: left;
  width: 600px;
}

#sidebar {
  float: right;
  width: 300px;
}

#home h2 {
  font-size: 1.5em;
  margin-top: 0;
  margin-bottom: 30px;
  padding: 5px 10px;
  text-align: left;
  border-bottom: 1px solid #614226;
  border-left: 10px solid #614226;
}

#info dl {
  margin-bottom: 30px;
  margin-left: 20px;
}

#info dt {
  float: left;
  width: 8em;
}

#info dt,
#info dd {
  line-height: 1.5;
}

#campaign li {
  line-height: 1.5;
  margin-left: 20px;
  list-style-type: none;
}

/* sidebar */
#sidebar ul {
  margin: 0;
  padding: 0;
}

#sidebar ul li {
  margin-bottom: 20px;
  list-style-type: none;
}

/* footer */
footer {
  padding: 15px;
  text-align: center;
  color: #fff;
  background-color: #614226;
}

footer ul {
  margin-bottom: 20px;
/*   margin-left: 0 10px; */ /* <- 訂正：この行は不要です。2018/6/29 */
}

footer ul li {
  display: inline;
/*   margin-left: 0 10px; *//* <- 訂正：この行は不要です。2018/6/29 */
}

footer ul li a {
  color: #fff;
}

footer ul li a:link {
  text-decoration: none;
}

footer ul li a:hover,
footer ul li a:active {
  text-decoration: underline;
}

補足：main h2と#home h2の記述内容に重複があるため、マージすることも可能。今後のコース制作でアップデートを検討中。

注意事項

受講生の皆さんの個人的な学習にのみご利用いただけます。
営利・非営利問わず二次利用する行為を禁止します。