超超初心者向け漫画サイトのつくり方【リセットCSSをつかう。】

超超初心者というより、初心者向けです。

リセットCSSというもの自体が、初心者向けになるかな。

ホームページを作っていて、「chromeでは思い通りの表示なのに、IEで見たら崩れてる!!!」という思いをしたひと限定で読んでください。

ブラウザについて

ブラウザ、色々ありますよね。

Windowsを使っている人は、EdgeかIEを使っていませんか?

で、「IEはクソ」みたいな事を言われて、「なんで?」って思った事ありませんか?

私もずっとそう思っていました。

IEで不都合を感じた事ないし、わざわざ他のブラウザをインストールしてまで使うの?…意味わからんなぁ。って思っていました。

思っていた………そう、過去形です。

ホームページを何個か作っていって、ちょっと複雑なデザインを取り入れるようになったら、「IEはクソ」の意味が分かります。

ブラウザは、それぞれ「思いやり」を持っています。

その「思いやり」の種類はブラウザそれぞれで違います。同じビジネスホテルでも、アメニティが違ったりするのと同じです。リンスインシャンプーしか置いてなかったり、ヘアパックまで置いてあったり。

で、IEの「思いやり」はホームページの作り手側にとって「そこじゃなーーい!」って感じなんです。

ブラウザの思いやりを標準化する

個々違う「思いやり」を標準化するのは、かなり骨が折れます。

素人が手を出す領域でもないかと思っています。

あ、思いやりを具体的に言わないとピンとこないですよね。

dlタグで記述し、両ブラウザで見ると↓こんな感じです。

うーん。微妙…。

いい例が出せず、申し訳ないです…。

結構、大きくズレる事があるのですが、シンプル記述だと違いが出にくいようです。

ちょっとだけ、縦の行間とか2行目のインデント幅とか違いませんか?

この違いが、ブラウザ毎の「思いやり」です。

………えーっとつまり、

CSSでいちいち指定しなくても、ブラウザの「思いやり」が良い感じに設定してくれる。という事なんですが、まぁこの「思いやり」がそれぞれ違うので思い通りの表示になってくれない事がある。という……。えーん分かんない!わかんないですよね( ;∀;)

説明下手で、すみません~

とにかく、この「思いやり」を標準化するために、いっそ「思いやり」を打ち消してしまおう!というのが「リセットCSS」です!

リセットCSSをつかうと、↓こんな感じ

うわ。よくわかんなーい(;´Д`)

と、とりあえず2行目のインデントが無くなりました。

無くなったという事は、自分で指定できる=どのブラウザの「思いやり」にも左右されない。

……という。

そういう事なんです。

(;´・ω・)

リセットCSSの設置方法

リセットCSSは自作も出来ますが、やめましょう。

いっぱい配布してくれている人がいるので、借りてくるのがいいです。

で、なんでいっぱいあるか。ですが、どこの「思いやり」を打ち消すか。どの程度打ち消すか。で違ってきます。

正直、私も全然自分好みが分からないので、とりあえず人気なヤツを使っています。

私が使っているのは、YUIです。

「リセットCSS YUI」で検索すると出てきます。

英語ページですが、コピペでいけるので大丈夫

↑の赤枠内の記述を、自分のhtmlの<head>~</head>の間に貼り付ければOKです。

ただし、以下の人は別の方法を取ってください。

・CSSファイルを用意していて、複数htmlファイルに適用している場合。
・オフラインで作業している場合。

先ほどのYUIの記述の、http~をドラッグして反転させたら、右クリックで「ページ移動」してください。

コピーしてアドレスバーに貼り付けでもOKです。

すると、なんかいっぱい英数字の羅列ページに行くと思います。

そのページの全文をコピーして、自分のCSSファイルに貼り付けてください。

ここで、注意です!

絶対に、全文を貼りつけてください。特に/*~*/で囲われた部分を消さないでください。

これは、著作権表示です。

自分で作れないリセットCSSを0円で使わせてもらう代価が、この著作権表示をする事です。

自分のホームページ上には、一切表示されないので安心してください。

こういった、「0円で配布してくれている」ものは、著作権表示が必須という事がほとんどです。

著作権表示を消すと、最悪な事態も起こりうるので本当に注意してください。

リセットCSSを使うなら

リセットCSSを使ってみよっかな。と思ったら

CSSを記述する前に使ってください。

CSSを全部記述して、chromeではOKだけどIEで崩れちゃったから、リセットCSSを使おう。……なんてすると、結構途方に暮れます。

なぜなら、ちゃんと表示できていたchromeも「思いやり」を打ち消されたがために崩れまくってしまうからです。

私も何度かやってしまいましてね……。ゴールから急にスタートに戻された気分で投げ出したくなりましたよ……。

リセットCSS自体が、「やれたらやった方がいい」という位置づけだと思うので、最初は、どのブラウザでも許容範囲だという落としどころを自分で付けるのがいいかも。

ただ、最初からリセットCSSを使えたら強いよ~~

頑張れる人は、ぜひとも使って欲しいです。

コメント