すごく役立った！サイト制作でさりげなく使われているCSSテクニックまとめ
作成：2014/04/21 更新：2014/10/24 Web制作 > 前回コーポレートサイト制作が捗るjQuery プラグインをまとめましたが、今回はCSS版ということで、使用頻度が高いものと、これから必要になりそうなものを、忘れないようにメモしておきます。コーポレートサイトやWeb サービスサイトでさりげなく使われているものや、今後増えそうなものなど。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 横並び １．今までの回り込み解除 ２．横並びや並び順 ３．均等に並べる／段組み ナビゲーションメニュー ４．多階層 ドロップダウン ５．amazon風 メガドロップダウン ６．ドロワーメニュー コンテンツメニュー ７．モーダルウィンドウ ８．アコーディオン ９．タブパネル テーブル １０．ストライプテーブル １１．レスポンシブ＋テーブル リスト １２．カウント
floatを解除する手法のclearfix と 次世代のレイアウトの話
floatを解除する手法のclearfix と 次世代のレイアウトの話 2013-06-20 / 2013-06-30 2011年にclearfixについて記事を書きましたが、Micro clearfixなどの新しい手法も出てきました。 記事を書いてから2年が経ち、色々思うところも出てきたので、改めてclearfixについて書きます。 floatを解除するには CSSでレイアウトの構築を行う際に、よくfloatプロパティが用いられます。 しかしfloatを使用すると、「親の背景が表示されない」「下の段のレイアウトが崩れる」などのトラブルが起こりやすくなります。 floatプロパティの特性 親の背景が表示されない理由は、floatプロパティを指定しているボックスが浮動化し、通常のボックスのフローから外されることが原因です。 通常フローから外されたボックスは、親のボックスの高さを認識できなくな
webデザイン中の舌打ちを限りなく減らすCSSでの装飾 * prasm（プラズム）
ブログをデザインしていると、うわー、ココがもっとこうなってくれればなぁ！ と叫びながら頭をかきむしることがある。訳ですが。 実は知らないだけで、割と簡単にクリア出来るコトがいろいろとあります。知っておくとwebデザインが2秒くらい加速しそうなあれこれをお知らせします。 divの幅をwidthだけで制御したいんじゃ！divの装飾をしたことがある方なら、実は結構計算が面倒なことをご存じでしょう。 パディングやボーダーなんかを設定したい場合に、widthからボーダー分を2px引いて、パディングがえーっと、うわーーーーーカラム崩れた！死ね死ね！ってなったことがある方、多いんじゃないですかね。いいんです、僕もそうです。せめてpaddingに関しては内包されろや！後からpaddingだけ変えたら大変な目に遭ったわ！ゴルァ！を繰り返しながら大人になるんです。 後からやっぱボーダー6pxにしたい！って変更
記事中の画像に縁や枠をつけるCSS設定 | アフィリエイト野郎！
記事に画像を貼る場合、見栄えに気を配って画像を加工する方も多いと思いますが、画像を一枚一枚加工する作業は数が多くなると意外と面倒なものですよね。 私は、以前までコンテンツ部分の背景と同化しないようにする事と、画像の文字を読みやすくするために、コントラストで少し暗く調整していたのですが、それすらも面倒になってきたので、最近はCSSで画像に枠をつける設定に変更しました。 CSSで設定しておけば、画像をそのまま貼るだけでそれなりの見栄えになります。以前、「マウスオーバーしたときにリンクを1px右下にずらす」という記事を書きましたが、それと併用しても良いと思います。 画像に枠をつけるCSS設定例 img { border: 4px solid #DFDFDF; padding: 3px; background-color: #FFF; } 画像の外側にpaddingで余白を取って、そこに背景色を指
duree dpe
Par la rédaction Rédigé le 2021-05-25 Les diagnostics de performance énergétique dpe doit être affiché pendant toute sa durée de validité de 10 ans l'affichage doit être visible par le locataire. Dans le diagnostic je pense que tout est résumé une super équipe sur laquelle nous pouvons compter à tout moment de surcroit très sympathique. De la performance énergétique dpe logement tous les cas à par
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Public Service Announcement: Careful With Your Nested Border-Radii | CSS-Tricks