gomiichan's diary

WEB初心者の勉強奮闘記です☆

HTML,CSS復習

<！DOCTYPE html>と
宣言をしてhtmlを書くと過去のバージョンでも書くことができる。

brは改行に使うもので行間を空けるのに使うものではない。行間を空ける際はmargin: bottonを使う。

hrは水平線

h1~h6は見出しに使う。

sectionは本でいう章

articleは本文

asideはsidebarと同じ使い方ができる。

cssはデザイン担当

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<link href="css/reset.css" rel="stylesheet" type="text/css">
<link href="css/css2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
  <header>
    <h1>HTML5の使い所</h1>
    <p>W3Cの勧告までカウントダウン！さてIEは追従できるか否か！？</p>
  </header>
  <nav>
    <ul class="global">
      <li>1章：html5使い所</li>
      <li>2章：W3Cの勧告</li>
      <li>3章：DTD宣言</li>
      <li>4章：スマホサイト</li>
      <li>5章：Media Queries</li>
    </ul>
  </nav>
  <article>
    <section>
      <h2>【html5使い所】</h2>
      <p>「これからはHTML5だ！」といきり立たず、どんな場合にhtml5のタグを使用できるのかしっかり学ぼう。スマホのブラウザシェアーが凄い勢いで伸びているが、まだまだコア層はIE8と9だ。</p>
    </section>
    <section>
      <h2>【W3Cの勧告】</h2>
      <p>来年に迫るW3Cの勧告で、WHATWG、W3C、そしてブラウザごとにバラバラに開発されていたhtml5が統一されるのか否か。</p>
    </section>
    <section>
      <h2>【DTD宣言】</h2>
      <p>PCではhtml5に完全対応しているブラウザはモダンブラウザのみ。今はW3Cのhtml5勧告のための準備として、html5で記述する箇所はDTD宣言と、IE7～8に支障の無いタグにとどめておこう。</p>
    </section>
    <section>
      <h2>【スマホサイト】</h2>
      <p>スマホに特化したサイトならほぼ全てのhtml5のタグを使用できる。PCサイトと別サイトをスマホ専用に作って同一アドレスでデバイスを振り分けよう。振り分けの方法は.htaccessを設置する方法、phpで記述する方法、JavaScriptを用いる方法がある。</p>
    </section>
    <section><!--1番目のセクション開始-->
      <p>【Media Queries】</p>
      <p>Media Queriesを使用したマルチディバイスなサイト作りが今人気を得ている。しかしながら、Media Queriesは現在のIE8ではサポートされていない。IEに対応されるための様々な手法を紹介しよう。</p>
      <section><!--2番目のセクション開始-->
        <h3>【Respond.js】</h3>
        <p>IE6～8でCSS3 Media Queries（max-widthとmin-width）を解釈可能にするスクリプト</p>
        <section><!--3番目のセクション開始-->
          <h4>【Respond.jsの問題点】</h4>
          <p>古いPCでページを読み込む時のロード時間が極端に長くなる。</p>
        </section>
        <!--3番目のセクション終わり-->
      </section>
      <!--2番目のセクション終わり-->
      <section>
        <h3>【html5shiv】</h3>
        <p>Googleが用意しているIE8以下での崩れを防ぐJavaScript。</p>
      </section>
      <!--2番目のセクション終わり-->
      <section class="last">
        <h3>【条件付きコメント】</h3>
        <p>IEの独自仕様をhead内に記述。</p>
      </section>
      <!--2番目のセクション終わり-->
    </section>
    <!--1番目のセクション終わり-->
    
  </article>
  <aside>
    <ul class="sidemenu">
      <li>用語解説</li>
      <li>索引</li>
      <li>画像出典</li>
      <li>リンク集</li>
    </ul>
  </aside>
  <footer> <small>COPYRIGHT (C) 1998-2013 Felica Technical Academy. ALL RIGHTS RESERVED.</small> </footer>
</div>
</body>
</html>


|K

>|css|

@charset "utf-8";
/* base */
body{
  font-size: 16px;
  line-height: 1.7;
}
div#container{
    width: 940px;
    margin: 0 auto;
    padding: 20px;
    background-color: #9CC;
    overflow:hidden; /* 子要素 */
}
header,nav,article,aside{
  padding: 10px;
  background-color: #FFF;
  margin-bottom: 20px;
}
article {
  float:left;
  width: 620px;
  margin-right: 20px;
}
aside {
  float:left;
  width: 260px;
}
footer {
  clear: both;
  padding: 10px;
  text-align:center;
  background-color:#FFF;
}
/*  parts */
ul {
  margin: 0;
  padding: 0;
}
nav ul{
  overflow: hidden;
}
nav ul li{
  float: left;
  margin-right: 30px;
}
section{
  margin-bottom: 10px;
  padding: 10px;
  
  background-color: #CFC;
}
section > section{
  background-color: #FFF;
}
section > section > section{
  margin-bottom: 0;
  background-color:  #CFC;
}
section.last{
    margin-bottom: 0;
}