96's blog

WEBサイト制作科　６ヶ月コース

ノーマライズCSS

HTML

ブログ・HTML5の勉強「１カラム」

ノーマライズCSSとは

  • デフォルトスタイルシートのブラウザ間の誤差をなくして補正（ノーマライズ）する、とのこと。
  • リセットCSSが適切に設定できれば、使わなくてもいいかな？

サンプル

f:id:webtm2013:20131128112119p:image

HTML

<!DOCTYPE HTML>
<!--[if lt IE 7]><html class="ie6" lang="ja"><![endif]-->
<!--[if IE 7]><html class="ie7" lang="ja"><![endif]-->
<!--[if IE 8]><html class="ie8" lang="ja"><![endif]-->
<!--[if gt IE 8]><!--><htmllang="ja"><!--<![endif]-->
<head>
<metacharset="utf-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1">
<metaname="viewport"content="width=device-width,initial-scale=1">
<title>One Column Layout</title>
<linkrel="stylesheet"href="normalize.css">
<linkrel="stylesheet"href="style.css">
<linkhref='http://fonts.googleapis.com/css?family=Marcellus+SC'rel="stylesheet">
<!--[if lt IE 9]>
<script src="js/respond.min.js"></script>
<script src="js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<nav>
<ulclass="clearfix">
<li><ahref="#">HOME</a></li>
<li><ahref="#">ABOUT</a></li>
<li><ahref="#">SAMPLE</a></li>
<li><ahref="#">TIPS</a></li>
</ul>
</nav>
<divid="content">
<header>
  <h1>Responsive Web Design</h1>
  <divid="mainImage">
  <imgsrc="img/pic_main.jpg"alt="">
  </div>
</header>
<article>
  <section>
  <h2>ウェブは柔軟なメディアである</h2>
  <p>テキスト文書のみであったWebをデザインするという考えが生まれて間もない頃は、デスクトップパブリッシングの技術を参考にしてきました。</p>
  <p>そして制約されたサイズの中でデザインする印刷物のデザインがWebデザインのベースとなりました。</p>
  <p>しかし出力される媒体は、印刷は紙であり、Webはディスプレイと異なります。そのように出力媒体が異なるものを同じようにデザインする必要はあるのでしょうか。</p>
  <p>長い時間を経て、印刷物のデザインは制約されたサイズでのデザイン技術を高めましたが、そのままWebに反映できる技術ではありませんでした。</p>
  <p>Webは固定されたサイズでの閲覧を前提としていません。環境によって縦横に変化する柔軟な媒体です。</p>
  <p>今までのWebデザインで固まった固定概念と、ピクセルパーフェクトの制約を壊してWebも考え方も柔軟に変化させる時です。</p>
  </section><!--section1-->
  <section>
  <h2>全てをコントロールできない</h2>
  <p>Webサイトにアクセスできるデバイスは多様化し、それを使う環境・シチュエーションも多様化しました。</p>
  <p>入力方式もマウスからタッチデバイス、カメラを使って手さえ触れずに操作することも可能となりました。</p>
  <p>Webサイトを閲覧するブラウザはユーザーがカスタマイズして使うことができます。万人に全く同じような体験を提供することは実質的に不可能です。全てを制御しようとしないことです。</p>
  <p>人によって多少の見え方の違いや使い方の違いも許容できるような思考が必要です。</p>
  </section><!--section2-->
  <section>
  <h2>情報を適切に届けること</h2>
  <p>柔軟な媒体であり、こちらから全てをコントロールすることもできない。</p>
  <p>では、環境により提供するコンテンツも異なって良いのでしょうか？</p>
  <p>ユーザーがサイトにアクセスする理由はそのサイトのコンテンツを閲覧することが目的です。</p>
  <p>もしそのコンテンツを適切にユーザーに届けられないのであればそのサイトの価値はなくなってしまいます。</p>
  <p>閲覧するデバイスや環境で多少その構造が変わったとしてもサイトの核であるコンテンツは適切にユーザーに届けなければなりません。</p>
  <p>コンテンツファースト。コンテンツから考え、コンテンツを最優先に設計しましょう。</p>
  <p>そしてどの情報をどの形でどのように届けるのが最適であるのか。難しい問題ですが常にチャレンジし続けることで解が見えてくるでしょう。</p>
  </section><!--section3-->
</article>
</div><!--content-->
<footer>
<small>Copyright (c) Responsive web design</small>
</footer>
</body>
</html>

ノーマライズCSS

/*! normalize.css v2.1.3 | MIT License | git.io/normalize */

/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined in IE 8/9.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
    display: block;
}

/**
 * Correct `inline-block` display not defined in IE 8/9.
 */

