すごく役立った！サイト制作でさりげなく使われているCSSテクニックまとめ
作成：2014/04/21 更新：2014/10/24 Web制作 > 前回コーポレートサイト制作が捗るjQuery プラグインをまとめましたが、今回はCSS版ということで、使用頻度が高いものと、これから必要になりそうなものを、忘れないようにメモしておきます。コーポレートサイトやWeb サービスサイトでさりげなく使われているものや、今後増えそうなものなど。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 横並び １．今までの回り込み解除 ２．横並びや並び順 ３．均等に並べる／段組み ナビゲーションメニュー ４．多階層 ドロップダウン ５．amazon風 メガドロップダウン ６．ドロワーメニュー コンテンツメニュー ７．モーダルウィンドウ ８．アコーディオン ９．タブパネル テーブル １０．ストライプテーブル １１．レスポンシブ＋テーブル リスト １２．カウント
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
【CSS】覚えておいて損はない CSS の定番テクニック BEST 5 | バシャログ。
ネットで検索をすると CSS のテクニックが山ほど公開されていますが、実際に商用サイトの制作をしていて個人的に利用する頻度が高いテクニックの BEST 5 をご紹介します。 ちょっと凝ったデザインのサイトをコーディングする時に、これらのテクニックに助けられることが多いです。どれも覚えておいて損はないものばかりです！ IE6 でも min-height を使う 例えば、異なる高さのブロックを float しつつ底辺のラインを揃えたい時などに、「IE6 が min-height に対応していたら楽なのに！」と思うことがありますが、以下のテクニックを使えば IE6 でも min-height（相当）の適用が可能になります。 [CREAMU]CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 IE6 に mi
画像をCSSだけでハイクオリティに縮小サムネイル化する方法:phpspot開発日誌
Tip: High quality CSS thumbnails in IE7 ・Devthought 画像をCSSだけでハイクオリティに縮小サムネイル化する方法が紹介されています。 普通、IEで、img に対して、width, height 指定すると、画像が汚く縮小されちゃってましたが、CSSの指定をしちゃうとそれが解決されるということのようです。 具体的には以下のCSS指定によってそれが可能みたいです。 img { -ms-interpolation-mode: bicubic; } デモページ う〜ん、縮小してもとっても綺麗です。 FirefoxやChromeの場合は何も指定しなくても綺麗に縮小される、っていうのも知りませんでした。 これは、サーバサイドでサムネイルを生成しなくて良くなる場面が出てきて開発者としては手間の削減になりますね。 転送量を考えれば、サムネイルが完全に不要に
CSSで画像の簡易ロールオーバーを行う方法 | パシのSEOブログ
この記事は、全く役に立たないものとなっています。 画像のロールオーバー ロールオーバー（マウスオーバー）とはページ中のボタン画像などにマウスカーソルが移動すると、その部分のイメージが違う画像に変わるようにする手法のことです。 マウスをのせてね マウスが載った途端にイメージ画像が変化することによってユーザのクリックを誘導します。リンクにはなっていない場合もありますが、これは多分に自己満足でしょう。 ロールオーバーはめんどくさいし重くなる ロールオーバーを行うには、代替の画像を作成しJavaやCSSで設定する必要があり、一枚一枚代替画像を作るのは結構めんどくさい作業です。 明らかにボタンと分かる画像に、ロールオーバーを指定する必要があるかどうかは意見の分かれる所ですが、サイトは極力軽い方が良いと思うので、使いすぎにも注意が必要です。 簡易ロールオーバーもどき そこで、代替画像を作る必要が無くロ
[CSS]マージンとパディングの使い分けをおさらい | コリス
CSSnewbieのエントリーから、ボックスモデルのマージン(margin)とパディング(padding)の利用シーンにおける違いを紹介します。 When to Use Margins and Padding マージン(margin)を採用する場合 パディング(padding)を採用する場合 ブラウザによる問題 マージン(margin)を採用する場合 borderの外側にスペースが必要な場合。 スペースに背景色(画像)を適用したくない場合。 上下に隣接したボックスにスペースを設ける場合、マージンの相殺を期待して、大きいサイズを有効にしたい場合。 例：15px + 20px の場合、スペースは20px。 ※相殺されない場合もあります。 パディング(padding)を採用する場合 borderの内側にスペースが必要な場合。 スペースに背景色(画像)を適用したい場合。 上下に隣接したボックスにス
画像とかの横にあるテキストを上下中央に
←こういう感じで、画像の横にあるテキストを画像に対して上下中央にするってーのは、今まで出来ないと思ってたんす。 だけども、ヨモツネットさんの記事でヨモツネット[日記] ≫ CSS で簡単に上下中央揃えを実現するってが紹介されてたので、試して見ました！ display: table-cell;がポイントになってて、IEはハックで対応みたいな感じです。 デモページ 画像とかの横にあるテキストを上下中央にする。のデモページ ヨモツネットさんとまるっと同じサンプルだとアレなので、ちょっとだけ実用的な感じでつくってみましたよっと。 ちょっと、IE6で確認してないので、ダメだったらご連絡ください。 IE6対応しました。ハックの書き方がいけなかったようです。すみません。 div.centeringTest p { display: table-cell; vertical-align: middle;
写真に枠線を付ける方法｜物欲道
物欲道資本主義の恩恵を浴びて育つ物欲の魂（タマシイ）。 ビバ！ショッピング！写真に枠線を付ける方法 なんだか、頻繁に質問を受けるので、ここで説明します。 画像にスタイルシートで枠線を付ける方法です。 意味や理由は説明すると長くなるので省きますね。 まずスキンcssに以下の設定を追加します。 追加場所はどこでも良いと思いますが、一番下が無難かなあ。 .waku{ background-color:#ffffff; padding:10px; border: 1px solid #999999; } 記事作成画面でHTMLタグを表示させ、<img>タグ内に class="waku"を挿入します。 例：<img src="http://～10029422287.jpg" alt="" border="0" class="waku" /> これで、物欲道と同じ枠が表示さ
ページ全体に枠線をつけるCSSテクニック:phpspot開発日誌
CSS Trick: Creating a?Body-Border - CSS-Tricks Hicksdesign has been “fiddling” with their site design. ページ全体に枠線をつけるCSSテクニック。 ↓ブラウザのサイズを変更しても、水色の枠が画面にフィットするCSSサンプルです。 まず、マークアップ。上下左右用にdivを作成 <div id="left"></div> <div id="right"></div> <div id="top"></div> <div id="bottom"></div> 次にCSS。left,right,top,bottomのtop,left,rightなどを調節して、上下左右に設定して枠線を表現しています。 #top, #bottom, #left, #right { background: #a5ebff
スタイルシート講座 - 超初心者のためのホームページ作成講座
◆リストマークを変更する (css file) ul.kuro{ list-style-type:disc; } ul.siro{ list-style-type:circle; } ul.sikaku{ list-style-type:square; } ul.suuji{ list-style-type:decimal; } ul.roma1{ list-style-type:lower-roman; } ul.roma2{ list-style-type:upper-roman; } ul.alpha1{ list-style-type:lower-alpha; } ul.alpha2{ list-style-type:upper-alpha; } ul.nasi{ list-style-type:none; } (html file) <ul class="kuro"><li>In
これは便利! CSSのコピペはこのコンテンツで - SitePoint CSS Reference | ネット | マイコミジャーナル
SitePoint CSS Reference SitePointは31日(米国時間)、CSSのリファレンスサイトSitePoint CSS Referenceを公開した。同サイトはTommy Olsson氏およびPaul O'Brien氏という著名な2人のCSSエキスパートによって執筆されたもの。そのままコピー&ペーストして使えるようなCSSのコードと説明がまとめられたサイトで、CSSを編集するWebデザイナはぜひともブックマークしておきたいサイトだ。 SitePoint CSS Referenceは公開以前となるプライベートベータテストの状態で、すでにSitePointコミュニティからのフィードバックを受けて改善が実施されている。いわば現状でのCSSベストプラクティスがまとまっているコンテンツだ。 SitePoint CSS Reference - そのまま使えるサンプルとブラウザでの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
背景画像をリンクにする？
KASOKU – Just another WordPress site
マウスオーバーをデザインする | DesignWalker
CSSやHTMLを知らなくてもレイアウトやタブや角丸が作成できる -Layout Generators
IDEA * IDEA
120以上生成できるCSSメニュー作成ジェネレータ『IzzyMenu』レビュー*ホームページを作る人のネタ帳
IDEA * IDEA
ページ内でリストごと異なるマークを表示する
2007年度web制作者の為のまとめ再構築30選*ホームページを作る人のネタ帳
