【Rails】プログラミング初心者の勉強ブログ #55
模写学習2回目。画像表示の「相対パス」で詰まってしまい、情けなかったのできっちりまとめます。カレントディレクトリを意識した「. /」と「.. /」の使い分けについて解説します。
目次
[toc]
実施内容
今後アプリ開発を行うにあたって、webサイトの「見た目」の部分の向上を少しでも図るべく実施した、今回の「模写学習」内容です。
実施目的・内容・達成条件
webサイトデザインの基礎固めを行うこと。ヘッダーやナビゲーション、フッター、各セクションの構成の組み立て方から、色使いやフォント、余白の取り方などの「デザイン」について、実際に真似して作成することにより自分の中でサイト作成時にデザインの「型」が頭に浮かぶようにするため。また、デザインの基礎固めと並行し、CSSの挙動に慣れる機会を作るため実際にコーディングを行う。なお、学習にあたり参考にするサイトは「レスポンシブデザイン」であることを条件とし、CSSでの基本的なデザインの模写の作成に加え、検証ツールで構成を見ながらレスポンシブデザイン対応までを実装できた段階で完了とする。
実施の流れ
- 参考サイト選定
- 検証ツールの「Sources」でHTMLをテキストエディタに写す
- 参考サイトを見ながら、写したHTMLの各要素を装飾
- わからなければ検証ツール「Elements」で確認しコーディング
- わかった場合も検証ツールでオリジナルのコーディングを確認し修正
- おおよそ参考サイトと同じデザインと動きになったら完成
※HTMLとCSSの作業は同時並行でも別々でも可。
今回の参考サイト
「Mitsui Fudosan Story | 三井不動産」
[blogcard url=”https://mitsuifudosan.co.jp/story/”]
成果物
【PC表示（1400px〜）】
【PC表示（700px〜1399px）】
【スマホ表示（〜699px）】
やってみて学べたこと
今回の題材は「三井不動産」という大企業が出しているサイトということもあり、JSやCSSのソースコード、image保存場所などがディレクトリ毎に細かく分けられておりました。（当たり前っちゃ当たり前ですが。）前回に比べると、どこに何が書かれているのかを理解するのが難しかったです。また、JSコードを見てみると、jQueryのプラグインである「slick」や「velocity.js」などが使われており、大企業のHPもこういったjQueryプラグインを利用してサイト作成しているんだな、っていうのが面白かったです。また、レスポンシブ対応もJSでwindow幅を取得して自動調節してて難易度高めでした。多分これは真似できないなって思いました。
プラグインやレスポンシブのこととかも書きたいですが、正直難しくて説明できるレベルにないので、なんやかんや苦戦した「画像表示」についてまとめます。
「相対パス」備忘録を以下書きます。
画像表示の相対パス
「img」タグや「background-image」など画像表示で使ってきた相対パスですが、今まで「表示されればいいや」であまり理解していませんでした。（というよりRailsだとパスほとんど使わずに画像表示される。）今回模写したサイトは、ソースコードが複数のディレクトリにまたがっており、相対パスをちゃんと把握してなかった僕は、画像表示で詰まりました。
—相対パスの「./」と「../」の使い分け、ちゃんと理解してますか。
—「カレントディレクトリ」がどこであるか、意識はできてますか。
そこらへんをきっちり考えて、理解していきたいと思います。
今回の模写では、ディレクトリ構造はこのような状態です。
「mosya02_MitsuiFudosanStory」 下のファイルで今回の模写を実施してます。「index.html」を複数のCSSファイルとJSファイルで装飾している構成です。
例えば、「index.html」に書いたimgタグで「top/img/title_logo.png」を使いたいときを考えます。
この場合、imgタグのsrc属性に「相対パス」を書き込むことになります。相対パスを書くにあたって意識する点は2つあると考えます。一つは「カレントディレクトリ」、もう一つは「. /と.. /の違い」です。
今回のカレントディレクトリは、もちろん「index.html」です。画像だと少しわかりづらいですが、「mosya02_MitsuiFudosanStory」直下に配置してます。
一方で、「title_logo.png」は「assets/top/img」下に位置されてます。
つまり、「index.html」からまず、同列にある「assets」ディレクトリへのパスを書き込み、そこから「title_logo.png」まで辿っていく必要があります。カレントディレクトリと同列への移動は「./」を使います。「./」は現在の階層へのパスです。
よって、「index.html」から、「title_logo.png」へのアクセスは、
「src=”. /assets/top/img/title_logo.png”」が正解となります。
流れをまとめるとこのようになります。
次に、「top.css」で書いた「background-image」プロパティで「title_logo.png」を使いたいパターンを考えます。
今回の場合、先程と異なり「カレントディレクトリ」は「top.css」です。そしてもう一つ異なる点があります。それは、「title_logo.png」までたどり着くためには、カレントディレクトリの一つ上の階層の「top/img」下から辿っていく必要があるということです。「top.css」は「top/css/top.css」にあるため、「top/css」下から「top」下に一旦戻ってから、「top/img」下にいく流れになります。
つまり、一つ上の階層に一旦移動しなければなりません。一つ上の階層からたどる場合「../」を使います。ドットが2つになります。
今回の辿り方の流れは以下のような感じです。
「../img/title_logo.png」が正解になります。これで「top.css」で書いた「background-image」プロパティが反映されると思います。
まとめ
相対パスで気をつけなければならない点は、
- カレントディレクトリの意識
- 「. /」と「.. /」の使い分け
ではないかと考えます。Railsフレームワーク上ではあまり気にしなくても大丈夫な画像パスですが、Rails外ではしっかり意識しないと画像表示されなくて焦ります。カレントディレクトリを意識して良い相対パスライフを送ります。
以上ありがとうございました。