リンクを設定する
今回は主にHTMLとCSSの両方を記述しました。リンクに関する内容です。
a hrefでリンクの設定
以下、今回の記述内容です。
/*リンク*/
a {
color: #b77d3c;
}
a:hover {
color: #ff8800;
}
HTML
<p>森の工房の隣にある畑は毎年夏になると満開の<a href="https://ja.wikipedia.org/wiki/%E3%83%92%E3%83%9E%E3%83%AF%E3%83%AA">ひまわり</a>の花で黄色く染まります。
この記述をすることによって、ひまわりという言葉をリンクに設定することができました。
このときのルールは、まず<a href="">で囲うことです。そして""の間にリンク先のURLを入力し、最後に</a>で閉じればOKです。
このときに、同一タブで表示させたいのであれば、上記の記述で問題ありませんが、別タブで開かせたい場合は、
<a href="URL" target="_blank"></a>と記述すればOKです。URLのあとにtarget="_blank"を記述すると覚えればいいと思います。
このときの注意点は、target="_blank"アンダーバーが入っていることです。これを忘れてしまうと正しく表示できなくなります。
rel=”nofollow"
rel=”nofollow”はリンク先にリンクジュースと呼ばれるSEOに大切な要素を渡さない意味や、リンク先をクロールさせない意味があります。簡単に言うと、リンク先のサイトに自分のサイトのパワーを渡さないって感じです。
被リンクすることによって、サイトはどんどん強くなっていきますので、リンク先すべてに rel=”nofollow”を入れていいと思います。
ただし、2018年6月現在、rel=”nofollow”を入れる本数もクローラーは評価の対象にしているという話もあるので、リンク先やリンク本数は厳選したほうが良いと思います。
rel=”nofollow”の記述方法は以下のようになります。
1はリンク先を別タブで”nofollowを入れる場合です。
2はリンク先を同一ページで”nofollow"を入れる記述です。
このときのルールは、
a hrefというセレクタにリンク先URLという値を””で囲って入力します。上記のように続けてセレクタを入力する場合は、半角スペースを空けて新たなtargetというセレクタを入力し、そのあとは再び"_blank"という値をで""で囲って入力すればOKです。
このルールはどれだけセレクタの数が増えても同じなので、しっかり覚えておきましょう。
linkタグ
linkタグには以下の6種類があります。
- a すべてのリンクの装飾
- a:link リンク先が未アクセス時の装飾
- a:visited リンク先がアクセス済時の装飾
- a:hover マウスホバー時の装飾
- a:focus フォーカス時の装飾
- a:active クリックしたときの装飾
ひとつのリンクに対して、上記すべての指定をすることができます。それぞれ異なる色で指定すれば、リンク先が未アクセス時の場合は赤、リンク先がアクセス済の場合は青、などなど。
基本的にはaとa:hover、a:visitedくらいしか使わないと思います。また、aタグを機能させるためには、上記の順番通りに記述する必要があります。
a:linkとa:focusを使用する場合、
a:focus {
青
}
a:link {
赤
}
上記のように入力しても機能しません。
正しくは、
a:link {
赤
}
a:focus {
青
}
と序列とおりに入力する必要があります。
まとめ
今回はやったことは大したことではないのに、no followなどlinkタグの説明が入ったので、けっこう長くなってしまいました。特にlinkタグは覚える必要があることなので、今後この記事を読み返す機会があるなぁって感じています。
以下、今回の成果です。
非常に見えにくいと思いますが、サイト上部のひまわりという言葉の色が変わっているのがわかると思います。やったことはここの色を変えただけはなく、リンク先を指定して、色を変えたことなので、混同しないように気をつけたいと思います。
記事一覧ページの作成
今回は記事一覧ページを作成しました。
今まで作ってきたページを紹介するページです。サムネの作成もこのテキストでは初めてのことです。
記事一覧ページの作成
今回はCSSを一切触りませんでした。以下今回のHTMLです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>お知らせ - FOREST STUDIO</title><link rel="stylesheet" href="style.css"></head><body>
<header>
<h1><img src="logo.png" alt="">FOREST STUDIO</h1></header>
<section>
<h1>お知らせ</h1>
<article>
<img src="sunflower-thumb.jpg" alt="">
<h1>真夏のひまわり畑 </h1>
<p>
森の工房の隣にある畑は、毎年夏になると満開のひまわりの花で黄色く染まります。ひまわりは「日輪草」とも呼ばれ、太陽に向かって花を咲かせます。大きなひまわりは背丈が2メートルを超え、見応えも十分です。
</p>
</article>
<article>
<img src="forest-thumb.jpg" alt="">
<h1> 新緑の森を散策 </h1>
<p>
春から夏にかけては、森を散策するのにおすすめの季節です。少しずつ暖かくなるのに従って、若葉が芽を吹き、花が咲き、森の中が賑やかになっていきます。夏に向かって、森が濃い緑に変わっていくのを楽しむのも一興です。
</p>
</article>
<article>
<img src="winter-thumb.jpg" alt="">
<h1> 雪を楽しむ </h1>
<p>
冬場のお楽しみと言えば、雪の中の散歩です。夏場は草木が邪魔をして入れないところにも自由に入っていくことができ、普段はとは違った景色を満喫することができます。
</p>
</article>
</section>
<footer>
<small>
Copyraight ©FOREST STUDIO,all rights reserved
</small>
</footer>
</body>
</html>
今まで使ってきたタグがほとんどなので、あえて紹介する必要はないと感じました。
まず、articleでh1ごとに区切りを入れていきます。次にarticleの最初の前とと最後の後ろにsectionを入れて、大きなブロックを作りました。そして、以前別ページで使用した画像を250×188にそろえて、サムネイルを貼っています。
altタグが空白なのは、h1で同じ内容のことを説明しているからです。
まとめ
今回はsectionやarticleタグをメインに使用して、区切りをきれいに付けた感じです。記事一覧ページなので、記事ごとに区切りを入れていきました。
画像サイズの変換は、Online Photo Editor | Pixlr Editorを使用して行いました。これを使えば、誰でも簡単に画像サイズの変換できます。
以下、今回の作成結果です。
お知らせの位置がおかしいなって思っていて、何かの間違いじゃないかな？って思ったんですが、別のページで修正するようです。全部の画像を一発がキャプチャリングできたらいいんですけど、手間が掛かるので、ここでは割愛しています。
引き続き勉強していきます。
divタグについて
今回はdivタグについて勉強しました。
ここまでテキストに記載がなかったので、ネットにある知識を集めて独学で勉強しました。
divタグとは？
divタグを言葉で説明すると、特別な意味を持たない特定のブロックとなります。
もっと簡単に言うと、【こっからここまで！】という指定です。
AからBまでをまとめるためにdivタグを使う感じですね。
実際の記述方法を例に挙げます。
<h1>はじめてのdivタグ</h1>
<p>こんなの全然理解できねえよ…</p>
上記のタグを全部赤文字で表示させたいとします。そこでdivタグの登場です。
<div class="sample01">
<h1>はじめてのdivタグ</h1>
<p>こんなの全然理解できねえよ…</p>
</div>
そしてCSSで以下のように記述します
.sample01 {
color: "red";
}
ポイントはクラス名【sample01】の前に.をつけることです。あとは通常のCSSの記述でOKです。
そうすると、
はじめてのdivタグ
こんなの全然理解できねえよ…
上記のように表示させることができます。
div idとは？
同じdiv系列にdiv idというタグがあります。div classとdiv idは非常に似た性質を持っています。div classと同様に、特定の記述をマークアップするために使用しますが、div classは同一ページ内で何個も使用できます。ですが、div idの場合は同一ページ内で一つしか使用できないルールになっています。
div idのidはページ内での住所を表しているので、ページ内に同じ住所が何箇所もあったら、それは不自然ですよね。だからdiv idは同一ページ内でひとつしか使えない！って感じです。
もっと言うと、div id="sample"というタグがひとつページにあったとします。でももう一つdiv idタグを記述する必要がある場合、
div id="sample2"と記述すれば問題なく使用できます。なお、このときつけるクラス名は指定している範囲になるべく関連しているものが推奨されています。指定している範囲が、ランキングテーブルなら、
div id="ranking"とする感じですね。
まとめ
今まで何でdivタグの記述がなかったんだろう？と疑問に思うくらいdivタグは使っていくことになります。ここの理解が浅いとのちのち大変なことになると思うので、しっかり理解しておきたいと思います。
ページを増やす方法
今回から新しくnews02とnews03というファイルを作り、2ページ増やしました。
ページの増やし方
ページを増やすのはとても簡単で、新しいHTMLファイルを作り、従来と同じフォルダ内に保存すればいいだけです。同フォルダ内のCSSが適用されるので、新たにCSSの記述は不要です。
以下、今回の記述内容です。
HTML
【news02】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>新緑の森を散策 - FOREST STUDIO</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1><img src="logo.png" alt="">FOREST STUDIO</h1>
</header>
<article>
<h1>新緑の森を散策</h1>
<figure class="photo-center">
<img src="forest.jpg" alt="新緑の森の中は葉が生い茂り、木漏れ日を受けて眩しく輝いています。">
</figure>
<p>春から夏にかけては、森を散策するのにおすすめの季節です。少しずつ暖かくなるのに従って、若葉が芽を吹き、花が咲き、森の中が賑やかになっていきます。夏に向かって森が濃い緑に変わっていくのを楽しむのも一興です。</p>
</article>
<footer>
<small>Copyraight ©FOREST STUDIO,all rights reserved</small>
</footer>
</body>
</html>
【news03】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>雪を楽しむ - FOREST STUDIO</title><link rel="stylesheet" href="style.css">
</head>
<body>
<header> <h1><img src="logo.png" alt="">FOREST STUDIO</h1></header>
<article>
<h1>雪を楽しむ</h1>
<p>
冬場のお楽しみと言えば、雪の中の散歩です。夏場は草木が邪魔して入れないところに自由に入っていくことができ、普段をは違った景色を満喫することができます。
</p>
<h2> 雪山で注意したいこと </h2>
<figure class="photo-left">
<img src="winter.jpg" alt="山の木々は樹氷で真っ白になります。"> </figure>
<p>楽しいとはいえ、雪山では急な斜面を登るのは大変ですので、緩やかな斜面を選んで登るようにします。また木の根元は雪が解けていることが多く、近付くと危険ですので注意が必要です。
</p>
<h2>雪原で注意したいこと </h2>
<figure class="photo-left"> <img src="snow.jpg" alt="白い雪原の上には木の影が面白い模様を描きます。">
</figure>
<p> 雪原は平らで見晴らしもよく、散歩するには最適なエリアです。ただし、くぼみのあるところには小川が流れている場合が多いので注意してください。 </p>
</article>
<footer>
<small>Copyraight ©FOREST STUDIO,all rights reserved</small>
</footer>
</body>
</html>
h2 {
clear: both;
border-bottom: solid 5px #c39f4a;
margin-top: 30px;
}
以上が今回の記述内容です。
HTMLに関してはほとんどがコピペなので、特に難しいポイントはありませんでした。文章を入力するのが面倒に感じたくらいです。
news02に関しては、ずっと作ってきているnews01とほとんど似たようなページ構成になっているので、説明は省きますね。テキスト量が減ったくらいしか変更点はありませんでした。
news03は、画像が2枚になり、新たにh2という小見出しを記述しました。したがってh2に関する記述がないため、新たに作る必要があります。
h2 {
clear: both;
border-bottom: solid 5px #c39f4a;
margin-top: 30px;
}
以上が新たに追加したCSSです。
border-bottom: solid 5px
によって、h2の下に5pxの罫線を付けました。#c39f4a;はカラーコードですね。
clear: bothは回り込みの指定を解除するための指定です。
margin-top: 30pxはh2の上部分に余白を持たせるための指定です。
まとめ
今回から新たにページを追加しましたが、作業的にはコピペがメインだったので、難しさは特にありませんでした。以前使用したことのあるclear: bothが何の指定だったのか、一瞬忘れていましたが、実際に使ってみることによって、思い出し作業ができました。
以下、今回の実績です。
news-02
news-3
news-3は画像が2枚になったことにより、すべて収まりきりませんでした。罫線が引かれていることと、小見出し（h2）が付いたこと、そして画像が2枚になっていることがわかると思います。
引き続き勉強していきます。
figcaptionで画像にタイトルをつける！
今回はHTMLしか触りませんでした。以前指定したタグが生きているので、HTMLだけで問題ありませんでした。
figcaption
今回の記述は以下のとおりです。
<figure class="photo-center">
<img src="sunflower.jpg" alt="青空とのコントラストで黄色いひまわりが眩しく輝いています。">
<figcaption>夏のひまわり畑</figcaption>
</figure>
figureクラス内にfigcaptionで囲ったタイトルをつけることによって、画像の下にテキストを表示させることができます。
今回は以前記述した、text-align: centerが生きているため、テキストが画像の中心に来るように指定されています。
まとめ
figcaptionで囲う位置によって、表示のされかたが異なります。
<figure class="photo-center">
<figcaption>夏のひまわり畑</figcaption>
<img src="sunflower.jpg" alt="青空とのコントラストで黄色いひまわりが眩しく輝いています。">
</figure>
上記のようにすると、画像の上にテキストが来るようになります。
今回のBefore Afterです。
Before
After
画像の中心にテキストが表示されているのがわかると思います。
HTMLはCSSと異なり、記述した位置によって表示が異なるので、より直感的に操作できるなって感じました。figcaptionはfigureクラス内でしか使う場面がありませんが、今回のように画像付近にテキストを挿入する機会は多いと思うので、しっかり覚えておきたい記述です。
それでは引き続き勉強していこうと思います。
background-imageで背景の指定をする
今回はbackground-imageを使って背景の指定をしました。
background-image
以下、今回の記述です。
body {
font-family: "メイリオ","Hiragino kaku Gothic Pro",sans-serif;
background-color: #edede3;
margin: 0;
background-image: url(back.png);
}
background-imageというセレクタにurl(back.png)という値を記述しています。ここで疑問に思ったのが、直接back.pngと記述したらあかんの？ってことです。
url(back.png)と記述しなければ、正しく表示されないんです。今までと少しルールが異なるので、CSSで画像を表示するときは、url()を忘れずつける必要があります。
まとめ
今回は簡単な記述で大きくサイトが変更できるので、使っていて楽しい記述です。ただ、画像ファイルを同一のディレクトリ内に入れておく必要があるので、背景画像を変更したいときは、同じフォルダ内に入れておくことを忘れないでおきましょう。
今回のBefore Afterです。
Before
After
背景部分に横縞が入ったのがわかると思います。こんな感じで好きなように背景を指定できます。
小さな画像をrepeatで表示されているだけなので、
background-image: url(back.png)
background-repeat: no-repeat
と記述すると、画像が単体で表示されます。
background-repeat: repeat-xと書くと横方向に
background-repeat: repeat-yと書くと縦方向に
リピートが効くようになります。
この調子で引き続き勉強していきます。
ロゴ画像の設定
今回はheaderにロゴ画像の設定を行いました。
ロゴ画像の設定
以下、今回の記述です。
header h1 {
font-family: 'Chango', cursive;
font-size: 24px;
width: 900px;
margin-left: auto;
margin-right: auto;
}
header h1 img {
vertical-align: -10px;
margin-right: 5px;
}
HTML
<header>
<h1><img src="logo.png" alt="">FOREST STUDIO</h1>
</header>
赤字の部分が今回追加した記述になります。
vertical-align
vertical-alignとは、画像をテキストに対して、縦方向の位置を指定するプロパティです。今回の場合で言えば、ロゴマークをどこ基準に表示させます！っていう宣言ですね。今回の指定は、テキストのベースライン（中心）から5px下がったところにロゴマークを指定し、ロゴとテキストのセンターが合うように指定しました。
alt=""
今回altに値を指定しなかったのは、ロゴ画像の横にサイトタイトルがあるからです。前後の画像と同等の内容がある場合は、alt属性の値を省略して記述できます。しかし、これは省略してもいいだけであって、SEO目線から言うなら、確実にサイトタイトルを入れておいたほうがいいでしょう。今回は参考テキストに沿っていく形で進めていくので、このまま進行します。
まとめ
今回新たに登場した記述は、vertical-alignです。テキストに対して、縦方向の位置を決める記述で、pxだけではなく、以下の値も使用可能です。
top 行の上辺と画像の上辺を揃える
text-top 文字の上辺と画像の上辺を揃える
middle 文字のミドルベースラインと画像中央を揃える
baseline 文字のベースラインと画像の下辺を揃える
text-bottom 文字の下辺と画像の下辺を揃える
bottom 行の下辺と画像の下辺を揃える
px ＋値で上方向、-値で下方向に指定できる
おそらくほとんどのケースでmiddleで対応できると思いますが、以上のことを覚えておいて損はないと思いました。
今回のBefore Afterです。
Before
After
headerにロゴが付いたのがわかると思います。実際の指定はとても簡単でしたが、微調整する意味でvertical-alignを使用しました。vertical-alignを使用しなかったら、もっと簡単な記述で、これに似た表示をさせることができます。
引き続き勉強をしていきます。
