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

ハロートレーニングWebデザインの勉強 Webデザイン フェリカテクニカルアカデミーWebサイト制作科

CSSでレイアウト - 演習

CSS

ボックスレイアウト実践 - 基礎演習

  • style要素をエンベッドして、以下の問いに答えなさい
CSS01
  • h1要素「CSSの使い方」を記述し、赤色に表示されるよう設定しなさい
CSS02
  • CSS01の記述を、背景色「青色」・文字色「白色」に変更しなさい
CSS03
  • CSS02の余白を10pxに変更しなさい
CSS04
  • 文字色と背景色
<body>
<h1>style要素</h1>
<h2>style element</h2>
<p>HTML文書内にまとめて設定します。</p>
</body>

CSS05
  • 文字色と背景色
<body>
<h1>About wine</h1>
<h2>Chianti Classico Riserva</h2>
<p>1435年創業の由緒あるワイン醸造メーカーの名家マッツェイが所有するぶどう園は、いたるところにローマ時代の遺跡が残る小さな集落にあります。<br>
15世紀から現在に至るまで、キャンティワインの造り手たちの先導者であり続けるマッツェイの歴史は、キャンティワインの歴史といっても過言ではありません。キャンティの最高峰と呼ばれるマッツェイは、もっぱら地元の人のために造られる量り売りを飲んでいたぼくにとって、憧れのワイナリーでした。当時はおじいちゃんになったら飲めるかなと思っていましたが、こうして日本で、ましてや自分の店のリストに加えることができるなんて驚きです。</p>
</body>

CSS06
  • 背景色と余白
<body>
<h2>background-colorの設定</h2>
<p>見出しには濃いめの色を背景に指定し、文字を白抜きにします。段落には見出しよりも薄い色を指定します。さらに見出しと段落の上下のマージンを0にして、ボックスの上下をくっつけ、パディングを1em指定します。</p>
</body>

CSS07
  • 背景画像を設定



CSS08
  • 背景画像を設定(水平方向に繰り返し)



CSS09
  • 背景画像を設定(垂直方向に繰り返し)



CSS10
  • 背景画像と枠線
<body>
<h1>Page Design</h1>
<p>背景に色数を減らした画像を用意します。背景画像は、縦方向び繰り返しを指定しています。<br>
また、見出しの文字は、大きく、インパクトの強い色を指定し、目を引くようにしています。<br>
このように、やり方次第でデザインの幅が広がります。いろいろ試してみましょう。</p>
</body>



CSS11
  • 背景画像(繰り返さない)
<body>
<h1>古池や蛙飛び込む水の音</h1>
<p>芭蕉の「古池や蛙飛び込む水の音」の、連歌の発句として脇を予想したもとの形は「古池や蛙飛んだる水の音」でした。<br>
明らかに、「蛙飛んだる水の音」のほうが勢いがあり、連衆から脇句を引き出す挨拶の意味も込められていましたが、単独の文学作品としては、
「蛙飛び込む水の音」のほうが遙かに余情があるでしょう。<br>
明治以後、近代化された俳句が盛んになると共に、連歌は廃れてしまいました。しかし、近年連歌を巻く人が急激に増加しつつあるようです。<br>
発句には、何よりも連歌全体がそこから始まるという、共同製作の原点という面白さがあります。これまで、俳句だけを作ってこられた方に、是非とも、発句の面白さを経験して戴くために、発句の部屋を開設した次第です。</p>
</body>



CSS12
  • 以下の文章を構造化しなさい
  • div要素を使ってグループ化しなさい
ウェブの役割と特性について理解しよう

ウェブで私たちの生活はどう変わったのか?

インターネット・ウェブの利用者増によって、個人が発信する情報群の価値が高まってきました。広告のあり方にも大きな影響を与えています。一方的に、公式な情報を提供するだけでは訴求できない時代になりました。

インターネットの検索機能を活用した情報収集

