🚀

【5日目】絶対パス・相対パス

2023/11/11に公開

初心者

tech

HTMLでアウトラインを整えていく

HTMLでアウトラインを整えていきます。

コメントアウト

コードを記述する中でメモを残しておきたい場合、コメントアウトが使えます。

<!--ここはヘッダーです-->

「そもそもこのコードってなんで書いてんの？」と疑問にもたれそうだなと思ったら、迷わずコメントアウトで引き継ぎをします。

pタグ

pタグは、文章を段落にするためのタグです。

    <p>
      PHPをマスターしたらプロダクト開発ができるかもしれません。
    </p>

hタグ

hタグは、見出しを意味します。

    <h1>見出しです</h1> 
    <h2>見出し2です</h2>

ul・ol・liタグ

ulタグは、箇条書きをするためのタグです。
olタグは、番号付きの箇条書きをするためのタグです。
liタグは、ulやolとセットで使われるタグです。

    <ul> 
      <li>明日は晴れです</li> 
      <li>明後日は雨です</li> 
      <li>週末は曇りでしょう</li> 
    </ul>

    <ol> 
      <li>ふたを開ける</li> 
      <li>お湯を注ぐ</li> 
      <li>ふたを閉める</li> 
      <li>3分待つ</li>
      <li>おいしく食べる</li> 
    </ol>

hrタグ

hrタグは、水平線を表示させるためのタグです。

    <hr> 
    <h2>午後のニュース</h2> 
    <p>市内の猫カフェから猫が脱走しました。</p> 
    <hr>

brタグ

brタグは、文章を改行させるためのタグです。

    <body> 
      <p>国道1号線が交通事故の影響で渋滞しています。<br>迂回路は県道48号線です。</p>
    </body>

divタグ

divタグは、要素をグループ化させるためのタグです。

    <div>
      <h2>午後のニュース</h2> 
      <p>市内の猫カフェから猫が脱走しました。</p> 
    </div>

tableタグ

tableタグは、表を作るためのタグです。

    <table border="1"> 
      <tr> 
        <th>平日</th> 
        <th>土日祝日</th> 
      </tr>
      <tr> 
        <td>Aランチ：唐揚げ定食</td>
        <td>Aランチ：コロッケ定食</td>
      </tr>
      <tr> 
        <td>Bランチ：ハンバーグ定食</td>
        <td>Bランチ：海鮮丼</td>
      </tr>
    </table>

ファイル指定の方法について

どのフォルダにどのファイルが格納されているのか、覚えている人は多くありません。

そんな時に役立つのが、「パス」です。

絶対パス

絶対パスとは、どのフォルダにファイルが格納されているのかを「URL」で表示させることができる＠パスです。

例えば、以下の画像の「logo.svg」を表示させたいとします。

とすると、パスは以下のようになります。

<img src="https://www.sejuku.net/assets/images/logo.svg">

要は

sejuku.netの
assetsの中にある
imageの
logo.svgを表示させて欲しい

と言う命令になります。

相対パス

相対パスとは、今開いているHTMLファイルを基準として、どのフォルダにどのファイルが格納されているのかを示すことができるパスです。

絶対パス同様、以下のように「logo.svg」を「company.html」で表示させたいとします。