僕がCSSの課題を進めた順番について

CSSメモについて

フィヨルドブートキャンプ CSSの課題の際にiPadにProceateというソフトを使ってメモをしていたのですがそれが残っていました。

参考にならない箇所もあるかも知れませんが、最初の方の大まかなところから作るところについては何処から手をつけて良いか解らないという人の参考になるんじゃないかな？と思い公開します。

僕はこの順番で作りましたよ。

字が読み辛いかも知れませんがスマホでは普通に拡大出来るしPCの場合も画像をクリックで拡大できたはずです。

字が汚い件についてはスマン

大デザインの整理

大きな塊を把握しようとしていますね

まずここから作りました。

中デザインの整理

中ぐらい塊に関わるタグを書いているようです。

これで全体の大まかなレイアウトが出来ます。

footerメモ

footerのリンク横にあるスペースについてメモしています。

同じっぽいなと

画像のサイズ

画像のサイズを書き込んでいます。

コンテンツにある料理の画像が明らかにでかいですね。

デザインの比率

比率で作られてるっぽいという気づきを書いています。

しかし、このメモが活きたかどうかは覚えていないです。

サイズを決める時に迷わないで時短できたはず。

ビルボードイメージ

三つ並んだ画像について書いていますね。

でも、正直何書いてるのか解らん

普通に配置するとマウスを画像の上に乗せた時(on mouse)画像の周囲に1pxの白い幅が発生し気持ちが悪かったので、その対処に苦戦してた時のメモだと思います。

あとで町田さんに聞いたら、そこまでやんなくて良いよって言われた記憶。

コンテンツ

記事部分の情報を整理してるみたいですね。

form

formについての書き込みです。

共通するデザインの場所、共通するHTMLタグを探しているみたいです。

HTMLタグが共通していればそのタグにCSSを利かせれば一気にデザイン変えられて楽そうだなとか思ってた気がします。

これもformについてですね。

読み辛い字でformのフォントはCSSで変えてはいけない、javascriptで変えるというような事が書かれています。

多分、町田さんからのアドバイスだと思います。

アイコン

アイコンについて書かれています

アイコンの場所とborder-radiusの仕様についての覚書ですね。

アイコンの場所についてはともかく、border-radiusの仕様については何書いてるか解んねーなこれ

アイコンを作る際にborder-radiusの仕様を知ることはとても重要だった気がします。

上下左右のborderの色を変更しつつサイズを変えながら仕様を確認して行った時のメモだったと思います。

パンくずリストの<にも丸をつけていますがCSSで図形を作るのでは無く不等号記号（＜）で作りました。

　まとめ

1. 最初に大きい塊から作って次の塊を作り
2. 次にヘッダー、コンテンツ、フッターの内部。
3. 最後にフォーム、アイコン

という順番で進めています。

この順番が作りやすいのではなかろうか？

あとは情報を整理したりまとめたりしていますね。

他にもメモはあったのですが、パッと見何書かれてるか解らなかったので未公開で

以上です。

多少でも参考になれば嬉しいです。

ではー