CSSって何デスヵ?
スポンサー広告
CSSって何デスヵ?
準備
マンガ準備
シナリオ ver 1
シナリオ ver2
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

 解説マンガ「CSSって何デスヵ?」用シナリオです。
 入っている図は、シナリオ担当の阿檀が書いたもので、作画担当の有希之武氏への本依頼は、シナリオ確定後の予定です。
 現在、シナリオへのご意見募集中です^^

阿狐
ゆきのぶさん。助けてよ。こいつに聞かれたんだけど
リラ
CSSて何ですか??
阿狐
……どう答えていいか、わからない。
ゆき
あれ?、阿狐はhtmlとかCSSとか使えたんじゃなかった?
阿狐
使えるのと、説明できるのは、別だね!
リラ
そこ威張るとこじゃないと思う。
ゆき
どうして突然CSSなわけ?、HTMLとセットじゃなくて?
阿狐
あー。……ブログだからです。
リラ
ブログだとCSSなの?
ゆき
そうじゃないんだけど、順番に説明するね。
まず最初に「HTML」の説明をしちゃおう。
GBL010.jpg
世界中、遠く離れていても。コンピュータを持っている人同士で、「他の人にも見てほしい聞いてほしい」と思った人の文章や絵や動画や音楽を、「見たい」と思った人が見ることができる仕組み。それがインターネットだよね。
リラ
うん。
ゆき
そのためには、「見せる人のコンピュータ」と「見る人のコンピュータ」が同じ決まりで読み書きできないといけない。この「決まり」はいくつもあるけど、「見せる人」に一番身近なのが、HTMLやCSS。
ゆき
たとえば、HTMLには。「ここで改行する」「ここをクリックすると××へ飛ぶ(リンク)」「ここに画像を入れる」などなどの、「命令」を埋め込むことができる。 この「命令」のことを「HTMLタグ」っていうんだ。「HTMLタグ」は、みんなが(なるべく)共通に使えるように、決められている。
阿狐
CSSなしで、HTMLだけでも、サイトは作れないわけじゃないもんね。

このコマの中を、右クリックして、「ソースを表示」を選んで見て。 文章だけじゃなくて、<br>とか<a ……>とか<img>とか表示される。 これが、HTMLタグ。 ちなみに、<br>が改行、<a ……>がリンク、<img>が画像ね。
ゆき
この見本だと、「日付」を書くたびに、いちいち文字のサイズや大きさを指定しなおさないといけない。
kobito1-400px.gif
ゆき
ところがCSSを使うと、
同じ色同じサイズの部分は、イッキに指定することができるし、
kobito2-400px.gif
タグが減った分、ソース表示も見やすくなる。