インターネットは私たちの社会に浸透し、多くの人たちにとって欠くことのできない生活の道具になりました。最も利用されているのは電子メールです。電車に乗ると、携帯電話を使って受信したメールをチェックしたり、返信文を入力している人をたくさん見かけます。インターネットが商用化される前は、電話をかけるしか方法がありませんでしたので、大きな変化だといえるでしょう。

検索もインターネットの強力な機能です。私たちは、気になる製品があった場合、詳細な情報を得ようとします。どのようなことができるのか、今までの製品と何が違うのか、価格はいくらか等、製品に関する基本情報について集めます。家電量販店などに行けば、カタログがありますし、店員に詳しい情報を聞くこともできますが、インターネットなら場所や時間に拘束されることなく、迅速に情報収集できます。

Copyright &#169; 2016 Webデザインの勉強

例題

宮沢賢治作品
いてふの実
そらのてっぺんなんか冷たくて冷たくてまるでカチカチの灼きをかけた鋼です。
そして星が一杯です。けれども東の空はもう優しい桔梗の花びらのやうにあやしい底光りをはじめました。
その明け方の空の下、ひるの鳥でも行かない高い所を鋭い霜のかけらが風に流されてサラサラサラサラ南の方へ飛んで行きました。
実にその微な音が丘の上の一本いてふの木に聞える位澄み切った明け方です。いてふの実はみんな一度に目をさましました。そしてドキッとしたのです。
今日こそはたしかに旅立ちの日でした。みんなも前からさう思ってゐましたし、昨日の夕方やって来た二羽の烏もさう云いひました。
文書構造の記述
  • 背景画像を設定する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>いてふの実 | 宮沢賢治作品</title>
</head>
<body>
<div class="container">
<h1>宮沢賢治作品</h1>
<h2>いてふの実</h2>
<p>そらのてっぺんなんか冷たくて冷たくてまるでカチカチの灼きをかけた鋼です。<br>
そして星が一杯です。けれども東の空はもう優しい桔梗の花びらのやうにあやしい底光りをはじめました。<br>
その明け方の空の下、ひるの鳥でも行かない高い所を鋭い霜のかけらが風に流されてサラサラサラサラ南の方へ飛んで行きました。<br>
実にその微な音が丘の上の一本いてふの木に聞える位澄み切った明け方です。いてふの実はみんな一度に目をさましました。そしてドキッとしたのです。<br>
今日こそはたしかに旅立ちの日でした。みんなも前からさう思ってゐましたし、昨日の夕方やって来た二羽の烏もさう云いひました。</p>
</div><!-- /.container -->
</body>
</html>

f:id:web-css-design:20160829013212p:plain

例題A

f:id:web-css-design:20160829020203p:plain

html, body, h1, h2, p {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
body {
  background-color: #FFF;
}
.container {
  width: 80%;
  margin: 20px auto;
}
.container>h1 {
  margin-bottom: 20px;
}
.container>h2 {
  padding: 10px 1.0em 8px 1.0em;
  background-color: #5DB254;
  color: #FFF;
}
.container>p {
  padding: 20px;
  box-sizing: border-box;
  line-height: 1.5;
  border: 1px solid #5DB254;
}
例題B


f:id:web-css-design:20160829020046p:plain

html, body, h1, h2, p {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
body {
  background-color: #FFF;
}
.container {
  width: 80%;
  margin: 20px auto;
}
.container>h1, .container>h2 {
  margin-bottom: 20px;
}
.container>h2 {
  padding-bottom: 45px;
  background: url(img/01.jpg) no-repeat center bottom;
  text-align: center;
}
.container>p {
  line-height: 1.5;
}
例題C


f:id:web-css-design:20160829020702p:plain

html, body, h1, h2, p {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
body {
  background-color: #FFF;
}
.container {
  width: 80%;
  margin: 20px auto;
}
.container>h1, .container>h2 {
  margin-bottom: 20px;
}
.container>h2 {
  line-height: 40px;
  background: url(img/02.jpg) no-repeat center top;
  text-align: center;
}
.container>p {
  line-height: 1.5;
}