スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

HomeHTML&CSS講座 > コンテンツ生成

コンテンツ生成

投稿日:2008年1月18日   レベル:初心者    ソフトウェア:PhotoShop

Step1:CSSとは
カスケードスタイルシート(CSS)の新しい機能にはレベル2とCSS2.1があります。この機能は内容生成と呼ばれ、ブラウザで作るコンテンツのことで、マークアップ言語やコンテンツのことではありません。

内容生成の一例にリストマーカーがあります。マーカーを表示する際に、マークアップ言語で使うリストアイテムのことではなく、ブラウザで自動的に生成するもので、制作者がコンテンツにマーカーを記述する必要がありません。リストがオーダーされると、インクリメンタルカウンターの下にマーカーが表示されます。カウンターの値はリストのアイテム数に対応して増えます。リストをオーダーしないと、マーカーは箇条書き記号(四角、白丸、黒丸)の下に表示されます。

Step2:マーカースタイル指定
マーカーとリストアイテムで作ったコンテンツとの距離をコントロールする機能をウェブ開発者は長年待ち望んできました。彼らの努力によってCSS2でその希望は実現し、その方法を否定しました。CSS2では機能としてマーカーオフセットとマーカープロパティ表示値を提供します。時間が経過すると、CSS2では問題対処方法として不十分だという不満が出たため、CSS2.1ではその機能が除かれました。

最新バージョンのCSS3は、まだ開発途上ですが以前と異なる方法で問題に対処します。新しい技術はコンパクトかつ簡単にマーカーを配置できます。その結果「:marker」の擬似要素に表示されます。CSS3の最終仕様が変更されない場合は、リストアイテムによるコンテンツに近いマーカーを取得するために、制作者は「li::marker {margin-right: 0.125em;}」と記述する必要があります。

Step3:内容生成の挿入
内容生成ドキュメントに挿入するには「:before」と「: after」の擬似要素を使います。このコマンドを使って内容生成をコンテンツのプロパティを経由した要素の前か後ろに配置します。

テキスト「(link)」に続くハイパーリンクをすべて印刷用にマークしたいなら、以下のルールを使うことができます。

a[href]:before {content: "(link)";}


この場合、内容の値はスペースを含まないため内容要素と内容生成の間にスペースはありません。内容生成と実際のコンテンツの間にスペースを表示させるには、以下のようにコードを修正する必要があります。

a[href]:before {content: "(link) ";}


この違いは小さいですが、重要です。

他の例として、PDFドキュメントの後ろに小さいアイコンを挿入する場合は、以下のようにコードを記述します。

a.pdf-doc:after {content: url(pdf-doc-icon.gif);}


リンクの近辺にボーダーのような他の要素を追加する場合は、以下のように記述します。

a.pdf-doc {border: 1px solid gray;}


Step4:最後に...
CSS2やCSS2.1では、リストスタイルプロパティやテーブルプロパティと同様に、内容の後ろに「:before」や「:after」を指定できません。CSS2やCSS.1で言及されている他の禁止事項は以下の通りです。

ブロックレベル要素がある場合
「:before」セレクタ、空白、インライン、ブロックやマーカーの値の対象としてブロックレベル要素があればディスプレイプロパティになります。

「:before」セレクタの対象としてインライン要素があれば、ディスプレイのプロパティとされる値は空白かインラインになります。他の値が設定されると、インラインとして解釈されます。

引用:Web Design Library著者:Webzo Studio翻訳:菊池



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング