求職者支援訓練webサイト制作科授業資料

フェリカテクニカルアカデミー池袋の求職者支援訓練webサイト制作科7月クラスの授業解説ブログです。

1カラムレイアウトの制作

f:id:yachin29:20160203184948p:plain

divタグ  ・・ひとかたまりの範囲として定義する

divタグはそれ自身は特に意味を持っていませんが、DIVで囲んだ範囲をひとかたまりとして、スタイルシートを適用するのに用います。


今回はh1やpをdivの中に入れ、カラムレイアウトを作っていきます。
カラムとは段を組むこと(段組)を指します。今回は1つのカラムを組んでレイアウトしていきます。
また画像も自身で選び、Photoshopで適切なサイズにトリミングして使用しましょう。

使用するテキスト

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
Net Smart

よりスマートなインターネットライフを。

Concept

すべてのインターネットユーザーに快適でよりスマートさを。ネットスマートはデジタルのチカラを持って、皆様とそんな未来を創造していきます。

Service

低価格&高機能なCMS導入。充実の管理画面でサイト運用を効率的に。

Copyright 2016 Net Smart All Rights Reserved.

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー


解答例

>|html|
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>1カラムレイアウト</title>
<style>

/* reset */
html, body, h1, h2,p,small {
  margin: 0;
  padding: 0;
  line-height: 1.0;
}

/*ページレイアウト*/
body {
  background: #CCC;
}
#container {
  width: 800px;
  margin: 0 auto;
}
#header {
  background: url(img/header.png) no-repeat left top;
  width: 800px;
  height: 300px;
}
h1 {
  text-indent: -999em;
}
#header p {
  text-indent: -999em;
}
#concept {
  background: #FFF;
  width: 800px;
  height: 300px;
  text-align: center;
}
h2 {
  font-size: 32px;
  padding: 40px 0 10px;
  width: 200px;
  margin: 0 auto;
}
#concept h2 {
  color: #09F;
  border-bottom: 5px solid #09F;
}
#concept p {
  padding: 30px 100px 0;
  line-height: 2;
}
#service {
  background: #09F;
  width: 800px;
  height: 300px;
  text-align: center;
}
#service h2 {
  color: #FFF;
  border-bottom: 5px solid #FFF;
}
#service p{
  color: #FFF;
}
#footer {
  background: #333;
}
#footer p {
  text-align: center;
  color: #FFF;
  padding: 20px 0;
}
</style>
</head>

<body>
<div id="container">
<div id="header">
<h1>Net Smart</h1>
<p>よりスマートなインターネットライフを。</p>
</div>
<div id="concept">
<h2>Concept</h2>
<p>すべてのインターネットユーザーに快適でよりスマートさを。ネットスマートはデジタルのチカラを持って、皆様とそんな未来を創造していきます。</p>
</div>
<div id="service">
<h2>Service</h2>
<p>低価格&amp;高機能なCMS導入。充実の管理画面でサイト運用を効率的に。</p>
</div>
<div id="footer"><p><small>Copyright 2016 Net Smart All Rights Reserved.</small></p></div>
</div>
</body>
</html>

隠し文字

今回は背景画像を作る際に文字も含めて画像にしているので、このままでは画像の文字とh1に記述している文字がダブってしまい、画像の文字が読めなくなってしまいます。ここで絶対にやってはいけなのが画像の文字を見せる為にh1に記述している文字を消すという行為です。表示的にはダブっている文字が消えて綺麗に見えますが、文章構造上h1の中身が空という事になってしまうので、絶対にNGです。

隠し文字には何パターンかやり方がありますが、ここでは1番シンプルなマイナスインデントを使います。
「text-indent: -999em;」と指定し、ものすごく左の方に文字を移動させる、という方法です。

h1 {
  text-indent: -999em;
}