My Vector Space

  人生は寄り道してなんぼ

Webデザインスキル強化計画 【 演習課題1 】

 

 ***** 演習課題-1 *****

index-1

 

f:id:ooigawa-bitter-sweet:20131011040241g:plain

《html》

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>index-1</title>
<link rel="stylesheet" href="kadai-1.css">
</head>

<body>


<h1>見出しと段落のレイアウト</h1>
<p>同じ内容の文章であっても、その表現の仕方によって読者に与える印象は大きく変化します。<br>
文章のレイアウトを考えることはより正確に、より効果的に情報を伝えるためにとても重要なことです。</p>

<h2>見出しのレイアウト</h2>
<p>見出しは、その章・節で述べられる話題を端的に示すものです。見出しにはh1からh6までの、6レベルの見出しが用意されています。ページのなかで最も重要な見出しをh1要素でマークアップし、次に重要な見出しをh2要素として、その次をh3要素で・・・といった具合に、重要なものから順々にマークアップいきます。</p>
<p>見出しは、その章・節で述べられる話題を端的に示すものです。見出しにはh1からh6までの、6レベルの見出しが用意されています。ページのなかで最も重要な見出しをh1要素でマークアップし、次に重要な見出しをh2要素として、その次をh3要素で・・・といった具合に、重要なものから順々にマークアップいきます。</p>


<h2>段落のレイアウト</h2>
<p>パラグラフとは、内容に関連のあるいくつかの文の集まりのことです。ひとつのパラグラフに複数のトピックを展開するのは、あまり良くありません。逆にトピックが次に展開しているにも関わらず、同じパラグラフの中に収めてしまうのも、あまり良くありません。段落はp要素を用いてマークアップします。</p>
<p>パラグラフとは、内容に関連のあるいくつかの文の集まりのことです。ひとつのパラグラフに複数のトピックを展開するのは、あまり良くありません。逆にトピックが次に展開しているにも関わらず、同じパラグラフの中に収めてしまうのも、あまり良くありません。段落はp要素を用いてマークアップします。</p>
</body>
</html>


css

@charset "utf-8";
/* CSS Document */

 
h1{
    background-color: #FFE1E1;
    border-top: 7px solid #F66;
    color:#F66;
    border-bottom:2px solid #F66;
    line-height:1.5;
   }
h2{
    background-color:#EDFFE6;
    color: #0C3;
    border-left:5px solid #0C3;
    border-bottom:2px solid #0C3;
    line-height:1.5;
    }
p{
    line-height:1.5;
    }   

PAGE TOP