リンク設定&相対パスと絶対パス!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というテキストエディターに乗り換えました。これは本当に使いやすいし、便利なプラグインが山盛りありますし、見た目もかっこいいので個人的にはかなり気に入っています。
引き続き勉強していきます。