制作者の活動(PR)。

アイドル・堀北真希ちゃんにうさ耳を着けた女子大生キャラクタ。次ぎ
主な作品

人気女優をモデルにした制作者の創作キャラクタのイラスト例とアニメーション動画

ポジショニングべからず集。

ポジショニングは非常に強力な機能を持ちますが、そのため、本来許されないことまでやってしまう恐れがあります。

本来、CSSは物理要素の氾濫により互換性の無いHTMLが氾濫したことに対する対策として導入されました。このため、

事が肝要になります。以下の行為はCSS非対応の環境での閲覧性に致命的な悪影響を及ぼすものであり、絶対にやってはいけない事です。

ポジショニングべからず集・目次。

装飾効果を狙った文字の重ね合わせ(ズレカケ影文字)はすべからず。

文字に影を付けるのに例えば、以下のようなHTML文書とCSSスタイル定義ファイルを作ったとします。

HTMLソース。
<h1>
    <span class="back">しらぎくさいと</span>
    <span class="fore">しらぎくさいと</span>
    </h1>
CSSプロパティ定義。
h1 {
    position: relative;
    left: 0;
    top: 0;
    color: #0c0;
    }

h1 span.back {
    position: absolute;
    left: 2px;
    top: 2px;
    color: #000;
    }

h1 span.fore {
    position: absolute;
    background: transparent;
    left: 0;
    top: 0;
    }

        …

このようにHTML文書とCSSスタイル定義ファイルを記述する事で、CSS対応環境では『しらぎくさいと』の文字が影付きで表示される筈です。

しかし、このHTMLはCSS非対応環境では『しらぎくさいと しらぎくさいと』という、間抜けな表示になってしまいます。

影付き文字をどうしても使いたい場合は、このようなCSSの操作で実現せずに、表示させたい影付き文字を書いたロゴ画像を張る事で実現しましょう。

影付き文字に関する補足。

実を言うと、マッキントッシュのウェブブラウザ『サファリ』には、text-shadowプロパティと言う影付き文字を実現する公式なプロパティが実装されております。

また、ウィンドウズ版のインターネットエクスプローラにはフィルタと呼ばれる特殊効果を出す非公式なプロパティが実装されており、これにより影付き文字を実現する事が可能になっております。

とは言うものの、まだまだ標準的な方法は普及していないので、当面は影付き文字はそのようなロゴのGIF画像ファイルで実現するのが良いでしょう。

ポジショニングを活用した文書の順序換えはすべからず。

つまり、HTMLで前の方にある要素を、ポジショニングで後ろの方に移そうとする(或いはその逆)やり方です。

この場合、CSS非対応環境ではHTMLの順序に従った表示となるので、正しく表示されません。

順序を変えるならHTML文書側で行うべきです。

しらぎくのウェブサイト作成入門サイトマップ

ページ外へのご案内。

marguerite.site@gmail.com