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

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

文書構造の記述演習

文書構造の記述

  • div要素を使ってグループ化する
ウェブの役割と特性について理解しよう

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

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

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

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

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

Copyright © 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;
}




【デザインとパッケージ】

Products

デザインの話

物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。


パッケージの色

パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。




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

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

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


見出しのレイアウト

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

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


段落のレイアウト

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

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




石垣島観光ガイド】

石垣島観光ガイド

石垣島は八重山諸島の中で一番大きな島で、沖縄で3番目に大きな島です。沖縄からは、空路で約1時間、沖縄より台湾に近く南に位置します。気候は亜熱帯気候で、1年を通じて平均気温は27度もあります。亜熱帯気候のため、マングローブの森や色とりどりの南国の花が咲き、赤瓦屋根の民家、そして何よりも、鮮やかなコバルトブルーの海岸は、多くの観光客をひきつけ、特にダイバーやシュノーケリングを楽しむ人にとっては格好の場所になっています。

観光スポット

「川平(かびら)湾」
石垣港から車で約20分
石垣を代表する景勝地で、エメラルド色のサンゴ礁と黒真珠の養殖でよく知られています。 潮の流れが早いため、遊泳は禁止されています。

「宮良川(みやらがわ)のヒルギ林」
石垣港からバスで30分宮良橋で下車
巨大なマングローブ林(ヒルギ群落)があり、国の天然記念物に指定されているほど壮大です。

「底地(すくじ)ビーチ 」
川平湾から車で約10分
マリンスポーツが楽しめ、マンタが見られることから、ダイバーに人気があります。

「フサキビーチ」
石垣港からバスで30分、宮良橋下車
島の西側にあるビーチで、西表(いりおもて)島に沈む美しいサンセットが見られるビーチとして有名です。

「米原海岸」
石垣空港より車で約30分
米原キャンプ場が隣接していて、ビーチパーティが楽しめます。潮の流れが早いため、遊泳は禁止されています。

「マエザトビーチ」
石垣空港より車で約5分
ホテル内にあるリゾートビーチですが、宿泊者以外でも利用可能です。ファミリー向けリゾート地で、 シュノーケルのレンタルもあります。




【すべての女性の未来のために】

すべての女性の未来のために
今わたし達にできること……

美しさは日々の生活から

美容と健康は太い糸で結ばれていることは言うまでもありませんが、日常生活にまつわる食事、運動睡眠、入浴、呼吸、体質、環境なども細かく くもの巣のように繋ってバランスが保たれているのです。

従って、それらの一つでも切れたり 弱ったりすると全体のバランスが崩れます。 つまり、健康、美容にも悪影響を与えてしまうというわけです。

製品について

私たちのこだわり
商品情報
お手入れについて
スキンケアについて
使用方法
無料サンプルお申し込み
お知らせ

7月21日から夏の「紫外線対策キャンペーン」をスタートします。

【ガラスの靴の持ち主を捜しています】

ガラスの靴の持ち主を捜しています!

パソコンで応募する方

下記の「応募規約」、「個人情報のお取り扱いについて」をお読みいただき、
ご同意いただける方は「はい」をクリックし、応募フォームにお進みください。
【応募規約】

○パソコンでのご応募は、お一人様一回限り(複数ご応募いただいた場合は最終応募のみ有効)とさせていただきます。
※但し、郵便ハガキでのご応募は、ハガキ1通を1口として、お一人様何口でもご応募できます。
○商店街で同時期に行われる他のキャンペーンと重複して当選することはできません。
○当選後の権利譲渡、換金はできません。
○応募の際の必要事項に、不備や虚偽があった場合は、無効になります。
○ご応募は日本国内在住の方に限らせていただきます。
○応募受付の確認、抽選結果に関するお問合せには、お受けいたしかねますのでご了承ください。
○景品の"ガラスの靴"は、11月17日から12月25日まで商店街内に展示した靴となりますので、予めご了承ください。また、サイズは23.5cmとなります。
【個人情報のお取扱いについて】

ご応募にあたり、ご記入いただいた個人情報(郵便番号、住所、氏名、電話番号、年齢)は、当社にて適切に管理し、ご当選の場合の景品受け渡し、及び個人を識別できない統計情報として、応募状況の傾向把握に利用します。当社は、上記の目的範囲内で、個人情報の取り扱いを外部の第三者に委託することがあります。この場合、個人情報の漏洩等が無いよう、業務委託契約に基づく適切な管理を行います。

【個人情報のお取扱いについて】

(プライバシーポリシー)

応募先・お問い合わせ




【おいしい卵料理レストラン Cockyolly】

おいしい卵料理レストラン Cockyolly

今月のおすすめ
きのこのオムライス

きのこのオムライスふんわりアツアツのオムライスを、きのこたっぷりのドミグラソースでどうぞ。オムレツには新鮮な特選地卵を使って、ほんのり甘く仕上げています。
800円


シーフードスパゲッティシーフードスパゲッティ
バルサミコ風味

シーフードスパゲッティシーフードスパゲッティ<br />バルサミコ風味エビ・イカ・アサリの入ったシェフご自慢のスパゲッティです。バルサミコ酢と生クリームで作ったさっぱりソースをお楽しみください。
900円

Home
ニュース
メニュー
今月のおすすめ
オリジナル雑貨
マップ
メール

Copyright(c)2015 Cafe Cockeyolly