レスポンシブスマートフォンコーディング講座へ参加しました。

   

レスポンシブの画像の扱いがいまいちわかってなかったので講座へ参加しました。

初めて知ったこと

  • CSSの書き方でBEMがある
  • CSSでIDは使わないほうがいい
  • CSSの継承はNGらしい
  • Retina画像の対応
  • Bracketsなかなかいい
  • Compassはおわっているらしい

こんなところでしょうか。

BEMって何?

BEM
BEMは命名規則をこうしようと提唱している
CSSの書き方です。

  • プロジェクトが成長してもサポートするのが簡単
  • 既存のコードの再利用がしやすい
  • デザインの更新・機能要素の追加などのコストを最小限に抑え、ポイント単位で変更できる

BEMは「block-element-modifier」の略。

なぜこれを使うといいかというと、
他の場所へ持っていっても、
他のCSSと被らない、
他の場所で楽に使える。

ということ。

たまにありますよね。

こうやってh2と書いちゃうと
他のh2と交じる?ことありませんか?

うわ、このCSSが効いちゃってる・・・
上書きするCSSを書くのがめんどくさい。

こういうのをなくすためにBEMがあるようです。

CSSでIDは使わないほうがいい

う〜ん使ってる・・・・・・

えって思いましたね。

なんで今までIDを使っていたのか

昔はIDの方がブラウザの動作が早かった。らしいです。

最近のブラウザは、1000/1秒とかからない。

それでもIDを使うシーンは?

  • IDはjavascriptで何かしたい時。
    要素の選択。
  • ページ内アンカー

などですね。

CSSの継承はNGらしい

これなんでか忘れてしまいました。
たしか他のCSSとかぶっちゃうから
やめたほうがいいだったかな??

.tab-menu h2 {} はNG。

Retina画像の対応

書き方

srcsetを使って対応できる。

Retinaのときは
images/image1@2x.jpg 2x の画像

違うときは、
images/image1.jpg 1x の画像を使ってくれる。

さらに1x、2xと書いていたところを、
1000w,2000wと書くとウィンドウの幅によって画像を切り替えられるのです。

1000w は 1000px以下なら読み込む
2000w は 2000px以下なら読み込む

Retinaじゃないときはsrcの画像を読み込んでくれる

まだ使い慣れてないので
どっち使ったらいいのかベストがわかりませんが、
使うことが大事ですw

 

Bracketsなかなかいい

Adobeが無料で提供しているBrackets(ブラケッツ)

Brackets(ブラケッツ)

htmlとcssで作られたテキストエディターらしいです。

Brackets(ブラケッツ)のオススメなところ

CSSやhtmlを直した瞬間にブラウザに反映される。
特に保存とかしなくても変わるので、
とても便利だと思いました。

emmetが使える

豊富なプラグイン?があります。
emmetは必須ですよね。使えます。

Compassはおわっているらしい

Sass + emmet + compass の記事がたくさんあるので
いまだに流行ってるのかと思ったら、
もうコンパスは終わってるらしいです。

「オワコンパス」と言われてるみたいですよ・・

使ってたけど・・・

調べたらこんな記事

な おlibSassではSassのフレームワークのCompassが動作しません。Compassに依存してサイトを構築している方は、気をつけてくださ い。ただしCompassのベンダープリフィックスの付与やCSSスプライトの自動生成などは、PostCSSのプラグインのautoprefixerや gulpのプラグインのgulp.spritesmithで代用できます。

使わない流れになってきているようです。

aria-labelって知ってる?

知りませんでしたw

Accessible Rich Internet Applications (ARIA)

アクセシビリティ向上のためのタグです。

ariaタグは他にもたくさんあるので
調べてみるといいでしょう。

まとめ

ざっとこんなものでしょうか。
とにかくRetina対応の仕方がわかったので良かったです。

BEMは慣れるまでに時間がかかりそうですが、
後々楽になる書き方だそうです。

Webの技術は日々取り入れる姿勢が大事ですね。

 - web