CSS layout - Web design

●「CSS」とは「Cascaindg Style sheet」の略で、Webページの視覚表現の
ために使用します。

●CSS記述によるスタイルの指定には、記述する場所の違いによりHTMLファ
イルに組み込む方法が「３種類」あります。
その「３種類の記述位置」を書きなさい。
　（1）「インライン：htmlタグに直接記述」
　（2）「エンベッド：head要素にstyle要素を使って記述」
　（3）「外部リンク：外部作成したCSSファイルに記述」

CSSのスタイル指定の基本（2）
●「CSS」のスタイル指定
　「セレクタ」｛「　プロパティ」：「値」｝

●複数の「スタイル」をまとめる定義方法
　「セレクタ」｛「プロパティ」：「値」；「プロパティ」：「値」｝
　※セミコロン「；」の後ろはソースが見やすいように、改行することが
できます。

スタイルシートを適用させる
（1）各要素のstyle属性として記述する
（2）head要素のstyle属性として記述する
（3）外部のスタイルシートファイルに記述し、HTML文書から参照する

■最も重要な（3）の方法について
（1）スタイルシートファイルを作る。
　　拡張子は［.css］とします。

（2）HTML文書からスタイルシートを参照する。

CSSの基本練習問題（1）
●関連するものを選択しなさい。

（1）CSS　　　　　「 b 」
（2）HTML　　　　「 a 」
（3）スタイルシート「 c 」

a.Webページを構成する要素や要素の属性をマークアップする言語
b.HTMLの要素に対してスタイルを指定する言語として一般的に使われてい
る言語
c.文書のスタイル（見栄え）を指定したデータ一般

CSSの基本練習問題（2）
●CSSによるスタイル指定の構文として正しいのはどれですか。

　　a.<要素名　css="プロパティ：プロパティ値">
　　b.<要素名　style="プロパティ：プロパティ値">
　　c.<要素名　stylesheet="プロパティ：プロパティ値">
答え. b

CSSの基本練習問題（3）
●スタイルシート言語の種類を指定するため、以下の meta要素を指定した
い。HTML文書のどの位置に書くべきか正しい場所を選びなさい。

・指定したいmeta要素

「　　　Ａ　　　」

「　　　Ｂ　　　」
Webページのタイトル

「　　　Ｃ　　　」
内容

答え. B

CSSでテキスト書式を指定する
（1）CSSで文字サイズを指定する
■　フォントを指定するプロパティは何ですか？　答え. font-family
■　CSSで指定する際の適切な単位は何ですか？　答え. em

（2）CSSで文字色を指定する
■　複数のプロパティを指定する方法は？　答え. ；で区切る
■　色の指定にはどのような方法がありますか？　答え. １６進数と10進
数、色名

（3）CSSで書体を指定する
■　書体を指定する際のCSSのプロパティは？　答え. 　
■　Mac版IEの欧文表示の条件は？答え.

（4）CSSで文字の装飾を指定する
■　CSSで文字を太くするプロパティは？答え. font-weight
■　CSSで文字を斜体にするプロパティは？答え. font-style

（5）CSSで文字の行揃えを指定する
■　CSSで段落の行揃えを指定するプロパティは？答え. text-align
■　CSSで段落の幅を指定するプロパティは？答え. line-height

デザインの話

HTML

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www/w3/org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja";
lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" 
/>
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>カラムレイアウト1</title>
<link href="columnlayout1.css" rel="stylesheet" type="text/css"
media="screen, print" />
</head>

<body>
<!-- ▼#container -->
<div id="container">
<h1 lang="en">Products</h1>
<!-- ▼.content -->
<div class="content">
<h2>デザインの話</h2>
<p>
物にはいろいろな形があります。歴史とともに多様な形が生まれてきまし
た。物にはいろいろな形があります。歴史とともに多様な形が生まれてき
ました。
</p>
<p>
物にはいろいろな形があります。歴史とともに多様な形が生まれてきまし
た。物にはいろいろな形があります。歴史とともに多様な形が生まれてき
ました。
</p>
</div >
<!-- ▲.content -->
<!-- ▼.content -->
<div class="content">
<h2>パッケージの色</h2>
<p>
パッケージにはいろいろな色があります。歴史とともに多様な組み合わせ
が生まれてきました。パッケージにはいろいろな色があります。歴史とと
もに多様な組み合わせが生まれてきました。
</p>
<p>
パッケージにはいろいろな色があります。歴史とともに多様な組み合わせ
が生まれてきました。パッケージにはいろいろな色があります。歴史とと
もに多様な組み合わせが生まれてきました。
</p>
</div>
<!-- ▲.content -->
</div>
<!-- ▲#container -->
</body>
</html>