audio,
canvas,
video {
    display: inline-block;
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
    display: none;
    height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9.
 * Hide the `template` element in IE, Safari, and Firefox < 22.
 */

[hidden],
template {
    display: none;
}

/* ==========================================================================
   Base
   ========================================================================== */

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
    font-family: sans-serif; /* 1 */
    -ms-text-size-adjust: 100%; /* 2 */
    -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */

body {
    margin: 0;
}

/* ==========================================================================
   Links
   ========================================================================== */

/**
 * Remove the gray background color from active links in IE 10.
 */

a {
    background: transparent;
}

/**
 * Address `outline` inconsistency between Chrome and other browsers.
 */

a:focus {
    outline: thin dotted;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
    outline: 0;
}

/* ==========================================================================
   Typography
   ========================================================================== */

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari 5, and Chrome.
 */

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9, Safari 5, and Chrome.
 */

abbr[title] {
    border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
 */

b,
strong {
    font-weight: bold;
}

/**
 * Address styling not present in Safari 5 and Chrome.
 */

dfn {
    font-style: italic;
}

/**
 * Address differences between Firefox and other browsers.
 */

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}

/**
 * Address styling not present in IE 8/9.
 */

mark {
    background: #ff0;
    color: #000;
}

/**
 * Correct font family set oddly in Safari 5 and Chrome.
 */

code,
kbd,
pre,
samp {
    font-family: monospace, serif;
    font-size: 1em;
}

/**
 * Improve readability of pre-formatted text in all browsers.
 */

pre {
    white-space: pre-wrap;
}

/**
 * Set consistent quote types.
 */

q {
    quotes: "\201C" "\201D" "\2018" "\2019";
}

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
    font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

/* ==========================================================================
   Embedded content
   ========================================================================== */

/**
 * Remove border when inside `a` element in IE 8/9.
 */

img {
    border: 0;
}

/**
 * Correct overflow displayed oddly in IE 9.
 */

svg:not(:root) {
    overflow: hidden;
}

/* ==========================================================================
   Figures
   ========================================================================== */

/**
 * Address margin not present in IE 8/9 and Safari 5.
 */

figure {
    margin: 0;
}

/* ==========================================================================
   Forms
   ========================================================================== */

/**
 * Define consistent border, margin, and padding.
 */

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
    border: 0; /* 1 */
    padding: 0; /* 2 */
}

/**
 * 1. Correct font family not being inherited in all browsers.
 * 2. Correct font size not being inherited in all browsers.
 * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
 */

button,
input,
select,
textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 2 */
    margin: 0; /* 3 */
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

button,
input {
    line-height: normal;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
 * Correct `select` style inheritance in Firefox 4+ and Opera.
 */

button,
select {
    text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button; /* 2 */
    cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
    cursor: default;
}

/**
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/**
 * 1. Remove default vertical scrollbar in IE 8/9.
 * 2. Improve readability and alignment in all browsers.
 */

textarea {
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
}

/* ==========================================================================
   Tables
   ========================================================================== */

/**
 * Remove most spacing between table cells.
 */

table {
    border-collapse: collapse;
    border-spacing: 0;
}

サイトのCSS

@charset "utf-8";
/* CSS Document */
body{
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  min-width:320px;
  background:url(img/bg_body.png);
  line-height:1.5;
  color:#333;
}
img{
  max-width:100%;
  height:auto;
}
.ie8 img{
  width:auto;
}
.clearfix{
  zoom:1;
} 
.clearfix:after{
  content:"";
  display:block;
  clear:both;
}
nav{
  border-bottom:1px solid #456729;
  background:#1d4000;
  background: -webkit-linear-gradient(top,#1d4000,#183400);
  background: -moz-linear-gradient(top, #1d4000, #183400);
  background: -o-linear-gradient(top, #1d4000, #183400);
  background: linear-gradient(to bottom, #1d4000, #183400);
  box-shadow: 0 1px 1px #000;
  text-align: center;
}
nav ul{
  margin: 0;
  padding: 0;
}
nav ul li{
  float: left;
  width: 25%;
  font-family: 'Marcellus SC',serif;
  letter-spacing: 0.1em;
  text-align: center;
  text-shadow: 1px 1px 1px #000;
}
.ie7 nav ul li{
  width: 24.84375%;
}
nav ul li a{
  display: block; 
  padding: 10px 0;
  color: #fff;
  text-decoration: none;
}
header{
  margin-bottom: 1.5em;
}
header h1{
  line-height: 1.1;
  color: #000;
  font-size: 2.5em;
  font-weight: normal;
  font-family: 'Marcellus SC',serif;
  text-align: center;
}
header #mainImage{
  text-align: center;
}
article{
  padding: 0 10px;
}
article h2{
  padding: 0 0 0 10px;
  border-left: 3px solid #000;
  line-height: 1.1;
  font-size: 2em;
  font-weight: normal;
}
section{
  margin-bottom: 3em;
}
section p{
  margin: 0;
  padding: 0;
  font-size:14px;s
}
footer{
  padding: 30px 0;
  background: #1a1603;
  color: #fff;
  text-align: center;
}

@media only screen and (min-width:768px){
  #content{
    margin: 0 20px;
  }
  header h1{
    margin:1.1em 0;
    line-height: 1.5;
    font-size:3em;
  }
  article{
    padding: 0;
  }
}
@media only screen and (min-width:840px){
  nav ul,
  #content{
    width:800px;
    margin: 0 auto;
  }
}