Fab51SearchHomeindexWeb製作ドメイン取得インターネットInternetindexスタイルシートスタイルシート2アクセス統計0511統計0701統計0709統計0807統計0907はじめてのスタイルシート文字の色やサイズなどをHTMLタグで指定するのは効率が悪い。「デザインはいらない」と割り切って「淡々と文章を書く」という解決方法もある。訪れた方に興味を持ってもらえるようなデザインも大切な要素のひとつではないか...と思います。文章をHTMLタグによって「見出し」とか「段落」とかに区分けすることで「文書の構造を明確にすること」が本来の役割。この区分けをマークアップと呼び、そのルールがHTMLの記述方法です。HTMLでは文書の構造だけを記述し、「デザインの指定をしないこと」からスタイルシートの導入が始まります。Designing2005/11を見つけ、発売中に紹介したいと思い急いで書いたものです。--このページを公開した時は、記事の紹介がこの部分にありましたが、雑誌発売から随分と経ったためページの後半に移しました。2007年2月号の情報も追加しました。日本語の文章を整理する実際にインターネットで文書を公開する時には、あとで「見出し」をつけることを意識しながら、文章を内容ごとにいくつかのブロックに分けます。リスト(箇条書き)として表したほうが良い部分は、項目ごとに改行しておくなどの日本語の文章の整理をします。マークアップを行います。HTMLマークアップにおいて、文字の色や配置などの指定はしません。このためHTMLに対応したエディターを使えば単純で簡単な作業です。)、あるいは単に「スタイルシート」と呼ばれるものです。スタイルシートを使う一番の目的は文書の内容と、その表現(デザイン)を分離することにあります。HTMLでは文書の構造だけをマークアップし、各ページに共通のスタイルシートでデザインを指定すれば、サイト全体のデザインを変更する場合でも、その変更は基本的にCSSファイルの変更だけで行えます。鋭い指摘を受けてしまいました。『普通サーバーは借りないし、HTMLも使わない。ホームページを作るなら、それが一番の近道に違いない。...『じゃ、このページを読む必要もないね』と(2008/04/04)はじめてなら、HTMLをあれこれ試すより「文を書け」というわけである。これもその通り、半年か1年くらいは無料のレンタルBlogで「とりあえず文を書いてみる」のも良いかもしれない。「とりあえず作ってみる」とか「気軽に楽しみたい」ならとても便利なサービスです。無料Blogサービスなどの利用は「不満があれば基本的に別のサービス提供会社に移るしかない」わけで、長期間継続してブログやホームページを運用するつもりなら、完成に時間はかかるけれど、自分で作ることのメリットも少なくありません。...というわけで、このページは『ホームページを作ろうと思ったら、普通、レンタルサーバを借りてBlogなどをインストールして使うよね』と考える普通でない方のためのエントリーページということで!。文字の色やサイズをスタイルシートに任せるだけでなく、ページ全体の配置もCSSを使って行うことができます。下のようなページを作るとき、従来はHTMLのtableタグを使って内容を配置するのが一般的でした。本来tableタグは表を作るための物であって、文章をレイアウトするために使うのは避けるべき、とされています。そこでレイアウトもCSSで行うようにすれば、必ずしもtableによる配置を必要としません。divタグでブロック化CSSによるレイアウトを使う1つの方法として、HTMLでマークアップする時、ページは「ヘッダ」、「コンテンツ」、「フッタ」からなると決めてしまい、さらにコンテンツはその内容よってに「メイン」と「サブ」に分けるなどのように、文章をdivタグでブロック化し、それらを識別できるようにid属性で名前を付けます。これによりページ全体の構成を明確にするとともにCSSの適用を意識したマークアップができます。CSSではこの各idごとに配置を指定し、さらに各idに含まれるHTMLタグを狙い打ちするように、つまりCSSの適用範囲を各id内のタグに限定して、色やサイズなどのデザインを指定します。これによりHTMLのマークアップは比較的単純でも、「ヘッダ」や「コンテンツ」などのブロックごとに同じHTMLタグを別の表現にすることが容易になります。CSSファイルはセレクタ(CSSの適用範囲を指定する部分)が結構複雑になってしまいますが、その適用範囲が絞られていますから修正はそう難しくはありません。id属性HTMLタグには、headerタグとかmainタグのような物は用意されていません。divタグは『単にブロックであること』を示すHTMLタグで、これに属性としてid="header"とかid="footer"などを持たせることで、特定のブロックをCSSから識別できるようにするという考え方です。このheaderやfooterなどは属性値と呼ばれ任意のキーワードです、hajimeやmu-su-biなどでも差し支えありません。ユニークな属性値より、多くの方が使っているような「ありふれたキーワード」のほうがなにかと便利です。id属性はCSSを適用する時の目印のような物と考えておいてください。Analysisという大藤幹氏の連載記事を読むまで知りませんでした。この時「いままでの私のスタイルシートの使い方は何だったんだろう!?」というくらいにショックを受け、急遽Fab51のスタイルシートを全面的に見直しました。ところが、あとで調べてみると比較的一般的な手法だったようで、早めに調べておけば悩まずにすんだものを...と反省しました。HTMLの記述は、単純で規則性のある物にHTMLのマークアップは、単純な構造(文章の表現に関わるHTMLタグを省いた)にすることで、CSSの適用がし易くなります。逆に言うと、不規則な、あるいは複雑なHTMLマークアップが行われているページではCSSを効果的に適用することが難しくなります。文法的に正しいHTMLマークアップであることも重要です、そうでないとスタイルシートの適用結果が予想できません。現在HTMLに近い構造のXHTMLがBlogでも使われていますから、CSSがある程度わかればBlogの見栄えを変更することも、そう難しいことではありません。CSSデザインWeb製作(ホームページなど)でCSSを使ってみたいが、どこから手をつけてよいかわからない...という方も多いと思います。この特集『はじめてのCSSデザイン』には、スタイルシートの役割から定番となっているスタイルの使い方まで、非常に濃い内容の特集になっていました。特集は、全24ページで組まれており、ページ配置の手法などCSSの使い方を具体的に示すサンプルを中心に解説されており、CSSを少し使ったことがある方には参考になる部分も多いと思います。特集記事のライターは大藤幹氏。ベストチョイス』という特集が28ページで組まれていました。この特集記事の約半分は「大藤幹」氏によるもの。今回の特集では「どのようにすれば特定のブラウザにのみ有効なCSSを読ませられるか」という裏技の最近の傾向とか、基本的な2段組、3段組についての解説があります。2月号のスタイルシート特集CSSによるレイアウトはお勧めできない!?CSSを使って配置をする方法はいくつかありますが、配置されるブロック内のHTMLタグに対するCSSの適用方法が適切でないと、表示が大きくくずれるなどの問題が起きたりします。CSSの適用方法が適切であってもブラウザによっては正しく表示されないこともあり、一筋縄ではいきません。IE6以前ではCSSで多少小細工をしないと正しく表示されない部分ができたりします。自分がIE7以降を使っている場合でも、御覧になる方にIE6以前のブラウザを使っている方が含まれていれば表示確認は必要であり、さらにFireFoxなどのIE以外のブラウザでの表示も確認しないと、どんなふうに表示されるかわかりません。従来のtableを使ったレイアウトなら多少の表示の差ですんでいたのに、CSSによるレイアウトにしたら、特定のブラウザで表示が大きく崩れるということもよくあります。このため現在tableレイアウトで組んでいるページを一気にCSSによるレイアウトに置き換えるのはお勧めできません。tableによる配置を最小限になるようにHTMLの構造の改良を行うだけにして、その段階でCSSでどんな表現ができるのかを試すこと、そしてスタイルシートに慣れてから、CSSによる配置が可能かどうかを試してみるほうが良いと思います。実はここでも「tableによる文字などの配置を最小限にしてある」という段階で、いまだtableレイアウトのページとCSSによるレイアウトのページが混在しています。CSSレイアウトに急いで「表示が大きくくずれる」くらいならそのままのほうが良いわけです。...方向性としてはサイト全体をCSSによるレイアウトに置き替えていこうと考えています。2008/04/04改訂2008/03/22改訂2006/02/06改訂2006/01/25改訂2006/01/08公開:2005/11/10次のページで実際のCSSサンプルを使って、CSSの働きを説明します。