情報/文字フォントのベースラインとHTMLのimg(イメージタグ)の関係

前記事の【情報/文字フォント(書体)と各種ライン】で触れたベースラインは、ご覧のようなブラウザのHTML文章中に画像を入れる際(d016_icon3(T) ←例えばこんな感じ)にも関連があります。
d019_1
▲ベースラインの位置。

今回はそのことと、CSS(カスケーディングスタイルシート、通称スタイルシート)によるそれの調整について書きます。
(HTMLとそのタグやCSSに関する全般的なことは他サイト様にゆずり、文字フォントのベースラインがらみの部分のみさわりだけ触れます)

 

H

TML文書中に画像を入れる時、ベーシックな方法としてHTMLタグの<img>を利用します。
例えば当サイトのバナーを利用した↓このようなソースなら、

abcdefghijklmnopqrstuvwxyz<img src=”http://kane-to.com/wp-content/uploads/2015/03/kane-to_banner0.gif” />かねト商店バナー(200x40px)

↓このように表示されます。

abcdefghijklmnopqrstuvwxyzかねト商店バナー(200x40px)

もう一つ、もっと天地が小さい画像では、↓このようになります(ソースは省略)

abcdefghijklmnopqrstuvwxyzかねト商店バナー(88x31px)

さらにマニュアルやヘルプ文書でありがちですがアイコン程度の大きさを文書に内に入れ込むと、冒頭でも挙げたように↓こちら

abcdefghijklmnopqrstuvwxyzd016_icon3(T)ツールアイコン(Photoshopの文字ツール)

※お使いのブラウザの設定等それぞれの環境により見え方がまちまちなので、私の環境のスクリーンショットを貼ります。
d020_0
▲書体はWindowsの「メイリオ」、サイズは16px程度です。

もうお分かりかも知れませんが、imgタグの属性やCSSのプロパティで特に何も指定しないと文字フォントのベースラインと画像の下辺が揃います。

 

C

SSによって、この画像の天地の位置を調整することが可能です。
前述のツールアイコンのように文書中にその文字フォントと同等の大きさの画像を入れ込みたいときに(完璧ではありませんが)便利で、vertical-alignプロパティを使います。
先の↓、
abcdefghijklmnopqrstuvwxyzd016_icon3(T)ツールアイコン(Photoshopの文字ツール)
これに対して、

.note_icon {
vertical-align: -2px;
}

このようなCSSを適用すると画像が2px下がり↓こうなります(0pxでベースラインの位置)

abcdefghijklmnopqrstuvwxyzd016_icon3(T)ツールアイコン(Photoshopの文字ツール)

※これも見る側の環境によって変わるので、私の環境のスクリーンショットを貼っておきます。
d020_1
▲同じく書体はWindowsの「メイリオ」、サイズは16px程度です。

しかしこのCSSでの微調整は、前述のとおり見る側の環境によって位置やサイズが変わるので絶対的なものではありません。
ある程度そういうものだと妥協するか、容量(読み込み時間)が増え且つ検索にヒットしにくくなりますが上のスクリーンショットのように文字フォントも含めて画像にするのが良いでしょう。

 
ちなみにvertical-alignにはmiddleというプロパティがありこれを利用し、

.note_icon {
vertical-align: middle;
}

とすれば美しくセンター揃えに出来そうですが、実はこれは前記事にも出てきたエックスハイトに対しての天地センターなので、(「-」(ハイフン)と同じように)画像は和文フォントに対しては基本下がってしまいます。
d019_3
▲和文フォントは(書体にもよりますが)基本キャップハイトの大きさなので。

asobi_pic

自前のホームページの思い出2/2

【ホームページの思い出1/2】のつづき

当時は、ホームページを見てもらいたかったら自ら検索サイトに登録するのが一般的だったと思います。
例え自動巡回ロボット系の検索エンジンでも登録手続きをしていたと記憶しています。
確かInfoseekあたりに登録しました(ちなみにGoogleはまだありませんでした)
それ以外にYahoo!にもしましたが、こちらは申請を受けてから担当者がホームページの内容を確認して登録という流れで、審査みたいなものがありました。

加えて、所謂お絵描き系の検索サイトも、以下の2箇所に登録していました。
TINAMI
サーファーズパラダイス
今日でも両サイトとも形態は多少変わったにせよ健在ですね。

お絵描き系サイトや他の方のリンク集ページに置いていただくために、↓こんなバナーを作っておくのがお約束でした(懐かしんで再現してみました)
っと過去形で書いてますが、今も使っているところはありますね。
kane-to_banner0 200x40px 256色gif
または
kane-to_banner1 88x31px 128色gif

↓そのバナーを集めた書籍やCD-ROM等も販売されてましたね。
 (自分のバナーも掲載していただき、謝礼として現物を頂戴しました)
d002

asobi_pic

自前のホームページの思い出1/2

以前のノート【このサイトの作成方法概要】でもちょっと触れましたが、
私はその昔(90年代後半頃)に、趣味のお絵かき系ホームページを持っていました。

その作成方法は、テキストエディタの秀丸でHTMLファイルを解説本片手に直接編集していました。当時から既にホームページビルダー等作成支援ソフトはありましたが、細かい調整がしやすかったのでそのようにしていました。
CSSも満足に無かったので意図に近いレイアウトにするのに苦労したものでした(スタイルシートは非推奨って風潮で、使用するなら「一部スタイルシートを使用していますので未対応ブラウザではレイアウトが崩れる可能性があります。 」といった文言をいれてたと思います)
d001
▲当時の解説本

掲示板も設置していましたが、プロバイダが提供するような出来合いのもはカスタマイズ性は高くなかったので、自前のcgiを置けるスペースを別途借りて、Perlプログラムのソースをおっかなびっくり編集し使っていました。

つづく→【ホームページの思い出2/2】

asobi_pic

このサイトの作成方法概要

概要をざっと触れるだけですが、
このサイトはレンタルサーバー上に置いたCMS(コンテンツマネージメントシステム)のWordPressを、プラグインで機能拡張したりテーマのスタイルシート等をテキストエディタでカスタマイズしてこのデザインにしています。
私は以前、趣味でサイトを作っていましたのでHTMLとCSSはそれなりにわかりますが、PHPはさっぱりなのでその辺りは見よう見まねで少しだけいじっています。
WordPress_logo

ちなみに前述のレンタルサーバーは、
このサイトのドメインkane-to.comのWHOIS情報を検索すると登録代行者でわかりますが、エックスサーバーというところにお世話になっています。
(※登録代行者が必ずレンタルサーバー業者と限るわけではありません)
ここのWordPress自動インストールと、それ関連のセキュリティを利用しています。
これ以前に2社ほど試しましたが、ここに落ち着きました。

WHOIS情報ですが、代行にしていないと独自ドメイン登録の時に入力した個人情報が丸見えになってしまいますので、注意が必要ですね。

asobi_pic