CSSでHTMLとして書く部分がシンプルになったとは言っても、
やっぱりHTMLをいちいち書くのは、ちょっと面倒くさい。
リラ
うんうん、面倒くさい。
ゆき
うん。慣れてる人でもちょっと一手間だし。初めての人には難しそうにみえてしまう。で、文章だけ入力すれば、HTMLに変換してくれるいろんなシステムが出てきた。掲示板だってある意味ではそうだし携帯電話用の簡易サイトとかいろいろあるけど。
阿狐
そのうちの一つが、ブログっていうシステムだよね。
ゆき
「サイト」っていうのは、ただの箱のようなもの。どんな形のものでも自由に入れられるけれど、きちんと整理しておくにはそれなりに手間がかかる。
阿狐
「ブログ」っていうのは、最初から仕切りのある箱、かな。「ここには日付」「ここにはタイトル」「ここには記事」という風に、入れるものがきまっている。
コメントをつけることができたり。記事をカテゴリー(《Ameba》だとテーマ、《Yahoo!》だと書庫)で分類したりできる。
ゆき
ブログの場合、入れた文章は自動的にHTMLに変換してくれるから、あまりHTMLを意識しないでも使うことができるんだよね。
阿狐
ブログによって、システムがけっこう違うんだよ。
ユーザーにhtmlを極力使わせないように設計されている《yahoo!》、記事にはある程度使えるテンプレート(スキン)ではhtml変更ができない《Ameba》や《Autopage》。《fc2》《忍者》《jugem》はほぼ全面的に、htmlを変更できるので、わかってるひとにはかなり自由にアレンジできる。《eXcite》や《はてな》のように部分的にだけ変更できるブログもある。
ゆき
html変更ができない《Ameba》や《Autopage》でも、テンプレート(スキン)をカスタマイズしようとすると、CSSを編集する必要がある。HTMLを触ったことがない人が、いきなりCSSだけを見るから、何が何だか判らないのは、……当たり前かもしれない。
でも、さっきも説明したように、HTMLはブログのシステムが自動で書いてくれているだけで、消えてなくなったわけじゃない。(画像以外のところで)右クリック→ソースを表示をすると、HTMLが見える。
リラ
うわぁ、ごちゃごちゃ。くらっと来ちゃう
阿狐
……さっきの見本よりはずっと複雑だからね!
リラ
説明聞いても、なんかまだピンとこない。
ゆき
説明を何通りも探して読むより、まず変えてみるのがいいと思うよ。でも変えてみる前に、とりあえず、今のCSSをワープロにでも貼り付けて、保存しておくのがお勧め。カスタマイズの途中でも、何度もワープロに貼りなおして、名前を変えて保存しておくといい。カスタマイズの途中で崩れてしまったときに、上手く行っていたところのCSSが保存してあれば、そこまで戻れるからね。こういう保存をバックアップって言うんだ。バックアップが済んだら、ソースの表示の中で、一番判りやすいところ、たとえば、ブログのタイトルとか記事のタイトルとかを変えてみるところから始めてみたらどうかな?
阿狐
HTMLにid="header"って書いてあったら、CSSの中で「#header」を探す。HTMLにclass="entry"って書いてあったら、CSSの中で「.entry」を探す。
「.」は重要なので、見逃さないよーに^^
探すのは、Ctrl+fで検索窓を出すのが便利。
リラ
探した。で、どうすればいいの?
ゆき
なにか、変えてみるといいよ。たとえば、「font-size:○px」って書いてあったら、そこで、フォントのサイズ、文字の大きさが変えられるから。その数字を思い切り変えて、……たとえば100pxとかにして、見てみる。
リラ
CSSに書いてあるのは何でも変えられる?
阿狐
変えられるし、書いてないものを付け加えることもできるよ。たとえば「class="entry"」の上に線を引きたくなったら、「border-top:3px #f00 dotted;」で、3pxの太さの、赤い点線が引ける。
リラ
その意味って、全部覚えないといけないの?
ゆき
いいや。参考書みたいなサイトがたくさんあるから、そのたびに調べて使えばいい。CSSそのものは、さっきも書いたとおり、「世界共通」だから。CSSの解説サイトで、自分が「見やすい」「調べやすい」って思うところを探して、「お気に入り」に入れておくと便利だよ。
阿狐
老舗とほほ http://www.tohoho-web.com/css/
tagindex http://www.tagindex.com/stylesheet/
HTMLクイックリファレンス http://www.htmq.com/style/index.shtml
ここらへんが有名どころかな?
リラ
わぁ。CSSっていっぱいあるんだ。ブログのカスタマイズって、なかなか上手くいかないけど、上手くいきだすとハマっちゃうんです。カスタマイズに時間かけすぎて、記事書いてなかったり。「かわいいカスタマイズ」にしたけど記事が読みにくくなっちゃったり。
阿狐
うーん。どこかのブログを見て、共感したり、感動したりするのは、やっぱり記事の中身なんじゃないかなぁ。
ゆき
でもさ、とりあえず「かわいく」してみたいんだよね? だったら、やってみればいいと思うよ。「かわいいけど、読みにくいな」って自分で納得したら、また、戻せばいいんだし。スキンやテンプレートいくら弄っても、記事の本文は壊れやしないんだから。
じゃね、グッドラック

ご意見募集中です。よろしくお願いします^^

スポンサーサイト

tag : scenario

シュゴイデシュネ~

おひさしぶりです。
又大変なことをはじめられましたこと。オベンキョさせていただきます。^^

うわぁ、おひさしぶりです

IFさん、お久しぶりです!!
いやぁ、始めるだけ始めたんですけどね。
せっせと宣伝するわりに、なかなかコメントもいただけなくて^^;
それほどとんでもなく間違ったことは書いてないのか?と開き直ってそろそろ先に進もうかと思ってるとこです。

No title

未だ悟りの境地には至っていないようで^^;
良かったらお手伝いしますよ(((;゜゜)

No title

この内容を漫画にして頂けたらとても分かりやすくていいなぁ~って思いました。

漫画になるのが楽しみです。

ありがとうございました。

コメントありがとうございます。

>IFさん、
すみません、悟りよりなにより放射能関連で本業が^^;

>はちさん
こちらこそコメントありがとうございます。
そろそろ今度こそ再起動かけねば^^;

コメントの投稿

非公開コメント

trackback


この記事にトラックバックする(FC2ブログユーザー)

-

管理人の承認後に表示されます
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。