〜CSSの基本を理解する〜
ずいぶんご無沙汰してました(´･ω･｀)
CSSについては、自分で何回かサイトデザインはやったことあったので特に問題なく進むと思っていたんですけれどもねえ(´･ω･｀)
平日はスキマ時間しかとれなかったので土日にがっつりやってようやく、自分採点で及第点といえるところまでいったのでひとまず提出してみようかなと思います。
とりあえず完成したものの
-全体図
- URL
https://dl.dropboxusercontent.com/u/78455456/practice/index.html
がこれらです。
また、つっこみを頂き次第修正して、改訂版を上げたいと思います。
◆CSSの学習
今までにも本などで学んだことのあるCSSでしたが、改めて自分でデザイン組んでみると「floatしてんのに寄らないぜ(´･ω･｀)」とか「なんで背景色つかないんだーヽ(`д´；)/」なんつーことが多々ありました。。。
こいつは根本的なところからして理解不足だなということで、以下の記事を読み腐りました。量はすごいですが、本当に勉強になります。初心者のワタクシはfloatについてどはまりしておりましたよ、ええ。
参考URL:
- 初心者がよくハマる、CSSのfloatプロパティ徹底攻略 | WeeeeB
- CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ
◆リセットCSSについて
今回は Eric Meyer Reset CSS v2.0 を利用させてもらいました。
リセットCSSについては名前は知っていたのですが、利用するのは今回が初めてでした。
Eric Meyer Reset CSS v2.0 と Yahoo! User Interface Library (通称:YUI) の二つを試してみたのですが、今回はなんとなく前者を使うことにしました。
参考URL
- HTML初心者が知っておくべきリセットCSS と3つのポイント
- Reset CSSについてのまとめ：リセットするべき?しないべき？
◆レスポンシブデザインについて
正直に申します。
やっておりません▄█▀█●
やろうとは思いました。やろうとは思ったのですが、また更に1週間とかざらにかかりそうだったので妥協しました、すみません(；´Д｀)
いつかできたらいいなあ・・・これはやらないパターンのやつかな・・・追記に期待。
◆デザインについて
今回なにに一番時間かかったかっていうと、そりゃもうサイト自体のデザインをどうしようかといことですよ(´･ω･)
課題作成条件の中のひとつ
独自のレイアウトをつくること（3カラムじゃなくて良く、sampleと同じレイアウトはダメ）。
について、変に考え込んだ末何回も作り直しましたｗｗ
何回作ってもいい感じにならず・・・。
そこで、もう致し方無いと判断し256インターンで先輩が作ったものを参考にさせていただくという禁断の手に出ました。
ぱくってはないですよ、参考ですよ、参考！
それがこちらです。
- CSS の課題完了・グラフィカルなパンくずリストについて - A_few_resources
特にグラフィカルなパンくずリストなんてそんな発想はもちろん貧相な頭の持ち主である自分にはないわけですよ。その時点でもう「すげえなすごいです」です。
その他についても色々とパクr参考にさせていただきました。
その他にもいくつか参考にしたサイトがあるので貼っときます。
参考URL:
- [CSS]画像を使用しないでApple風のパンくずを作成するチュートリアル
- CSSのみで三角形を作る方法を解説するよ！｜ついでに扇型や吹き出しも作ってみる | アイデアハッカー
- [CSS]なにかと便利な「:before, :after擬似要素」の使い方を基本からマスターするためのチュートリアル
◆疑問(´･_･`)
今回コーディングしてて疑問に思ったことが２点あります。
一つは、CSSのインデントはどうすればいいのか ということと、
もう一つは、CSSを書くとき要素はどこまで指定すればいいのか ということ。
CSSのインデントについては説明はいらないと思います、そのまんまです。
というかこの疑問ももう一つの疑問に集約されますかね(笑)
つまり、CSSを書くとき要素はどこまで指定すればいいのかっつうことですよ！
なにをいってるんだと思われるかと思いますが、自分の書いたCSSを見てもらえればわかります。
こんなんです。
div#body div#main div#articles article div.body table tr th {
・・・
}
なげえ！(笑)要素の指定(?)がなげえよ！！
さすがに自分も「え、こんな細かく指定する!?うわあ、でもここで急に省略しても頭わいてると思われるかも。。。」なんていう問答を頭のなかで幾度と無く繰り返しましたが、結局出た答えは「大は小を兼ねる」。なんぼ見難くてもとりあえず書いておけば、あとは消すだけだし、とりあえずおｋ、というくそみたいな発想によりこうなりました・・・。
まあまず間違いなくつっこみをいただくので、また追記したいと思います。
◆感想
冒頭でもいいましたが、改めて・・・
時間かかりすぎだろがあああああああああうわあああああああああああああ
今回はほんとこれに尽きます・・・。
あとこれは小言ですが・・・
駅前のスタバこみすぎだろがあああああうわああああああああああああああああ
今回はこれにて終わりです。
