株式会社カラフルクローバー公式ブログ

WordPress・HTML・CSS等のTipsを公開しています! 株式会社カラフルクローバー公式ブログ

広告の企画制作の株式会社カラフルクローバー 公式サイトはこちら

*

htmlcssを実際に打ち込んでみよう。

      2017/06/21

こんにちは
本日の学習はドットインストールという学習サイトを使っての打ち込み練習を行いました!
とにかく実践あるのみ、ということでひたすら同じ動画を見ながら体で覚えるという勉強法です。

体で覚える打ち込みですが疑問点もちらほら出てきます。

まだまだweb初心者の私にとって恐ろしいのが、2カラムレイアウトをなどを作成している時のfooterの回り込み‥。
楽しくfloatで左右に分けているのに、回り込んでくる恐るべきfooter!!どうにかしたい。
Normalize.cssとリセットCSSの違い

と、初心者なので大げさに騒いでしまいましたが、

すぐに解決できました、

このような事態にならないよう、floatを解除するためのプロパティの名前が「clear」です。

回り込ませたくないfloatを効かせた部分セレクタに「clear:both;」と記載することで、
回り込みが回避されちゃんと下に表示されるようになりました。
clear用のセレクタを用意しておくのも一つの方法のようですね。
これで一件落着です。
もう一つ本日の学習で印象に残ったのがNormalize.css と リセットCSS。
この二つの印象は、「よくわからないけど、初期設定?」

だったのですが、

必要最低限の調整だけを行なっているのがNormalize.css.
完全にcssをすべてリセットしてしまうのがリセットcss.のようです。

わざわざCSSを指定しなくても、hタグやpタグでマークアップすると、タグの意味に合ったデフォルトスタイルシートが効いてmarginだったりテキストが太字になったりします。
Normalize.css は、ブラウザ間の誤差をなくして補正(ノーマライズ)してくれるだけですので、デフォルトスタイルシートはそのまま適用されます。
リセット.css はその名の通り余白が一切なくなる、まさに 壁に文字がぴったりくっついている、という感じになります。

動画を見ながらひたすら打ち込む!という勉強法では なかなか理屈で覚えられない、と考えてしまいましたが、
体で覚える=頭にも伝わると本日実感できました。

明日も頑張ります!

 - りりこのWeb学習記録

  • このエントリーをはてなブックマークに追加

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

検索エンジン
検索エンジンの正しい捉え方って?

みなさんこんばんわ 今回もSEOの学習を進めましたよ!! そう、前回記事を読んで …

Z視線
注意!コンテンツのレイアウトを考える前に意識すること。

みなさんこんばんわ、 今日もWebライティングの勉強をしたのですが、 今回はコン …

SEO
SEOをわかりやすくkindleで読んでみた。

こんばんは 本日は動画を見ながらでも打ち込み練習でもなく、 kindleの電子書 …

キーワードとニーズ
どうやって決める?Webサイトのキーワードとニーズ

みなさんこんばんわ 今回は、前回読み始めたWebライティングの本について学んだこ …

学習方向
地域と言語レポートはこう使う!

こんばんは 今回の勉強はgoogleアナリティクスの学習をしました。 いつもと違 …

比較列挙
Webサイトのコンテンツを作る上で欠かせない起承転結とは?

こんばんわ。 本日もWebライティングの学習をしちゃいました。 今回は学んだこと …

htmlcssを実際に打ち込んでみよう。

こんばんわ 本日、html css の練習動画を見ながら打ち込みの練習をしました …

競合Webサイト
競合Webサイトはこう破る!安全なキーワードの決め方。

こんばんわ、 今日もWebライティングの学習を進めましたよ! 前回はキーワード …

やさしいSEOの教本を読んでみた!

こんばんわ まだやっているんですか?と思われるかもしれませんが 今回もSEOの勉 …

キーワード
理解すれば怖くない!キーワードを使う回数と検索エンジンのペナルティ。

皆さんこんばんわ。 今日ももちろんライティングの学習をしましたよ! 本日まず学習 …