HTML5とCSS3をマスターするためのブログ

HTML5とCSS3をひたすら勉強していくブログです。ずぶの素人で中卒の僕が10年以上ぶりに勉強していきます。

リンク設定&相対パスと絶対パス!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>

CSS

/*関連記事へのリンク*/

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. 同じ階層内にある、別フォルダの中にあるファイル【フォルダ名/ファイル名】
  3. 今いる階層の1つ上の階層にあるファイル 【 ../ファイル名】
  4. 2つ上の階層にあるファイル の場合は【../../ファイル名】

言葉ではうまく説明できないので、詳しくは上記画像を参考にしてください。

4についての補足です。3つ上の階層にあったら、../がひとつ増えるだけで、階層が一つ上がるごとに../を増やせばOKです。

border-bottom

border-bottomとは、罫線を引くためのプロパティです。今回は、

border-bottom: dotted 1px #c39f4a;

と記述しました。

border-bottomには以下の値があります。

  1. none 罫線を表示しない
  2. hidden 罫線を表示しない
  3. dotted 点線
  4. dashed 破線
  5. solid 実線
  6. double 二重線
  7. groove 立体枠
  8. ridge 立体枠
  9. inset 立体枠
  10. outset 立体枠
  11. thin 細い罫線
  12. medium 中太の罫線
  13. thick 太い罫線
  14. 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というテキストエディターに乗り換えました。これは本当に使いやすいし、便利なプラグインが山盛りありますし、見た目もかっこいいので個人的にはかなり気に入っています。

引き続き勉強していきます。