2005年 04月 29日
ブラボー!クミコ ファンサイト|BRAVO! kumiko fan siteにて
鹿児島のsakuraさんがブログというものについて質問されているので、 ちょっと私なりに、書いてみますね〜。(ちょっと理屈っぽくなっちゃいますが・・) 【1】ブログとは最先端のウェブページである! 皆さんもご存じの通り、現在までのウェブページというのは、多くの場合HTML(ハイパー・テキスト・マークアップ・ランゲージ)という簡易言語で記述されているものがほとんどでした。最初のブラウザであるネットスケープ1.0が世に出たのが1994年ですので、プロあるいはアマが作ったかを問わず、ウェブページというものがこの世に誕生してきてから約10年超なのですが、その間、デザインの高度化やシステムの高度化など、常にめざましい勢いで進歩してきたこの世界ですが、基本的にはHTMLという非常に簡易的な言語(HTMLは一般のプログラム言語と呼ばれるものから比べたら、プログラムとは到底呼べない単純な代物・ゆえにHTMLはマークアップ言語と呼ばれます)で作られているのがウェブページなのです。(非常に簡易的な言語のために、専門の教育を受けることなく誰でもがいわゆるホームページを作ることができたわけで、そのことが、爆発的にインターネットが拡大してきた最大の理由なのです。) つまり、 ★私の処女作である1996年作のサッカー同好会のこの↓ページも、 http://www.autumn-leaves.jp/fcb/ ★私が作り出した一番美しいサイトの一つであると信じる ブラボー!クミコ ファンサイト|BRAVO! kumiko fan site http://www.autumn-leaves.jp/kumiko/ も、作り手の技術レベルやバージョンの違いこそあれ、いずれもがHTML言語で書かれています。 ところが、ブログというものは、実はHTMLから一歩進んだ次世代のウェブページの仕組みで作られています。すなわちそれは、「XHTML」+(プラス)「CSS」(カスケーディング・スタイル・シート)という仕組みです。 ●「XHTML」=構造と内容 ●「CSS」=デザイン と理解してください。 この「XHTML」+(プラス)「CSS」(カスケーディング・スタイル・シート)という仕組みにより、【構造と内容】と【デザイン】が完全に切り離されたウェブページが実現できるようになりました。したがいまして、礼子さんがしばしばデザインを大幅に替えられているように(笑)、 http://reina3.exblog.jp/ CSS(カスケーディング・スタイル・シート)を切り替えるだけで、ページの内容は全くそのままに、デザインだけを全く違ったものに切り替えることが可能になります。このことはこれからの社会にとって革命的に重要な仕組みになります。 デザインとは、何もパソコン上だけでのデザインの話ではありません。決してそれに止まらず、あらゆる出力メディアに応じた表示の仕方が可能になります。たとえば、同じ内容のコンテンツを、パソコン・テレビ・携帯・プリンター・音声リーダーなどの出力先のメディア別に違ったデザインで表示できるのです。「目の見える方にはパソコンで!目の不自由な方には音声で!」という表現が一つのコンテンツから可能になります。(いえ、既に可能になっています。) 今、ウェブ制作の世界では、この大きな波が怒濤のように押し寄せてきています。その牽引役になっているのが、今まさにネコも杓子も!個人も大企業も!いっせいに立ち上げている感のある、そう「ブログ」なのです。sakuraさんは、「レイアウトはいったいどうなるの?」って気にされているようですが、ご心配なく。すべてのブログ・サービスにはプロのデザイナーが作った、レイアウトサンプルが無数にあって、自分で好きなレイアウトデザインを選ぶと、言い換えれば、好きなデザインのCSS(カスケーディング・スタイルシート)を選択すると、どんなコンテンツの内容もそのサンプル通りのデザインで自動的に生成されるようになっています。 ところで、一般的にデザインという言葉を使う場合、具体的にはどんなデザイン要素(エレメント)がデザインというものを決定づけるのかご存じでしょうか? そうですね〜。デザインをデザインたらしめている3大要素は間違いなく下記の通りです。 (1)タイポグラフィー(いわゆる文字の形とか文字の大きさとか文字の色のこと) (2)レイアウト(いわゆる通常にレイアウトという場合のレイアウト) (3)カラー・スキーム(配色のこと) もちろん、皆さんが気にされている画像(写真)というものもデザインの大きな要素ですが、やはり(1)〜(3)の要素が非常に重要なわけです。画像(写真)が無いデザインは十分あり得ますが、(1)〜(3)が無いデザイン(特に情報デザイン・商業デザイン)はこの世に存在しえません。 で、現在のCSS(カスケーディング・スタイルシート)のレベルでは、この(1)〜(3)の要素に関して、昔からは考えられないほど作り手の意志通りにコントロールできるまでに、ウェブページをとりまく技術や環境が上がってきています。 とにかく、私がウェブページを作りはじめた10年前を考えてみれば、ブログを始めて1日や2日で礼子さんのページのようなデザインを作り出すことなんて、神業の1000倍くらい難しいことでした。いえ、神様でも不可能なことでした。 ※あ、ところで、礼子さん、文字色はすべて薄いブルーがいいですよ。あのブルーの色はとってもキレイです。あの文字色こそ、CSSを作ったプロのワザです。あの色を選ぶのが、実は礼子さんのブログのデザインで最も難しいことの一つなんです!※人間の目が感知できる色の数は1700万色と言われていますが、このCSSを作ったデザイナーが選んだ色はそのうちのただ一色です!! それと、あと文字のサイズを大きくしないほうがいいですよ〜。デザイン上文字列は文字一個一個ではなく、ある一定の面と色をもつブロックとして捉えます。またデザインはある意味、歌と同じで、声が大きければ伝わるかというと、そうゆうわけではないわけで、同様に大きい文字だから伝わるわけではないのです。 第一回終了 次回(時期未定)はいわゆるCMS(コンテンツ・マネジメント・システム)について 参考:この私のブログ「ブラボー!ブログ」で使用されている、CSS(カスケーディングスタイルシート・どうやらこのCSSは、excite blog skin a01001 っていう名前が付いている雛形のようですね。)は下記の通りです。私は比較的CSSが得意なほうなので、下記の内容はすべて読めるし、だいたいは自分で書くこともできますが(でも私より最低3割はレベルが高い人が作ってます)、これは実に面倒な作業なんです。私程度だと毎日ちょっとずつ考えながら、すべて決定するまで1週間〜はかかると思います。 とにかく、このブログのデザインを決定づけているもののすべてが下記のCSSです。 それでは、このサイトから下記のCSSをすべて外してしまったらいったいどうなるか?もうそれは確実、外したら最後、このページからはデザインと呼べる代物がすべて無くなります。さて、デザインが無くなったこのページを見てみたいですか?私は是非見てみたいです(笑)。ではそれは次回のお楽しみっていうことで・・・♪。 ・・・・・・・・ /* excite blog skin a01001 */ BODY { BACKGROUND : #000; MARGIN : 0PX; PADDING : 0PX; FONT-SIZE :12px; } BODY,TD,DIV,LI { FONT-SIZE :12px; FONT-FAMILY : VERDANA,ARIAL,SANS-SERIF; LINE-HEIGHT : 150%; COLOR : #BBB; } A:LINK { COLOR: #A0A6C1; TEXT-DECORATION: NONE; } A:VISITED { COLOR: #A0A6C1; TEXT-DECORATION: NONE; } A:ACTIVE { COLOR: #A0A6C1; TEXT-DECORATION: NONE; } A:HOVER { COLOR: #E2E6FB; TEXT-DECORATION: UNDERLINE; } DIV#TOP { BACKGROUND : #272727; BORDER-BOTTOM : 5PX SOLID #191919; WIDTH : 800PX; } DIV#LEFT { BACKGROUND : #000000; WIDTH : 190PX; PADDING : 0PX 25PX 25px; MARGIN-BOTTOM : 30PX WORD-BREAK : BREAK-ALL; } DIV#RIGHT { BORDER-LEFT : 1PX #555 DOTTED; BACKGROUND : #303030; WIDTH : 520PX; MARGIN-BOTTOM : 40PX; PADDING : 0PX 20PX 0PX 19PX; WORD-BREAK : BREAK-ALL; } DIV.HEADER { PADDING : 35PX 25PX 0PX; FONT : BOLD 12PT GEORGIA; } DIV.HEADER A:LINK {COLOR: #8E8E8E; TEXT-DECORATION: NONE} DIV.HEADER A:VISITED {COLOR: #8E8E8E; TEXT-DECORATION: NONE} DIV.HEADER A:HOVER {COLOR: #C8C8C8; TEXT-DECORATION: NONE} DIV.URL { PADDING : 0PX 30PX 10PX; LETTER-SPACING : 5PX; FONT-SIZE : 10PT; COLOR : #FFF; } DIV.URL A:LINK {COLOR: #8E8E8E; TEXT-DECORATION: NONE} DIV.URL A:VISITED {COLOR: #8E8E8E; TEXT-DECORATION: NONE} DIV.URL A:HOVER {COLOR: #C8C8C8; TEXT-DECORATION: NONE} DIV.USERMENU { MARGIN : 0PX 10PX 5PX; FONT-SIZE : 9PT; COLOR : #FFF; TEXT-ALIGN : RIGHT } DIV.USERMENU A:LINK {COLOR: #FFF; TEXT-DECORATION: NONE} DIV.USERMENU A:VISITED {COLOR: #FFF; TEXT-DECORATION: NONE} DIV.USERMENU A:HOVER {COLOR: #98A6E4; TEXT-DECORATION: UNDERLINE} DIV.PROFILE { MARGIN : 10PX 0PX; LINE-HEIGHT : 140%; TEXT-ALIGN : CENTER; } DIV.MN { MARGIN-BOTTOM : 20PX; LINE-HEIGHT : 170%; } DIV.MNTTL { BACKGROUND-COLOR : #303030; MARGIN-TOP : 20PX; WIDTH : 190PX; MARGIN-BOTTOM : 9PX; TEXT-ALIGN : CENTER; } DIV.POST { WIDTH : 519PX; MARGIN-TOP : 20PX; MARGIN-BOTTOM : 40PX; } DIV.POST_HEAD { PADDING : 1PX 8PX 2PX; MARGIN-BOTTOM : 20PX; BACKGROUND : #0D0D0D; LETTER-SPACING : 5PX; FONT-FAMILY : VERDANA; FONT-SIZE : 9PT; COLOR : #FFF; } DIV.POST_TTL { FONT : 10PT; COLOR : #ff3336; FONT-WEIGHT : BOLD; } DIV.POST_ADMIN { TEXT-ALIGN : RIGHT; } DIV.POST_BODY { WIDTH : 500PX; MARGIN-TOP : 15PX; PADDING : 0PX; LINE-HEIGHT : 160%; } DIV.POST_BODY h2{ color:#ff3336f; font-weight:normal; font-size:10pt; margin:0; } DIV.POST_BODY A:LINK { COLOR: #A0A6C1; TEXT-DECORATION: UNDERLINE; } DIV.POST_BODY A:VISITED { COLOR: #A0A6C1; TEXT-DECORATION: UNDERLINE; } DIV.POST_BODY A:ACTIVE { COLOR: #A0A6C1; TEXT-DECORATION: UNDERLINE; } DIV.POST_BODY A:HOVER { COLOR: #E2E6FB; TEXT-DECORATION: UNDERLINE; } DIV.POST_TAIL { FONT : 11PX/150% TAHOMA; MARGIN-TOP : 10PX; TEXT-ALIGN : RIGHT; } DIV.COMMENT { MARGIN-TOP : 20PX; MARGIN-BOTTOM : 20PX; BORDER : 1PX #464646 SOLID; BACKGROUND : #242424; PADDING : 15PX; PADDING-TOP : 10PX; } DIV.COMMENT_BODY { MARGIN-TOP : 6PX; MARGIN-BOTTOM : 20PX; LINE-HEIGHT : 130%; } DIV.COMMENT_TAIL { MARGIN-TOP : 8PX; MARGIN-BOTTOM : 5PX; FONT-FAMILY : VERDANA, TAHOMA; FONT-SIZE : 8PT; COLOR : #AAA; } DIV.COMMENT_INPUT { MARGIN-TOP : 20PX; BORDER-TOP : 1PX #AAA DOTTED; PADDING-TOP : 20PX; } DIV.COMMENT_LINE { BORDER-TOP : 1PX #AAA DOTTED; MARGIN : 10PX 0PX 15PX; } DIV.TRACK_TOP { LINE-HEIGHT : 170%; } DIV.ARCHIVE_HEAD { FONT-SIZE : 10PT; COLOR : #596A75; FONT-WEIGHT : BOLD; MARGIN-BOTTOM : 10PX; } DIV.ARCHIVE_BODY { MARGIN-BOTTOM : 100PX; LINE-HEIGHT : 170%; PADDING-BOTTOM : 100PX; } IMG.IMAGE_TOP { MARGIN-BOTTOM : 15PX; } IMG.IMAGE_LEFT { MARGIN-RIGHT : 15PX; MARGIN-BOTTOM : 15PX; } IMG.IMAGE_RIGHT { MARGIN-LEFT : 15PX; MARGIN-BOTTOM : 15PX; } IMG.IMAGE_MID { MARGIN-TOP : 15PX; MARGIN-BOTTOM : 15PX; } IMG.LOGO { MARGIN-TOP : 10PX; MARGIN-BOTTOM : 15PX; } DIV.BANNER { MARGIN : 30PX 0PX 10PX; TEXT-ALIGN : CENTER; } .AUTHOR { FONT-SIZE : 9PT; FONT-WEIGHT : BOLD; } .TIME { FONT-FAMILY : VERDANA, TAHOMA; FONT-SIZE : 8PT; TEXT-ALIGN : LEFT; } .SMALL { FONT-SIZE : 8PT; } .TXTFLD {FONT-SIZE:9PT;COLOR:#000; BORDER:1PX SOLID #666678; BACKGROUND:WHITE} DIV.CAL_TOP { WIDTH : 190PX; BACKGROUND-COLOR : #303030; MARGIN-TOP : 20PX; MARGIN-BOTTOM : 10PX; TEXT-ALIGN : CENTER; } DIV.CAL { TEXT-ALIGN : CENTER; } DIV.CAL_HEAD { WIDTH : 175PX; FONT-SIZE : 8PT; FONT-FAMILY : VERDANA; TEXT-ALIGN : CENTER; PADDING-BOTTOM : 8PX; MARGIN-BOTTOM : 10PX; } DIV.CAL_BODY { WIDTH : 190PX; FONT-SIZE : 8PT; FONT-FAMILY : VERDANA; TEXT-ALIGN : CENTER; } DIV.CAL_BOTTOM { } .CAL { FONT-FAMILY : VERDANA; FONT-SIZE : 7PT; TEXT-ALIGN : CENTER; } .CAL_DAY { FONT-FAMILY : VERDANA; FONT-SIZE : 7PT; FONT-WEIGHT : BOLD; TEXT-ALIGN : CENTER; } .CAL_SUN { FONT-FAMILY : VERDANA; FONT-SIZE : 7PT; FONT-WEIGHT : BOLD; COLOR : #D36654; TEXT-ALIGN : CENTER; } .CAL_SAT { FONT-FAMILY : VERDANA; FONT-SIZE : 7PT; FONT-WEIGHT : BOLD; COLOR : #3572A1; TEXT-ALIGN : CENTER; } .CAL_TODAY { FONT-FAMILY : VERDANA; FONT-SIZE : 7PT; FONT-WEIGHT : BOLD; BACKGROUND : #333; COLOR : #3D5586; TEXT-ALIGN : CENTER; } .CAL_TR {} DIV.XML { MARGIN-BOTTOM : 30PX; TEXT-ALIGN : CENTER; FONT-SIZE : 8PT; FONT-FAMILY : VERDANA; } hr{ border-top:1px dashed #3f3f3f; color:#303030; margin:0; } DIV.MEMOBODY { WIDTH : 190PX; OVERFLOW : HIDDEN; }
by digikazu
| 2005-04-29 00:55
| dairy
|
ファン申請 |
||