[email protected]/table-grid」

Tablegrid

グリッドレイアウトが簡単に実装できるCSS「@mdo/table-grid」。
テーブルからレスポンシブ、複雑なグリッドまで様々なレイアウトに対応していて、実装は<div>だけで行える手軽さが売り。

[CSS] 動画の貼り付けコードをレスポンシブに最適化させる

Embedvideo responsive

YouTubeをはじめ様々な動画サイトの貼り付けコードは、そのまま貼り付けるとサイズ調整されずに、レスポンシブレイアウトが壊れてしまう場合があります。レスポンシブサイトに最適化させるには、cssでコンテナを作りwidthをピクセル指定からパーセント指定にしてやります。

以前紹介したFitVids.JSを使う方法(とコンテナを使う方法)では、実質、YouTubeの貼り付けコードのみに対応していましたが、iframe以外にobjectembedにも対応させることで、幅広い貼り付けコードをレスポンシブサイトの表示を崩さずに貼り付けることができます。

続きを読む →

[CSS] Adblock有効時にコンテンツを表示させない方法

Adblock taisaku

iOS 9にコンテンツブロックアプリが登場したことで、Webでの広告の扱いがややシビアになりつつあります。そこで、Adblock系アドオンを有効にしている場合に、コンテンツを非表示にするという手法をとるブログなんかもチラホラ見掛けるようになってきました。

この方法は、CSSを使えば案外簡単にできるので、試験的に導入してみるのもいいかもしれません。

続きを読む →