ブログ練習帳

見出しの幅を可変にする　～親要素の幅100%で可変

リキッドレイアウトなどで、ウィンドウの横幅が変わる場合で、見出しの幅をその親要素の幅いっぱいに流動的に長さを変えたいときがあります。

見出しの背景画像は、予想される最大の長さで作成しておきます。今回、高さ57px、幅1510pxの背景画像を作りました。

(X)HTML

<div id="wrapper">

<h1 class="header1"><span>のびーる見出し</span></h1>

</div>

CSS

* {

padding:0;

margin:0;

}

#wrapper {

width:85%;

margin:auto;

}

h1.header1 {

background:url(img/h1bgimg01.jpg) top right no-repeat;/*背景画像を右端から置く*/

height:57px;/*背景画像の高さを指定*/

line-height:57px/*背景画像の高さを指定*/;

width:100%;

font-size:20px;

max-width:1510px;/*作成した背景画像の横幅*/

}

h1.header1 span{

display:block;/*ブロック化*/

font-size:40px;

color:#000;

font-weight:600;

letter-spacing:5px;

margin-right:15px;/*親要素h1の背景の右端を見せるため*/

padding-left:15px;/*右端の隙間とあわせるため*/

text-align:center;

background:url(img/h1bgimg01.jpg) top left no-repeat;/*背景画像を左端から置く*/

height:57px;/*背景画像の高さを指定*/

line-height:57px;/*背景画像の高さを指定*/

max-width:1510px;/*作成した背景画像の横幅*/

}

▼サンプルはこちら

---

まとめていうと、内側のスパンで、見出しの内容の幅に応じて、背景画像が左端から始まります。見出しの内容が終わった場所で、ぶつっと背景画像がきれてしまうので、右端の角丸が表現できてません。
親要素のh1で右端から始まる画像が置いてあるので、その部分を見せるために、スパンにmargin-rightを指定しています。この幅は、角丸が表現できる以上のスペースをとります。
すると、この分だけ、見出しの右端にスペースができてしまうので、その同じ分だけ、スパンにpadding-leftを指定して、スペースをあけて、バランスをとります。
h1の背景画像は、左端はぶつっといきなり終わっているはずですが、内側のスパンの背景画像があるので、その場所は隠れています。

ということで、伸び縮みする背景画像ができましたが、予想以上に横幅を伸ばされてしまう可能性があります。とーっても大きいモニタを持っている人がいたりすると…。そんなとき、背景画像が継ぎ足しに表示されないよう、「これ以上幅を長くしないでね」という指定をします。これがmax-widthです。ここで準備した背景画像の横幅を指定しておきます。

なんとか、できて、ほぅっ、とした見習です。

2012年1月25日1:36 AM| カテゴリー： HTMLとCSSのコード,見習い奮闘記| コメント (0)

パスの書き方っていろいろ

パスの書き方には大きく分けて3通りあります。(見習が関係ある範囲で)

1. （絶対）URL
2. スラッシュから始まる絶対パス、スラッシュから始まる相対パス、サイトルート相対パス、公開ディレクトリからの絶対パス、仮想パス
3. 相対パス

１．（絶対）URLの書き方

どこからでも同じ書き方です。たとえば
http://example.com/index.htmlからみて、

imgs2.jpgの表記は

http://example.com/img/imgs/imgs2.jpg

自分が作成していないサイト、違うドメイン名で運用しているサイトへのリンクは、この方法で行きます。

ちなみにグーグル先生へこのページからリンクするには、http://google.co.jp/

２．スラッシュから始まる絶対パスの書き方

これはいろいろ呼び名があったり、指すものが違う場合があったりして、わかりにくいですが、どうやって書いたらいいかもちょっと難しいです。普通にHTMLとかしか書かない見習のような場合、「スラッシュから始まる」ほにゃららといわれたら、これをさすことが多いみたいです。

たとえば、example.comなら、この部分を省略して、/から書き始めます。

/index.html
/img/img1.jpg

似たようなものに（サーバ）絶対パスとか、あります。サーバーのルートからの道筋を書き示しています。記述方法としては、ルートディレクトリから/で書いていきます。サーバーのコンピュータでは、全部のフォルダやディレクトリを公開しているわけではなく、たとえば、どこかの階層の下のほうにWWWというディレクトリがあって、その下層だけを公開している場合がほとんど。そういう、普段は目にすることのないディレクトリまですべて含めて全部記述していく方法です。CGIとか、非公開部分のディレクトリを参照しなければならないときくらいしか使わないらしいです。サーバーのルートかとかを、調べなければいけないので、難しいような…。