CSS

@charset "UTF-8";

body {
  color: #343434;
  font-size: 0.8em;
  font-family:
    "Hiragino Kaku Gothic Pro",
    "ヒラギノ 角後ゴ Pro W3",  
    Meiryo,
    "メイリオ",
    Osaka,
    "MS PGothic",
    "ＭＳ Ｐゴシック",
    sans-serif;
  line-height: 1.7;
  margin: 20px 0;
  padding: 0;
}

#container {
  width: 350px;
  margin: 30px auto;
  border: 1px solid #FF7F00;
}

.content {
  margin: 0 0 20px 20px;
}

h1 {
  color:#fff;
  font-size: 1.5em;
  font-family:
    Verdana,
    Helvetica,
    sans-serif;
  margin: 0 0 24px 0;
  padding: 5px 5px 5px 15px;
  width: 331px;
  background-color: #FF7F00;
}

h2 {
  color: FF7F00;
  font-size: 16px;
  margin: 0 0 10px;
}

p {
  margin: 0 1em 1em 16px;
}

見出しと段落のレイアウト

HTML

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"
lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" 
/>
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>1カラムレイアウト-2</title>
<link href="columnlayout2.css" rel="stylesheet" type="text/css"
media="screen, print" />
</head>

<body>
<!-- ▼#container -->
<div id="containaer">
<!-- ▼.content -->
<div class="content">
<h1>見出しと段落のレイアウト</h1>
<p>
同じ内容の文章であっても、その表現の仕方によって読者に与える印象は
大きく変化します。文章のレイアウトを考えることはより正確に、より効
果的に情報を伝えるためにとても重要なことです。
</p>
<h2>見出しのレイアウト</h2>
<p>
見出しは、その章・節で述べられる話題を端的に示すものです。見出しに
はh1からh6までの、6レベルの見出しが用意されています。ページのなかで
最も重要な見出しをh1要素でマークアップし、次に重要な見出しをh2要素
として、その次をh3要素で･･･といった具合に、重要なものから順々にマー
クアップいきます。
</p>
<p>
見出しは、その章・節で述べられる話題を端的に示すものです。見出しに
はh1からh6までの、6レベルの見出しが用意されています。
</p>
</div>
<!-- ▲.content -->
<!-- ▼.content -->
<div class="content">
<h2>段落のレイアウト</h2>
<p>
パラグラフとは、内容に関連のあるいくつかの文の集まりのことです。ひ
とつのパラグラフに複数のトピックを展開するのは、あまり良くありませ
ん。逆にトピックが次に展開しているにも関わらず、同じパラグラフの中
に収めてしまうのも、あまり良くありません。段落はp要素を用いてマーク
アップします。
</p>
</div>
<!-- ▲.content -->
</div>
<!-- ▲#container -->

</body>
</html>

CSS

@charset "UTF-8";

*[Lesson]{
  margin: 0;
  padding: 0;
}

body{
  color:#333333;
  font-size: 0.8em;
  font-family: 
    "Hiragino Kaku Gothic Pro",
    "ヒラギノ 角ゴ Pro W3",
    Meiryo,
    "メイリオ",
    Osaka,
    "MS PGothic",
    "ＭＳ Ｐゴシック",
    sans-serif;
  line-height: 1.7;
  margin: 10px;
  padding: 0;
  background-color: #FFFFFF;  
}

#container{
  width: 540px;
  margin: 50px auto 0 auto;
  border: 1px dotted #0850B2;
}

#content{
  width: 500px;
  margin: 25px 20px 0;  
}

.section{
  margin: 30px 0;
}

h1{
  color: #0850B2;
  font-size: 1.5em;
  background: #FFFFFF url(images/heading_bg.gif) left bottom 
repeat-x;
  border-top: 7px solid #0850B2;
  border-bottom: 3px solid #CCCCCC;
  margin: 0 0 20px;
  padding: 10px 10px 5px 1em;
}

h2{
  color: #0850B2;
  font-size: 1.2em;
  background-color: #EFEFEF;
  border-left: 5px solid #0850B2;
  border-bottom: 1px solid #CCCCCC;
  margin: 0;
  padding: 10px 5px 4px 1em
}

p{
  margin: 16px 0 16px 20px;
}