角の丸い画像を作る
「角の丸い画像」といっても、要は、「1/4正円」です。GIMPを利用してこれを作成していきますが、いきなり「1/4正円」を作るのは難しいので、まずは「正円」を描き、ここから切り出す方法で作成します。
「ツール・ウインドウ」の「背景色」が「白」になっているのを確認して、「新規作成」します。縦横300px位でよいでしょう。
「ツール・ウインドウ」の「円形領域を選択する」をクリックして、「メイン・ウインドウ」内の左上の方から、「Shift」キーを押しながら、右下の方に向かって「ドラッグ」すると、「正円」の領域が選択されます。
左図のように、円が真ん中でなくても問題ありません。とにかく「正円」の領域が選択できればOKです。
選択したつもりなのに、ドラッグを離すと、領域が消えてしまう、という場合は、左側の「オプション・ウインドウ」の「モード」を確認してください。「選択領域を置換」以外が選択されていませんか？左図を参考に「選択領域を置換」モードにして再度試してください。
「正円」の領域を選択できましたら、この領域内を塗りつぶします。今回は「blue(#0000ff)」の一色で塗りつぶすことにします。
まず「ツール・ウインドウ」の「色やパターンで塗りつぶす」を選択してください。「オプション・ウインドウ」の「塗りつぶし方法」が「描画色」となっていることも確認しておきましょう。
次に「描画色」を「blue(#0000ff)」に設定します。「ツール・ウインドウ」の「描画色」をクリックすると、左図のような、「描画色を変更」というウインドウが開きますので、この中の「HTML表記」の欄に「0000ff」と記述し[Enter]キーを押すと、「描画色」が「blue(#0000ff)」に設定されます。
上記の「塗りつぶしツール」の設定が出来ましたら、選択領域内でクリックすると、左図のように「blue」で塗りつぶされます。みごと「青い正円」が出来ました。
あとは、この画像を「切り出し」たり、「サイズを調整」するだけなので、「メイン・ウインドウ」の「選択」-「なし」を選択して、選択領域を解除しておきましょう。
今度は、余分な余白部分をスッパリと切り取ります。「ツール・ウインドウ」の「切抜きツール」を選択してください。
このツールは、「開始点」から「高さ」と「幅」を設定することによって、真四角な領域を切りぬいて、それ以外の領域を破棄するという機能を持っています。まずは残したい領域の「開始点」を設定したいのですが、残念ながら、御世辞にも見易いとはいえません。
そこで「とにかく適当な領域を先にドラッグ」してしまい、「後から『切抜き＆サイズ変更』ウインドウ内で微調整する」という方法が、手っ取り早いように思います。
今回は、正確な「1/4正円」が欲しいので、上下左右がぴったりと「円に接する」様に切り抜く領域を選択してください。「開始点」をx,yの座標位置で定め、「幅」と「高さ」を同じ値にあわせます。見づらい場合は、「表示」-「ズーム」を活用して、なるべくきっちりと切り抜いておくと、きれいな「角丸」が表現できます。
次に、出来た円のサイズ調整をおこないます。今回は、20pxで角を丸めますので、直径40pxの円にします。より丸っこい角にしたい場合は、より大きいサイズの画像に適宜調整してください。
では、「メイン・ウインドウ」の「画像」-「画像拡大縮小」をクリックします。すると、左図のような「画像拡大縮小」のウインドウが開きます。
「高さ」「幅」の右側にある「チェーン」がつながっていることを確認し、双方とも40pxになるよう調整できましたら、右下の「拡大縮小」をクリックしてください。
今度は、再び「切抜きツール」の出番です。ここまでの作業が成功していれば、40px×40pxの画像になっているはずですので、「開始点」0,0から、「幅」20px、「高さ」20pxに切り抜けば、お目当ての「1/4正円」が得られる運びとなります。
では、得られた1/4正円をGIF画像として保存しておきましょう。
「メイン・ウインドウ」の「ファイル」-「別名で保存」を選択してください。「保存の方法」ウインドウが開きます。
「名前」の欄に「circle-l.gif」と記述し、「フォルダの中に保存」で保存するフォルダを選択するか、又は、「他のフォルダ」から「デスクトップ」を指定して、後から整理する方法でも構いません。ここでは、後者の方法で行います。
これで左角用の、画像が完成しました。
ここまで来ればもう一息、上記の「circle-l.gif」を少し加工するだけです。「メイン・ウインドウ」の「画像」-「変換」-「時計回りに90°回転」(又は「水平反転」)を選択すれば、左図のように、右角用の画像が得られます。
今回は、1/4正円でしたので、時計回りに90°回転でよいのですが、高さと幅の異なる角画像を利用する場合などは、「水平反転」の方が便利かも知れません。適宜使い分けてください。
では、忘れないうちに、これも「circle-r.gif」として、上記と同様に、保存しておきましょう。
以上でGIMPでの画像作成は完了です。GIMPを終了して、次のステップへ進みます。
これで、デスクトップ上にふたつの角の丸い画像が出来ました。これらを整理するために、デスクトップ上にフォルダを生成し、この中に入れておくことにします。
まずは、フォルダを生成します。デスクトップ上の何もない場所で、「右クリック」-「新規作成」-「フォルダ」をクリックすると、仮のフォルダ・アイコンが表示されますが、これに名前を付けないと後で見分けがつかなくなりますので、ここでは「it-dojo」と名前をつけます。
次に、作ったばかりの「it-dojo」フォルダをWクリックしますと、これが展開されます。ここに、デスクトップ上にあるふたつの「角丸画像」をドラッグ&ドロップします。
これで、苦労して作った「角丸画像」が整理されました。今後このフォルダの中に、HTMLファイル及びCSSファイルも格納していくことにします。
このページのTopへ
HTML,CSSファイルを作成・編集する
まずは、HTMLファイルの基本構造を作ってしまいましょう。DOCTYPE宣言は、現在もっとも縛りの揺るやかな「HTML4.0１Transitional」DTDを用います。
少し手間ですが、META要素も入れておきます。特に「charset=Shift_JIS」の記述が出現するまでは、日本語文字は使わない、というのは、文字化けを回避するためのしきたりです。
また、TITLE要素は、検索エンジン対策としても近年重要視されています。そのページで扱う内容を端的に示す語句を記述しておくとよいでしょう。
左図のように記述できましたら、一端「it-dojo」フォルダ内に、「index.html」として、文字コード「Shift_JIS」で保存しておいてください。
今回は、外部CSSファイルを用いますので、外部ファイルを読み込むLINK要素も記述しておきます。href属性値は「index.css」として、上書き保存しておいてください。
CSSの適用法は、style属性、style要素、外部ファイルの3種類があります。その中で外部ファイルを用いるメリットは、複数のページから使い回すことができる、ブラウザのバージョン分けができるなど、様々ありますが、もっとも重要視されるのは、「HTML文書とスタイルとをより分離出来る」ことにあると言えます。
今後は更に、視覚系ブラウザ以外のプログラムによってホームページが閲覧されるようになることは確実ですので、外部ファイルが標準的な記述法になっていくことが予測されています。今からこの記述法に慣れておくのが得策です。
では、上記のLINK要素に対応して、外部CSSファイル本体も作成しておきましょう。
外部CSSファイル内にコメント文などを挿入する場合で、日本語文字を使う場合は、必ず冒頭に「@Charset"Shift_JIS";」の一文(保存する文字コードによって適宜読み替えてください）を記述する必要があります。
とりあえず、これだけ記述して名前を付けて保存(別名で保存)しておきます。ファイル名は、「index.css」です。
ここまでの作業で、「it-dojo」フォルダの中身は、左図のようになっているはずです。
ここで少し、今回作成する「角丸ブロック」について解説します。
このページのTopへ
今回の「角丸ブロック」について
今回の「角丸ブロック」は、左図のように、２つのブロックレベル要素(div要素)をぴったりとくっつけたもので、「角丸」を表現する１つ目のブロックレベル要素の中に、まったく同じサイズのブロックレベル要素(p要素)をネスト(入れ子)しています。
２つ目のdiv要素は、単に１つ目のdiv要素と同じ幅(width)と背景色(background)を設定しているに過ぎません。
本来、p要素は、文章のparagraph(段落)を意味する要素ですので、このような「見栄え」だけに利用するのは適切ではないのかもしれませんが、今回は、内側にネストされている要素を見分けやすくするために、あえてp要素を利用しています。同じことを実現するためには、親要素同様、div要素を用いた方がよりよいでしょう。
それでは、本論に戻ります。上記のように、今回のケースでは、HTML内に記述する要素は、３つだけです。
先に作成した「index.html」を開いて、そのbody区内にdiv要素を２つ記述し、１つめのclass属性値に"round"、２つ目のclass属性値に"r-box"を指定してください。
class="round"の中に、中身の無いp要素を記述してください。
HTMLファイル側は、以上です。「上書き保存(保存)」しておきましょう。
続いて、CSS側を指定していきます。先に作成した、index.cssを開いてください。
まずは、全体の初期化などを行っておきます。
まず、「*(アスタリスク)」は、全ての要素を意味するセレクタです。全ての要素のmarginとpaddingを0に設定することで、ブラウザごとに異なる標準の設定を初期化しています。
また、今回のケースで登場する要素は、全てぴったりとくっついていて欲しいので、好都合です。ただし、他に要素を追加していく場合には、それぞれのレイアウトに適した、margin、paddingを設定する必要があります。
次に「ホーリーハック」ですが、これは一般に「CSSハック」と呼ばれる裏技の一つです。「CSSハック」は、文法的に正しいかどうかは別にして、特定の記述を用いると、特定の表示バグを回避できる、というものです。
今回の「*html〜」は、これを一つ入れるだけで、IEが持っている「ボックス・バグ」をなぜか回避できるという記述です。一般に、「*」をお星様に例えて、「聖なる光」よろしく「ホーリー・ハック」や、「スター・ハック」などと呼ばれています。
いよいよ、「角丸」を実現するCSSのキモとなる部分です。
まず、１つ目のdiv要素にはclass属性値"round"をつけていましたので、この要素を指定する「.round」について解説します。まず、16行目で、bakcgroundプロパティに「色 画像ファイル名 反復」を一括指定しています。続いて17行目で、「背景画像の位置指定(background-position)を指定しています。実はこれもbackgroundプロパティ値に加えることで、一括で指定することも出来ます。最後に横幅(width)を400pxに指定しています。
結果、400px幅のこのdiv要素には、背景色を#0000ff(blue)で塗りつぶし、かつ左端に「circle-l.gif」を一枚だけ張りつけている状態になります。
続いて、「.round」の中に入ったp要素のセレクタ「.round p」(20行目)に対してプロパティを設定していきます。
こちらも「.round」同様、backgroundに「transparent(透明色) url(circel-r.gif) no-repeat」を設定し、更に「top right」の位置指定も一括で指定しています(21行目)。
更に22行目では、高さ(height)を20pxに指定しています。画像サイズが20px×20pxですので、この値に設定しているわけですが、同時に子要素（p要素)が高さ指定することで、親要素(div class="round")の高さも出しています。
24行目以降は、２つ目のdiv要素です。widthとbackground-colorを１つ目と同様にしておけば、後は特に問題はありません。ただし、この要素の中に何も記述しないと、height:0；と同様に表示されるため視認できない、という理由で、今回はheightを指定しています。
いかがですか？以上で、冒頭に「こんなヤツ」と例示したような「角丸ブロック」が出来たはずです。
この技は、応用すると「浮き上がったブロック」や「段差のあるレイアウト」などを実現できます。今回の「角丸」と「段差」をこちらのサンプルで少し表現してみました。ご参考になれば幸いです。
このページのTopへ / IT道場の履歴一覧へ / トップページへ