tableの作成とデザイン
今回は初めてtableの作成とデザインを行いました。はじめはややこしいなと思っていましたが、理屈を理解できれば、そこまで難しい内容ではないと感じましたね。
tableの作成方法
今回の記述です。
HTML
<table>
<caption>工房の概要・沿革</caption>
<tr>
<th>工房名</th>
<td>FOREST STUDIO</td>
</tr>
<tr>
<th>所在地</th>
<td>〒000－0000 東京都山間部の山の町1－3－5</td>
</tr>
<tr>
<th>設立</th>
<td><time datetime="1990-08">1990年8月</time></td>
</tr>
<tr>
<th>主な活動</th>
<td>
<ul>
<li>工房の運営</li>
<li>ひまわり畑の管理</li>
<li>散策コースの整備</li>
</ul>
</td>
</tr>
</table>
/*アバウトページ*/
table,th,td {
border: solid 1px #aaa;
}
table {
border-collapse: collapse;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
}
th,td {
padding: 10px 20px
}
th {
width: 150px;
background-color: #ffcb63;
text-align: left;
}
td {
width: 450px;
background-color: #ffedce;
}
caption {
font-weight: bold;
background-color: #d9d8a7;
border-radius: 10px;
padding: 5px;
margin-bottom: 10px;
}
まず、今回はaboutのページを新たに作成しました。そこに上記の記述をしています。
ヘッダーとフッター以外の部分は削除し、新たに記事を作成しています。
tableタグは、必ず<table>から始まります。あとは以下のタグで構成されています。
<tr> table row 行を構成
<th> table header 行の見出しを構成
<td> table deta 行のデータセルを構成
tableの次に来るのは、行を構成しなくてはならないので、<tr>ということになります。
<tr>の構成は、どういったtableを作りたいかによって変わりますが、今回作成したようなシンプルなtableであれば、
<table>
<tr>
<th>見出し</th>
<td>内容</td>
</tr>
</table>
と言った感じで作れます。tableは1行ずつ完成させていくので、<tr>～</tr>までのくだりを連続させていくだけで、行の数が増えていきます。すべての行の記述が終わったら、必ず</table>で終わります。
セルの結合方法
tableの形によってはエクセルのようにセルを結合させたいと思うときがあります。そういったときは、
rowspan 縦方向の結合
colspan 横方向の結合
上記のタグを使用します。
実際にタグでは、
<tr>
<th rowspan="2">縦方向に2セル結合</th>
<td>内容</td>
</tr>
<tr>
<th>見出し</th>
<th>見出し</th>
</tr>
<tr>
<td colspan="2">横方向に2セル結合
</tr>
border-collapse: collapse
border-collapse: collapseの記述は、隣接するボーダーを重ねて表示する記述です。同じborder-collapseプロパティにsparateがあります。sparateは間隔を開けて表示させる記述です。
まとめ
以前独学でtableを勉強したことがあったんですが、あのときはもうツールに頼ろう！と決め込むほど理解できませんでしたが、今回改めて勉強してみると、思っていたより難しくありませんでした。ただ、人に説明するほどは理解していないので、これからさらに理解を深めていきたいと思います。
今回は新たにページを作成したので、BeforeAfterがありません。実績だけ残しておきます。
規定のデザインを流用！ボタンの作成
今回は規定のデザインを流用して、今回作成したページをデザインしました。それとボタンの作成ですね。
今回の記述です。
article,#message
～以下略～
#photo a{
background-color: #ffaa00;
background-image: linear-gradient(to bottom,#ffe7b8 0%,#ffaa00 100%);
padding: 10px 80px;
border-radius: 10px;
color: #000;
font-weight: bold;
text-decoration: none;
}
HTML
<p id="message">
Forest Studioは森や自然を生かしたイベントや商品をお届けしている工房です。自然の中にある「森の工房」では、四季折々の風景を楽しんだり、森の散歩を楽しむことができます。お近くまでお越しの際は、ぜひお立ち寄りください。
</p>
<a href="news.html">工房からのお知らせ</a>
今回の記述は、以前作ったデザインをそのまま流用するというものでした、具体的に言えば、news01.htmlで使ったデザインをそのまま使用しているだけなので、以前記述したCSSに追加でIDを付けた感じでできました。
linear-gradient
linear-gradientの記述は、指定したボックス内にグラデーションをつける指定です。
background-image: linear-gradient(方向,開始色 0%,終了色 100%);
方向には以下の種類があります。
- to bottom 上から下
- to top 下から上
- to right 左から右
- to left 右から左
また、方向は角度で指定することもできます。
- to bottom 180deg
- to top 0deg
- to right 90deg
- to left 270deg
12時の方向を0度とし、度数はdegで記述します。角度を指定するときは、マイナス方向にも指定できます。
まとめ
今回は初めて登場した、 linear-gradient以外は割と簡単な記述でした。IDの指定が追加でできることを知ったのは、あとから役に立ちそうです。
以下今回のBeforeAfterです。
After
テキスト回りにボックスが入り、画像の中心にボタンができたのがわかると思います。CSSでボタンを作成したのは初めてですが、これからも作っていくと思うので、しっかり覚えていこうと思います。
トップページの作成とデザイン
今回はついにトップページを作成しました。最初に作っていたページがトップページだと思っていたので、ここまで来て軽くびっくりしました。
トップページの作成
トップページはindex.htmlという新しいファイルの中に記述していきます。以下、今回の記述です。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>FOREST STUDIO</title>
<link rel="stylesheet" href="style.css">
</head>
<body id="top">
<header>
<h1><a href="index.html"><img src="logo.png" alt="">FOREST STUDIO</a></h1>
<nav>
<ul>
<li><a href="index.html">トップ</a></li>
<li><a href="news.html">お知らせ</a></li>
<li><a href="about">工房について</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>
</nav>
</header>
<section>
<div id="photo">
<h1>FOREST STUDIO</h1>
<p>自然のあれこれをお届けする森の工房です。</p>
</div>
<p>
Forest Studioは森や自然を生かしたイベントや商品をお届けしている工房です。自然の中にある「森の工房」では、四季折々の風景を楽しんだり、森の散歩を楽しむことができます。お近くまでお越しの際は、ぜひお立ち寄りください。
</p>
</section>
<footer>
<small>Copyraight ©FOREST STUDIO,all rights reserved</small>
</footer>
</body>
</html>
/*トップページ*/
#top header {
margin-bottom: 0px;
}
#photo {
background-image: url(photo.jpg);
background-repeat: no-repeat;
background-position: 50% 0;
background-color: #3f8ad6;
text-align: center;
padding-top: 320px;
padding-bottom: 80px;
}
#photo h1{
color: #fff;
font-size: 60px;
font-family: 'Chango',cursive;
text-shadow: 0 5px 10px #000;
}
#photo p {
color: #fff;
font-size: 20px;
font-weight: bold;
text-shadow: 0 5px 10px #000;
}
トップページhtmlの大部分は他のページのコピペです。細かに変えている部分はありますが、大半がテキストなので、ここでの説明は割愛します。強いて言うなら、body id="top"に変更したのが大きいな変更点です。
background-repeat
background-repeat: no-repeat;と設定することによって、画像を単品で表示させることができます。ここでは大きな画像を用意しているので、ドカンと大きく表示させています。
background-position
background-position: 50% 0; background-position: 50% 0;
以上の記述で、背景画像を中央揃えで表示させています。50％の値が横方向、0の値が縦方向の値を示しています。ですが、中央揃えで表示させた場合は、centerで記述するのが一般的のようです。
font-weight: bold
font-weight: bold;
この記述で太字で表示させることができます。はてなブログでも太字にするボタンがbで表示されていますが、このboldの略だったんですね。
text-shadow
text-shadow: 0 5px 10px #000;
この記述でテキストシャドウを表現しています。
0が横のオフセット
5pxが縦のオフセット
10pxがぼかし幅
＃000がカラーです。
まとめ
今回は久しぶりに登場した記述もあり、思い出し作業がけっこうありました。未だにオフセットの意味がわかりませんが、多分なんとかなるだろう的な理解度です。以下今回のBeforeAfterです。
Before
After
やはり画像が大きく入るとかなり見た目が変わって見えますね。変更前がヘッダーとフッターしか入っていない状態なので、そりゃ変化も大きいですよね。
引き続き勉強していきます。
IDの使い方
今回は主にIDの使い方を勉強しました。
IDの使い方
まず今回の記述です。
/*記事一覧のページ*/
#posts article img {
float: left;
margin-right: 20px;
}
#posts article h1{
font-size: 24px
}
#posts section
{
width: 900px;
margin-left: auto;
margin-right: auto;
}
#posts header{
margin-bottom: 20px;
}
HTML
<body id="posts">
こうして振り返ってみると、CSSで書いていることが多い＝HTMLの記述が多い、は成立しないことがわかります。ではさっそくIDの使い方を勉強していきます。
HTMLでの書き方は、<body id="posts">のように、
<使いたい要素 id="ID名">となります。このID名はアルファベットと数字、ハイフンとアンダーバーを使って自由に決めることができます。使いたい装飾に適したIDを付けるよ良いと言われています。
CSSでの書き方は、
#posts article imgのように、#ID名 使う場所 で構成されています。
#posts article imgの場合で言えば、postsがID名、article imgが使う場所です。
使う場所を記入する必要はありませんが、この記述の優先順位が下がってしまうため、確実に表示させるなら、使う場所まで記述するとより確実です。
今回の場合で言えば、postsというID名しか使用していませんが、それぞれ使う場所が異なるため、結果的にセクション名が異なる形になっています。
まとめ
IDはこれから間違いなく使っていくことになるので、使い方をしっかり覚えておきたいです。一発で覚えることができなかったとしても、何度なく使っていけば、自然と覚えると思うので、めげずに勉強していこうと思います。
以下今回のBeforeAfterです。
Before
After
お知らせと記事部分が揃っているのがわかると思います。もっと言うと、フォントサイズを変えたり、余白の調整をしていますが、ぱっと見ではほとんどわからない変化です。
引き続き勉強していきます。
ロゴ画像＆サイト名にリンクを挿入！各ページのヘッダーを共通にする
今回やったことはサイトタイトル通りのことです。前回勉強したdisplay要素と疑似要素が強すぎて、今回はとても楽勝に感じましたね。
ロゴ画像＆サイト名にリンクを挿入
以下、今回の記述です。
header h1 a{
text-decoration: none;
color: #000000;
}
a img {
border: none;
}
header h1 a:hover {
color: #000000;
}
HTML
<header>
<h1><a href="index.html"><img src="logo.png" alt="">FOREST STUDIO</a></h1>
まず、text-decoration: noneで下線を消しました。これはaタグのデフォルトシートで下線が入るようになっているので、それを打ち消す意味があります。colorを#000000で真っ黒にしたのは、これもデフォルトで茶色になる指定があるのを打ち消す意味があります。
header h1 a:hoverは、headerにホバーしたときの色を指定しています。これもオレンジ色に変更するように指定してありますので、それを打ち消す意味で真っ黒になるように指定しています。
a imgにborder: none;と記述しているのは、インターネットエクスプローラーだとロゴの回りに黒い罫線が表示されるそうなので、それを消すためにnoneと指定しています。ちなみに僕はChromeを使用していますが、この罫線は表示されませんでした。
各ページのヘッダーの統一
ここまで完成させたら、今回のHTMLタグをコピーして、【news02】【news03】のヘッダー部分にコピペします。そうすることによって、各ページのヘッダーが統一されます。
まとめ
今回勉強したことは本当に簡単でした。後半部分に至ってはコピペしただけなので、楽勝すぎます。ただ、前回みたいにいきなり難しい記述も挟まることもあるので、今回は箸休め的な意味があったと思い、油断せずがんばっていこうと思います。
以下今回のBeforeAfterです。
1
2
3
4
1と2はリンクが挿入されただけなので、表面上は変化はありません。3と4は以前ヘッダー部分の装飾されていませんでしたが、今回から装飾され、各ページのヘッダーが共通になっているのがわかると思います。
引き続き勉強していきます。
nth childとdisplay要素について
今回は主にnth childとdispley要素について勉強しました。参考テキストにはさらっとしか紹介されていませんでしたが、実際にWEBデザインをしてくのに欠かせない要素なので、しっかり理解したいと思います。
nth child
まず、今回の記述です。
/*ナビゲーションメニュー*/
nav ul {
list-style-type: none;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
font-size: 0px;
}
nav li {
display: inline;
font-size: 12px;
border-right: solid 1px #aaaaaa;
padding-left: 10px;
padding-right: 10px;
}
nav li:first-child {
border-left: solid 1px #aaaaaa;
}
nav {
width: 900px;
margin-left: auto;
margin-right: auto;
text-align: right;
margin-top: -27px;
margin-bottom: 10px;
}
nav a {
color: #000000;
text-decoration: none;
}
nav li:first-childは、親要素の直下を指定する場合に使用するタグです。直下以外では使用できません。この要素を擬似要素と呼び、疑似要素は以下のとおりです。
- link リンク先に未アクセス時の表示
- visited リンク先にアクセス済の表示
- hover リンク先にカーソルを重ねたときの表示
- focus リンク先にフォーカスしたときの表示
- active リンク先をクリックしたときの表示
- first-child 親要素にとって一つ下の要素
- lang 当該要素の記述言語が指定したものである場合
- checked 当該要素がチェックされた場合を対象とする
- disabled 当該要素が操作不可の場合に対象とする
- empty 空要素を対象とする
- enebled 当該要素が操作不可能の場合に対象とする
- first-of-type 親要素にとって一番初めに現れた当該要素を対象
- last-child 親要素にとって最後の直下要素を対象
- last-of-type 親要素にとって一番最後に現れた当該要素を対象
- nth-child(数字) 子要素として、先頭から○番目の要素が対象
- nth-child(odd) 奇数番目の要素にスタイルを適用
- nth-(even) 偶数番目の要素にスタイルを適用
- nth-last-child(数字) 下から○番目の要素にスタイル適用
- only-child 親要素の対象となる子要素が一つだけのとき
本当はもう少しあるんですが、ひとまずここまで紹介しておきます。実際によく使うのは、nth-child(数字)とnth-child、first-of-typeとfirst-childらしいので、この辺をしっかり覚えておこうと思います。
display要素
display要素も擬似要素も本当にわかりにくいです。これを理解するために、いろんなサイトを見ましたが、未だに完全に理解はできていません。ただ、こんな感じなんだなってのはわかったので、今後も勉強していこうと思います。
display要素は以下のとおりの値があります。
- none 非表示
- block
- inline
- inline-block
- flex
block
- 要素は縦に並ぶ。（前後に改行が入る）
- width/heightを指定できる
- margin/paddingを指定できる
- text-alignは指定できない
- vertical-alignは指定できない
※p、div、ul、h1～h6などのタグの初期値
※中央揃えしたいときは、margin-right/leftをautoにする
inline
- 要素は横に並ぶ（前後に改行は入らない）
- 主に文章の一部として使用される、基本的にblockの中で使用する
- width/heightは指定できない
- 左右のpadding/marginは指定できる
- 上下のmarginは指定不可。上下のpaddingは指定できるが前後の行とかぶってしまう
- text-alignは指定できる。親要素（div.pなど）に記述する
- vertical-alignは指定できる。親要素ではなく、直接inlineに記述
※inlineの幅＆高さは要素の中身（テキストの長さやフォントサイズ）で自動的に設定される
inline-block
- 要素の並び方はinline的、要素の中身はblock的な性質を持つ
- width/heightを指定できる
- margin/paddingを指定できる
- text-alignは指定できる。親要素（div.pなど）に記述する
- vertical-alignは指定できる。親要素ではなく、直接inline-blockに記述する
※inline-blockはSNSボタンの横並びやナビゲーションメニューのバーを作るときに使われる。
flexについてはまだ深く理解していないので、また後日紹介したいと思います。
まとめ
今回の記述内容はとても簡単なんですが、参考テキストでは紹介していない大切なことが多すぎて、本当に理解に苦しみました。未だにdisplay要素と疑似要素を覚えられずにいます。
今後は実践を繰り返しながら覚えていくことになると思います。わからなくなったら、参考サイトを見て勉強していきます。
以下今回のBefore Afterです。
After
サイト右上にメニューが付いたのがわかると思います。ヘッダーの色が変わっているのは気分で変えただけのものを直しただけです。
ほとんど変化はありませんが、ここには覚えておくべき要素がたくさん詰まっています。
引き続き勉強していきます。
リンク設定＆相対パスと絶対パス！border-bottomについても
今回の記述は主に補足事項に対するリンク指定でした。
リンク設定
今回の記述は以下の通りです。
HTML
<aside>
<h1>RELATED POSTS</h1>
<ul>
<li><a href="news02.html">新緑の森を楽しむ</a></li>
<li><a href="news03.html">雪を楽しむ</a></li>
</ul>
</aside>
/*関連記事へのリンク*/
aside {
border: solid 2px #d6c588;
border-radius: 5px;
padding: 10px;
background-color: #edede3;
margin-top: 40px;
}
aside h1 {
font-family: 'Chango',cursive;
font-size: 18px;
color: #c39f4a;
border-bottom: dotted 1px #c39f4a;
}
aside ul {
list-style-image: url(listmark.png);
}
aside a {
color: #000000;
text-decoration: none;
}
HTMLの記述は少なく、CSSでの記述がメインのように感じました。
<ul>
<li><a href="news02.html">新緑の森を楽しむ</a></li>
<li><a href="news03.html">雪を楽しむ</a></li>
</ul>
ulは順番を持たないリストをマークアップする記述です。liはリストタグで、箇条書きされているものをマークアップします。今回の場合は、他のページへのリンクをマークアップしています。
aside
asideは補足事項の記事をマークアップするための記述です。
section 部門や分割された部分
article 記事
aside 補足事項
などがあります。個人的にはarticleとsectionが混同されやすいので、これから理解を深めていこうと思っています。
相対パスと絶対パスについて
相対パスとは、今いる場所（階層）を基準にして、目的地（情報）がどこにあるのか指定する方法です。
対して絶対パスは、URL（住所）で確実に目的地（情報）を伝える方法です。
絶対パス＝URLと覚えても問題ないと理解しましたが、問題は相対パスです。
ルールは4つ
- 同じ階層内にあるファイル 【ファイル名】
- 同じ階層内にある、別フォルダの中にあるファイル【フォルダ名/ファイル名】
- 今いる階層の1つ上の階層にあるファイル 【 ../ファイル名】
- 2つ上の階層にあるファイル の場合は【../../ファイル名】
言葉ではうまく説明できないので、詳しくは上記画像を参考にしてください。
4についての補足です。3つ上の階層にあったら、../がひとつ増えるだけで、階層が一つ上がるごとに../を増やせばOKです。
border-bottom
border-bottomとは、罫線を引くためのプロパティです。今回は、
border-bottom: dotted 1px #c39f4a;
と記述しました。
border-bottomには以下の値があります。
- none 罫線を表示しない
- hidden 罫線を表示しない
- dotted 点線
- dashed 破線
- solid 実線
- double 二重線
- groove 立体枠
- ridge 立体枠
- inset 立体枠
- outset 立体枠
- thin 細い罫線
- medium 中太の罫線
- thick 太い罫線
- px 数値で指定
7番から13番まではあまり使用しない傾向にあるそうです。特に7番から10番の立体枠は使用するブラウザによって見え方が異なるため、あまり使用されていません。
border-bottom: dotted 1px #c39f4a;
今回はdottedが使用されているので、点線になることがわかると思います。
text-decoration
text-decoration: noneは下線を消すという意味の記述です。本文中に【ひまわり】というリンクがありますが、これは本文中なので、目立たせる必要があります。aタグは何も記述しなければ、デフォルトで下線が入る仕様になっています。
そこで、text-decoration: noneを入れるわけです。
text-decoration: noneを記述することによって、下線を消すことができます。以下、text-decorationの値の一覧です。
none 下線削除
underline 下線を入れる
overline 上線を入れる
line-throgh 取り消し線
blink 点滅 ※主要なブラウザのサポート外のためほぼ使用しない
list-style-image: url(listmark.png)
list-style-imageは、リストタグに画像を挿入する場合に必要なタグです。今回の場合で言えば、listmark.pngという画像ファイルを表示させています。ちなみに、参考テキストが用意してくれ、と言った画像を引っ張ってこれなかったので、今回は適当なリストマークを画像に使用しています。
まとめ
今回は相対パスと絶対パスが一番やっかいな内容だと感じました。参考テキストだけでは、よく理解できなかったので、ネットで色んなサイトに行き、自力で理解した部分が大きいです。
僕の説明もかなり怪しいので、 ここのようなサイトで勉強することを強くおすすめします。
今回は勉強した内容がけっこう濃いので、しっかり覚えておこうと思います。
以下今回の成果です。
画面下部に新たに記事ができているのがわかると思います。これらは以前作った、【news02】【news03】へのリンクになっています。見た目はほとんど変わっていませんが、画面外のところで、少しヘッダー部分の色を変更してみました。
あと余談になりますが、atomというテキストエディターに乗り換えました。これは本当に使いやすいし、便利なプラグインが山盛りありますし、見た目もかっこいいので個人的にはかなり気に入っています。
引き続き勉強していきます。