で、その普段は目にすることのないディレクトリのことは、気持ちよく割愛して、見えるところだけ、全部書いちゃえっていうのが、この仮想パスとかスラッシュから始まる絶対パスとかいうようです。ただ、スラッシュから始まる絶対パスというのは、サーバ絶対パスのことも指すようなので、間違えないようにしないと。

この「スラッシュからはじまるほにゃらら」がいわれたとき、見習が目にすることがある「公開ディレクトリからの絶対パス」なのか、「サーバのルートからの絶対パス」なのかは確認しないとマチガイが起きるかもだそうで、くわばら、くわばら。

サイトルート相対パスというのはAdobe用語だとか。Dream Weaverで使うこともできるようです。

３．相対パスの書き方

同じ階層については./をつけるかそのまま。
1つあがるには、../をつけます。

http://example.com/index.htmlからみた書き方は

./img/imgs/imgs2.jpg

もしくは

img/imgs/imgs2.jpg

imgs2.jpgからみて、

./imgs1.jpg

もしくは

imgs1.jpg
../img1.jpg
../../index.html

うう～ん。ムズカシイなあと嘆く、見習です。

2012年1月13日1:58 AM| カテゴリー： HTMLとCSSのコード,見習い奮闘記| コメント (0)

セキュリティで保護されたWebページ コンテンツのみを表示しますか？

セキュリティで保護されたWebページ コンテンツのみを表示しますか？

IE8でホームページを見てるといきなりこういうダイアログボックスがでるときがあります。SSLという暗号化を用いた通信をしているときに、一部分のみ暗号化されていないデータがあると出ます。IEでは出るけど、Fire Foxでは出ないみたい。

SSLとはSecure Sockets Layerのことで、ひとことでいえば、ホームページ関係での暗号化の方法。この方法で通信しているかどうかを確かめるには、urlがhttpではなく、httpsで始まっているかをチェックします。

URLが表示されるところに、横に鍵のマークがついたり、緑色になったりもします。

くわしい、分かりやすい説明が、ベリサイン(VeriSign)のサイトにあります。ショッピングサイトとか、個人情報を入力することが多いページでよく見かけます。ということで、SSLで暗号化通信しているページは、安心めなページだという証ですが、逆に「セキュリティで保護されたWebページ コンテンツのみを表示しますか？」というダイアログボックスがでてきちゃうとあせります。

グーグル先生に聞いてみると、このダイアログボックスが出ないようにする方法が、あちこちで紹介されています。とはいえ、インターネットオプションの設定を変更して、セキュリティのレベルを下げるのは、多少なりとも安全性を低下させるものですし、設定自体がちょっと面倒なので、見てくれる人に「この設定にしてください」とお願いするのは少々難しいような…。

いきなり「セキュリティで保護されたWebページ コンテンツのみを表示しますか？」というダイアログボックスがでたら、「えぇー、保護してないページは表示しないでください～」と「はい」をクリックしてしまいたいです、見習。

「はい」をクリックしちゃうと、変な表示になるというか、httpsでの通信でないところが、きちっと表示されないです。iマークが出て、ぜんぜん表示されないってこともアリです。

なら、ECサイトとかで、こういうダイアログが出たら、怖くなって帰ってしまうお客さまも、間違いなくいる！ということで、自分が作成に関係しているサイトでこのダイアログが出てしまったら、なんとか消したいですぅ。

こういう表示がでてしまうのは、SSLでの通信とそうでない通信が混在している場合。

具体的にどういった場合かというと、

1. httpsで始まるページで画像などを読み込んでいるときに、読み込む画像をhttpで読みにいっている場合。
2. httpで通信させるために作ったページだったのに、その前のページがhttpsでの通信だったので、そこからのリンクの記述が間違っていてhttpsのままになっている場合。

1.のときは、たとえば

https://example.com/security.html内の画像が、

<img src="/img/topimg.gif">

<img src="https://example.com/img/topimg.gif">

と書かれていればきちっと表示されますが、

<img src="http://example.com/img/topimg.gif">

になっていると、先ほどのダイアログがでます。

2.のときは本来、

http://example.com/index.html

とするはずのページが、SSLで暗号化されたページからのリンクで
https://example.com/index.htmlとなってしまっている場合です。

これは、https://example.com/security.htmlなど、httpsのページ内で

<a href="index.html">

と書かれているときになります。

これを

<a href="http://example.com/index.html">

というようにhttpから始まる絶対URLで書き直せばOKです。

ということで、なんとかでけた見習ですが、「絶対パス」「相対パス」とかいろいろなことばがでてきました。
「もう、わからない～、私、パスしますぅ」というわけにも行かないので、ちょっと整理しなきゃなぁと反省の見習です。がんばるそー。（クチだけにおわりませんように）

2012年1月12日1:51 AM| カテゴリー： HTMLとCSSのコード,見習い奮闘記| コメント (0)