あそぶ技術

フィヨルドブートキャンプでRuby on railsの学習をしている僕の学習ブログです。

フィヨルドブートキャンプ六日目 レスポンシブWEBデザイン

ローカルで参加しています。 ただ、駒形さんと町田さんが昨日から深センに行っている為ボッチです。

こーひーおいしい

レスポンシブデザイン

昨日の続き、レスポンシブデザインから読み進めていきました。

Media Queries

難しい、良く解っていないような うなりながら文章を読みました。

プラウザが指定した幅、高さになった時にCSSを追加することが出来る。 追加したCSSでその幅、高さに合わせて綺麗に見える様にレイアウトを変更する事が可能。

ということは解りました。多分。

clearfix

clearfixについて学びました(主にclear: both;について) これは職業訓練校時代にもやった事があります。

仕組みの説明を読んでも余り理解出来ていないですが、floatだけだと下の要素が突撃して崩れてしまうレイアウトを崩れない様にするという事は解りました。

overflow: hidden;も職業訓練校時代に説明を受けたんですが、意味はさっぱり解らなかったです。 使い分け方とか有るんですかね?

clear: bothで駄目だっけれどoverfrow: hidden;を使うと何とかレイアウトが崩れずに済んだ事が有ったような。

でも、floatでレイアウトを整えるのでは無くflexでレイアウトを整える時代みたいなので(更に次のglidも来ている)、そもそもあまり使わないのかな?

余談

昨日progateでHTMLとCSSの上級編をやりました。

上級編がレスポンシブデザインについてだったからで、途中までやってみたのですがfloatを使った後のレイアウトの崩れを空のdivを作りclearfixを効かせることで解決する箇所が合り、おかしいのでは?とツイートするとCTOにファボラれました。

HTMLにデザインの為の空div作るのはセマンティック的におかしいので、CSSのafter:childで解決するのが良いはず。 それで良いはず、セマンティック的という日本語以外は良いはず。

IE hack

英語をグーグル翻訳しながら解読 解っているんだかいないんだか(いない)

IE8以前の特定のブラウザにだけCSSを効かせることが出来るコマンドっぽい? インターネットエクスプローラーの古いブラウザではCSS3のプロパティーを含め対応していないプロパティーが多いので、古いブラウザでレイアウト等が崩れてしまう問題が有るのでそれに対応する用のコマンドなのかな?

良く解ってないけれどIEバルス

デザイン参照

ズルいデザインも職業訓練校で紹介され、見たことがあります。 本当にズルい(褒め言葉)

配色講座もズルくて、これなら僕でもデザイン出来るのでは、という気持ちになります。

ズルいデザインの作者の方のツイッターをフォローしたら、アイコン制作の新しいスライドが紹介されていたので見に行ったら、町田さんが出てきて笑いました。

ノンデザイナーのためのコンセプト & ロゴ作り実践講座 feat. savanna.io

思いやりとか意味わかんない。

CSSのアイコン作成

CSSで作られたアイコンはソースコードを一つ見て、こういうのもあるのかぐらいで流してしまっていました。 インタラクティブに学習出来てない!

clac()アクション

ボックスレイアウトで計算が楽になって便利ですね。 ただ、box-sizing: border-boxとキャラが被っているみたいなので、使う際にはどちらかを選ぶのかな。

その他

その他のCSSの練習の読む系のリンクに全て目を通しました。 ドットインストールのbootstrapは途中まで見て、Code Academyは見てないです。

明日はそれらの続きをやるか、CSSの課題の作成をしていこうと思っています。