【30代からのプログラミング】ProgateでHTML/CSSを全クリしたのでとりあえず自分でサイトを作る。-その2-
ProgateでHTML/CSSを全クリしたのでとりあえず自分でサイトを作る。ーその1ーまで出来たら、あとはコードをどんどん書いていくだけです。色々デザインをいじってカッコいいものを作りたかったですが、とりあえずはProgateで作ったサイトのコピーみたいなものを作り上げるのでやっとのことでした。
ちなみに今回の成果物は、こちらになります。https://ponsmama.github.io/orange_pom/
Wrapでくるんでコンテイナーにぶち込んでいるのに、別々のはずのブロックがなぜか連動し、Floatであっちへ飛んで行ってしまったり。あーー!ってなった後にProgateの上級編道場にいてじっくりコードを見てみる、というのを繰り返しました。もちろんグーグル神にもかなり聞きました。
と悩みました。そのときはこのコードをぶち込んでみることで解決したです。
このコードを入れ込むだけで、ずいぶんCSSが素直になってくれました。なぜなのかは、わからない。でも、色々サイト検証してみると、似たようなコードが書かれているように思いました。ので、悩んだらこのコードをぶち込んでみてもいいかもです。
後で分かったのですが、これはCSSリセットという作業みたいですね。ブラウザごとに色々設定が異なっているのでそれをまずすべてクリアにするみたいです。調べてみると色々ありますよ。
だいたいにして、ProgateのHTML/CSSの上級編で出てくる、[Floatの解除]らへんがイマイチ理解できていないのが、問題の根源なのでしょう。
あと、Wrapperで巻いて、コンテイナーで仕切りを作り、Divでさらに細かく分ける。みたいな感じかと思っているのですが、Float:left;を入れると、Float:Leftかけた要素のその下にあるブロックもすべてが、左並びになりやがってくれまして、頭が痛かったですね。
こんな感じで解決したのですが、、、いまだに色々霧がかかったような理解です。
ロゴ:もっとシンプルでわかりやすいものに。
背景:どうも使った写真のサイズがデカすぎる?
カラー:配色を研究
メニュー:もっとカッコいいものにしたい
とこんな感じです。
次回はJSとjQueryの学習を終わらせてからまた自作ものを作って見ようと思います。
ではでは、またね
Githubで無料で公開できるよ
Progateで公開の仕方が説明されています。こちら ファイルを上げるまでちょっと作業がありますが、無料だし、まあ何とかできます。私はアトムエディターで一つのプロジェクトのフォルダーのなかに、さらにフォルダーを作って、CSS、HTML、IMAGEと分けましたが、それぞれのファイルは一つのフォルダー内で作ったほうがよいです。ちなみに今回の成果物は、こちらになります。https://ponsmama.github.io/orange_pom/
出来なくて悩んだことメモ
まず、Stylesheetのコーディングですが、習ったとおりに全然動いてくれない。Wrapでくるんでコンテイナーにぶち込んでいるのに、別々のはずのブロックがなぜか連動し、Floatであっちへ飛んで行ってしまったり。あーー!ってなった後にProgateの上級編道場にいてじっくりコードを見てみる、というのを繰り返しました。もちろんグーグル神にもかなり聞きました。
しょっぱなから! CSSが思ったとおりにならない!!!
しょぱなから、text-align:center; も margin:0 auto; も全然なにもおこりませんけど?!と悩みました。そのときはこのコードをぶち込んでみることで解決したです。
- *{ box-sizing: border-box }
- html, body, ul, ol, li, h1, h2, h3, h4, h5, h6, p, div { margin: 0; padding: 0; }
- body { font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif; }
- div{ display:block; }
- li { list-style: none; }
- a { text-decoration: none; }
このコードを入れ込むだけで、ずいぶんCSSが素直になってくれました。なぜなのかは、わからない。でも、色々サイト検証してみると、似たようなコードが書かれているように思いました。ので、悩んだらこのコードをぶち込んでみてもいいかもです。
後で分かったのですが、これはCSSリセットという作業みたいですね。ブラウザごとに色々設定が異なっているのでそれをまずすべてクリアにするみたいです。調べてみると色々ありますよ。
【Float:】の気まぐれに振り回される
プロゲートのレッスンセクションのように、イメージを一つのブロックとして、横並びにする。というのがやりたかったのですが、まあ、「君よ、どうしてそんなところにいるんだい?」と、発狂してしまいたくなるくらい動いてくれない。だいたいにして、ProgateのHTML/CSSの上級編で出てくる、[Floatの解除]らへんがイマイチ理解できていないのが、問題の根源なのでしょう。
あと、Wrapperで巻いて、コンテイナーで仕切りを作り、Divでさらに細かく分ける。みたいな感じかと思っているのですが、Float:left;を入れると、Float:Leftかけた要素のその下にあるブロックもすべてが、左並びになりやがってくれまして、頭が痛かったですね。
こんな感じで解決したのですが、、、いまだに色々霧がかかったような理解です。
レスポンシブもいまだによくわからない
今回作ったデザインはレスポンシブ対応できている、と思うのですがどうなのでしょうか。一応Chromeの検証機能で試してみて、そこまでめちゃくちゃにはなっていないと思います。が、どうしてできたのかがイマイチわかっていない状態です。今後の課題
デザインですが、まあ、へたくそなのでもうちょっと頑張りたいですね。ロゴ:もっとシンプルでわかりやすいものに。
背景:どうも使った写真のサイズがデカすぎる?
カラー:配色を研究
メニュー:もっとカッコいいものにしたい
とこんな感じです。
次回はJSとjQueryの学習を終わらせてからまた自作ものを作って見ようと思います。
ではでは、またね
コメント
コメントを投稿