簡単すぎてびっくり！CSSグリッドをレスポンシブデザインに活用するための詳細手順を紹介
Webデザインを行う際に、複数の閲覧デバイスを想定してデザインを行うのは今では当たり前になっています。オンラインでのWebページの閲覧の4分の3はモバイルなので、モバイルでも快適に閲覧できるように、デザインを考えていかなければなりません。 Webデザインで段組を行う手法はさまざまありますが、現時点で最も手っ取り早いのはCSSグリッドを利用する方法です。CSSグリッドは見た目の段組を想定してコーディングできるので、より直感的な段組を行うことができます。 そこで今回は、CSSグリッドをレスポンシブデザインに活用するための詳細手順を紹介していきます。何かと概念的なCSSグリッドですが、ここでレスポンシブ対応するにはどうすればよいか、まとめておきましょう。 CSSグリッドでレスポンシブデザインを実装しよう イメージ画像 floatやflexboxのような「1次元」レイアウトに対して、「2次元レイア
背景デザインを楽しくする、参考にしたい HTML/CSS スニペットまとめ
CSS3 が主要ブラウザに対応したことから、これまではむずかしかったアイデアやコンセプトも、手軽にスタイリングできるようになってきています。今回は、背景デザインにスパイスを加えるエフェクト用コードスニペットを、コード共有サイト CodePen からピックアップしまとめています。 コピペで利用できる手軽なものから、これってどう表現するんだろうという面白スタリングまで、注目をあつめるテクニックを中心に揃えています。デザイン制作に悩んだときに活用してみてはいかがでしょう。 詳細は以下から。 背景デザインを楽しくする、参考にしたい HTML/CSS スニペットまとめ ※ デモが動かないときは、「RETURN」ボタンをクリックすることで、再読み込みされます。 ※ ページの読み込みに多少時間がかかります、すこし待ってからスクロールするとスムーズに表示されます。 Pure CSS Cinema Effe
すげー便利！ドメイン別にスタイルシート（CSS）を当てる方法。
ドメイン別にスタイルシートを当てる方法。 iframe[src*="youtube.com"]{ width: 500px; height: auto; } iframe[src*="nicovideo.jp"]{ width: 320px; height: auto; } 例えば、YouTubeの外部プレイヤー（iframe）の横幅は500にしたいけど、ニコニコ動画の外部プレイヤーは320にしたいときは、上のように書くと上手く動作します。 a[href*="wayohoo.com"]{ color: red; } a[href*="goryugo.com"]{ color: blue; } ちなみに、aタグをドメイン別に指定する場合はこのようになります。(wayohoo.comは青色、goryugo.comは赤色とする場合) タグ名[属性名*="URL"]{ /* CSSの中身 */ }
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
