⭐相対パス：
自分自身を基準に、そこから見てどの場所にあるファイルですかというのが相対パス。
三軒左隣に届けてね、という感じ。
⭐絶対パス：
世界中のどこからみても、そこにあるというのが絶対パス。京都府京都市左京区●●という感じ。ネットではhttp://から書く。
基本的に、自分のサイト内でリンクさせるときは相対パスで書くのが普通。
⭐上の階層を見に行くときの書き方
../css/style.css
ドットドットスラッシュ：
一度、そのフォルダ（箱）を出る感じ。
相対パスは理解していないと画像やPHPでも使うので、自分でいろいろ作って理解しておきましょう。
いま、<h2>の項目が2つあって（ドライブと釣り）、その両方の背景がcssで色がついている。
→
ドライブの文字だけ背景の色を変えたい。
この時、かたっぽだけ<h3>にするのはよくない。なぜなら構造が変わってしまうから。
→
構造は変えずに色だけかたっぽかえたい
→
そういうときは、属性を使って名前をつけよう。
付ける方法が２つある。
⭐id属性と、
⭐class属性
これは目印をつけるだけで構造は変えない。
hobby.htmlを修正
<h2 id="drive">ドライブ</h2>
style.cssを修正。これを付け足す。
#drive{
background:olive;
}
hobby.html
style.css
⭐id属性：
同じid名は、1つのhtml上にダブって存在してはいけない。（1つだけ）
セレクタの書き方は、#id名
⭐class属性：
同じclass名が、１つのhtml上に複数存在してもいい。
セレクタの書き方は、.class名
どういうときにclass属性が生きるかというと、
例えば<h2>の1つめと、<p>の２つめの文字を緑にしたい
→
<h2>と<p>は違うものだが、classを使えばいっぺんに同じようにグリーンにできる。
hobby.html側
<h2 id="drive" class="green">ドライブ</h2>
<p>ドライブが好きな理由を書くところやで</p>
<h2>釣り</h2>
<p class="green">釣りが好きな理由を書くところですよ</p>
style.css側
.green {color:#007042;
}
これでいっぺんに文字色を緑にできる。
❤chromeで右クリックして、一番下の「検証」を押すとhtmlの構造をみることもできる。
好きなサイトの構造をそうやってみて、勉強するといい。
このアイコンを押すと、また別の方法でどういう風になっているか表示できる。
