読者です 読者をやめる 読者になる 読者になる

レスポンシブWebデザイン基礎 - 記事

CSS基礎

記事の可変

  • テキストスペースの可変
  • 画像の可変
<body>
<div class="entry">
<img src="img/entry.jpg" alt="">
<h1>記事のタイトル</h1>
<p>この文章は記事の本文です。この文章は記事の本文です。この文章は記事の本文です。この文章は記事の本文です。この文章は記事の本文です。この文章は記事の本文です。この文章は記事の本文です。この文章は記事の本文です。</p>
<p>この文章は記事の本文です。この文章は記事の本文です。この文章は記事の本文です。この文章は記事の本文です。この文章は記事の本文です。この文章は記事の本文です。この文章は記事の本文です。この文章は記事の本文です。</p>
</div><!-- /.entry -->
</body>
課題
  • 以下のように設定しなさい

f:id:web-design-lesson:20160613015101p:plain
f:id:web-design-lesson:20160613015017p:plain

html, body, h1, p {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
img {
  vertical-align: bottom;
  max-width: 100%;
}
body {
  background: #DAE7E7;
  padding: 20px;
}
h1 {
  line-height: 2.0;
}
p {
  line-height: 1.5;
  margin-bottom: 1.0em;
}