CSSのposition:stickyがすごく便利 | q-Az
最近新しく追加された position の新しい値 sticky が場合によってはすごく便利なので記事を書いてみます。 対応ブラウザがまだあまり多くないので実用性は乏しいかもしれませんが、今まで JavaScript の力を借りなきゃ出来なかったことがたったの2行の CSS で出来てしまう魔法みたいな position の値です。 position: stickyMDN が説明が詳しいので貼っておきます。 参考：position - CSS｜MDN 簡単に言うと「スクロールでその位置まで来たらそれ以降は fixed する」みたいな感じです。 サンプルこの記事内で「position: sticky」や「サンプル」など h2 要素に position: sticky をかけています。対応ブラウザであれば h2 要素が fixed しているはずです。 HTML<h2 class="h2-stic
webデザイン解決！FaceBookやG+のウィジェットをレスポンシブにするJavascript
SyncerWEB制作(22) FacebookやG+のウィジェットを簡単にレスポンシブ化するJavascript 2014.07.29(Tue) 18:30 WEB制作 例えばレスポンシブ対応のブログなんかを作っている時、サイドバーに設置したGoogle+やFacebookのウィジェットって厄介じゃありませんか？ ウィジェットの横幅を大きくしたらスマホビューでは画面をはみ出ちゃうし、小さくしたらPCビューでかっこ悪い…。かといってPHPでユーザーエージェントを取得して出力タグを振り分けるというのも…。「各ブラウザはもっとユーザーエージェントを分かりやすくしろよ!!!」と作業5分後には叫んでいることでしょう。 今回は、ほんの少しのスタイルシートと数行のJavascriptを追加するだけで、ウィジェットをPCビュー、スマホビューともにフィットさせることができる小技を紹介します。 1レスポンシ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
