HTMLコーディング」カテゴリーアーカイブ

絶対指定と相対指定

サイト制作をしている中ではよく出てくる言葉ですが、レスポンシブに対応させる場合には考えておきたい部分でもあります。

【絶対指定と相対指定】
この絶対と相対というものに関しては、数値であったりパスであったりします。まずはパスのお話からしていきましょう。

「ディレクトリ構成」の中で参照させるパス(リンク先や画像指定)を絶対パスで書くのか、相対パスで書くのかという違いがあります。
結論から言えば、どちらでも同じ挙動をしますので特に気にする事はないでしょう。つまり上記の違いを簡単に言えば、内部だけで場所を記述するか、全体から場所を記述するかの違いです。

<相対指定>
内部リンクを指定する際に記述される方法です。
例えば、コンテンツAから同ディレクトリのトップページへ戻る場合には下記のようになります。

<a href="index.html">トップページへ</a>

画像を「images」ディレクトリから呼び出す際も、相対指定が使われますね。

<絶対指定>
外部も含めた全体から読み込む、またはリンク先を指定する方法です。自分のサイトから他のサイト(外部)へリンクさせる場合に使います。

<a href="http://example.com">外部サイトへ</a>

この外部リンクの他に、画像を違う場所から貼り付ける方法(直リンク)も絶対指定が使われます。直リンクはサイトによって禁止されている所も多くありますので利用規約等を確認しましょう。この直リンクは全てのリンクをしているサイトからアクセスされる理由から、アクセス過多になり負荷がかかるので禁止しているサイトがあります。

例えばAというサイトとBというサイトが、Xサイト(XXX.com)の画像を直リンクで指定する場合には、

<img src="http://XXX.com/images/sample.jpg">

というタグで、AサイトでもBサイトでも絶対指定で記述される事になります。
Aサイトで訪問者100人、Bサイトで同じく100人のアクセスがあった場合、Xサイトには200アクセスの負荷がかかります。同時にアクセスされる可能性は少ないのですが、「画像は保存してからご使用下さい」と書かれている事もおおくあります。

これら絶対指定する際のアドレスに当たる部分は、URLではなくURIと言われます。このURLとURIの違いは結構マニアックなので、また別のサイトでも参考にしてみてください。

この絶対指定と相対指定ですが、外部リンクに関する時だけの違いかと思われがちですが、そうでもありません。
ネットショップ運営では独自認証SSLを設定する場合が普通ですが、その場合にも通常の非SSLページとSSLページを分ける場合にも使用します。
最近は常時SSL化の流れが増えてきていますので、全ディレクトリをSSL配下に置く事も珍しくなくなってきています。

例えばトップページから問い合わせフォーム(contact/index.html)へ移動する場合

(通常・・相対指定)
<a href="contact/index.html">お問い合わせ</a>

(SSL配下・・絶対指定)
<a href="https://www.yoursite.com/contact/index.html">お問い合わせ</a>

このように区別してリンク設定をする場合もあります。

【記述に関する絶対指定と相対指定】
リンクだけでなく、レスポンシブデザインにする際には特に気をつける部分で、数値単位などを絶対値で記述するのか相対値で記述するのか非常に重要な部分です。

例えば文字サイズは「pt、px、em、%」などを、幅や高さなどは「px、mm、%」などを使用することがあります。この中でも「pt、mm」は絶対指定、その他は相対指定と言われています。
「px(ピクセル)」は絶対指定だという解釈もありますが、解像度に依存するため相対指定として考える方が妥当という見方もあります。

例えばPCサイトでは横幅980px~1180px程度で制作される場合が多いでしょう。しかしこれをスマートフォンで見ると、基本縦は320~375px程度、横向けでも480~680px程度になると思います。ですから字が小さくピンチアウトや画面移動をしないと読むことが難しくなります。
そこで縦にも横にも対応するように、「width: 100%」などの相対指定で変化させるようにします。両サイドに余白を設けたい場合には、「width: 96%; margin: 0 auto;」などで中央寄せにする対応が必要です。

フォントサイズも、11ptなどで固定する場合もあれば、デフォルトサイズをブラウザ基準にしておいて全体を89%(デフォルト12pt換算で10pt程度)で可変的に対応させておくと見やすいサイト作りができます。
レスポンシブ対応には、まだまだ様々な基本があり、これらをある程度理解しながら作り込むと自由にレイアウトができるようになります。

Sponsered Link