[CSS]すぐに利用できる、美しいボックスシャドウと角丸のスタイルシートのまとめ
一昔前はPhotoshopを使用しないと作成できなかったデザインをCSS3で実装するシリーズのナビゲーション編から、すぐに利用できるボックスシャドウと角丸のスタイルシートを紹介します。 CSS3 vs. Photoshop: Rounded Corners and Box Shadows [ad#ad-2] 下記は、その中からボックスシャドウと角丸に関するスタイルシートをピックアップしたものです。 ボックスシャドウ -box-shadow 角丸 -border-radius 対応ブラウザ ボックスシャドウ -box-shadow HTMLはsection要素を使用していますが、これはdiv要素などでもそのまま利用できます。
[CSS]画像を使用せずに、背景をストライプやチェック柄にするスタイルシート | コリス
Checkerboard, striped & other background patterns with CSS3 gradients [ad#ad-2] 対応ブラウザはFirefox 3.6+, Chrome, Safariです。 デモページでは画像を使用せずに、ストライプなど計6種類の背景パターンが紹介されています。 デモページ [ad#ad-2] スタイルシートは下記のようになります。 CSS：ストライプ 全てのベースとなる指定です。 L.8-10で、ストライプのサイズを指定します。 .stripes { height: 250px; width: 375px; float: left; margin: 10px; -webkit-background-size: 50px 50px; -moz-background-size: 50px 50px; background-siz
[CSS]画像を使用しないでApple風のパンくずを作成するチュートリアル
階層を区切る三角のデザインが特徴的なApple風のパンくずを同一の色相でカラーリングしたものを実装するチュートリアルを紹介します。 三角の箇所は画像を使用しないで、CSSで実装されています。 Breadcrumb Navigation with CSS Triangles デモページ [ad#ad-2] HTML -マークアップ パンくずはリスト要素で実装します。 シンプルでクリーンに実装するために、各アイテムにはclassを使用しません。 HTML <ul class="breadcrumb"> <li><a href="#">トップページ</a></li> <li><a href="#">第二階層</a></li> <li><a href="#">第三階層</a></li> <li><a href="#">第四階層</a></li> <li><a href="#">現在位置</a></
もう、class名やid名で悩まないんだからっ！！｜CSS HappyLife
class名やid名って付ける時悩みませんか？ 今でもボクは結構悩むんですが、そんな悩みを解決する為に、人さまのソース覗きまくってよくあるclass名とid名を拾ってきました。 これで、チョットだけ作業効率アップ！？ 2010年6月10日追記： この記事自体、2007年 1月15日に書かれてるんでかなり古いです。 あくまでも参考程度に留めてもらうのが良いかと思います。 今だったら、html5の要素を参考にしたりして付けるのが、今後の事を考えると良いのかなーと思います。 また、善し悪しの判断はせずに公開しているものですが、位置に関するのは仕様変更に弱くなるのでオススメはしません。 全体に使えそうな感じ wrap wrapper top-wrapper wrapperAll frame mframe all-frame container page pagetop all allContent
Firebugの使い方 | THE HAM MEDIA
Webサイト制作をしている方には、必需品なんじゃないかと思われるくらい便利なFirefoxのアドオン『Firebug』。HTMLやCSSのコーディングを担当している人の多くはいれているアドオンですね。 Firebugを入れて使っている人は多いようなのですが、意外と知られていない機能が盛り沢山だったということが、先日の勉強会（SaCSS）にて発覚！使っているといっても、一部の機能に限られてしまっているようなのです。 もちろん「そんな機能知ってるよ！」というくらい使っている人も多いと思います。しかし、そんなに使いこなせていないや、活用できていない！という人も勉強会の時に多かったように、実際にも多いはず！ Firebugの使い方をもう少し知っていると、Webサイトの制作の時に便利だ！と思える場面が多々でてくるので、是否今回ご紹介する機能は抑えておき、活用してみてください。 HTML&CSSの確認
無駄なdiv要素やclassだらけのマークアップから卒業する方法
グリッドベースのレイアウトを作成すると、ついついdiv要素を多用してしまいがちですが、意味のあるデータにはそれに適した要素を使用し、無駄なdiv要素やclassだらけのマークアップから卒業する方法をWebdesigner Depotから紹介します。 Fight Div-itis and Class-itis With the 960 Grid System 下記は各ポイントを意訳したものです。 はじめに CSSのフレームワーク：960.gsの場合 classの乱用を避ける リスト要素の使用 画像とキャプションの使用 複数の見出しとパラグラフの使用 子要素のclassは親要素に はじめに 数年前までウェブページの設計はテーブルがスタンダードでした。そしてCSSはそれを大きく変え、今日ではCSSのフレームワークがウェブページの設計を容易にしてくれています。 しかしながら、このCSSのフレームワ
[CSS]画像にも負けないクオリティのボタンを実装するスタイルシート | コリス
CSS3を使用して、ディテールにこだわったボタンを実装するスタイルシートのチュートリアルをInferenceから紹介します。 Creating a Realistic Looking Button with CSS3 実装されたデモは、元記事の下「Show and Tell」で確認できます。 対応ブラウザはFx3.6, Safari4, Chromeで、IE8では角丸とアクティブ時のスタイルが欠けます。 実装：HTML ディテールにこだわっているため、HTMLは煩雑なものになっています。これらはCSSの指定に意味をなします。 <textarea name="code" class="html" cols="60" rows="5"> <a class="button"><b class="o"><b class="m"><b>Post</b></b></b></a> </textarea>
少しのコードで実装可能な20のCSS小技集
2019年5月17日 CSS CSSハックに続き、このCSS小技集も私のブックマークにずらりと並んでいたので、整理も兼ねて記事にしてみました。CSSのお勉強を始めたばかりの頃にブックマークしておいたものも多数。。ということで初心者さんからベテランさんまで参考にしてみてください！ ↑私が10年以上利用している会計ソフト！ コードはサンプル内の「HTML」や「CSS」タブをクリックしてくださいね！ 少しのコードで実装可能なCSS小技集 シリーズ 【第2弾】少しのコードで実装可能な20のCSS小技集 【第3弾】少しのコードで実装可能な15のCSS小技集 まずはCSS基礎編 1. divを中央揃えにする ほとんどのサイトが基準となるdivを画面の中央揃えに設定しています。左右のmarginをautoにして中央揃えに。 See the Pen Center Div by Mana (@manabox
覚えて良かったCSSテクニック « zaru blog
ここ最近、覚えてよかったなーと思ったCSSテクニックをまとめてみる CSSテクニックは時代とともに変わっていくけれど、ここ1年ほどスタメンレベルで使うCSSテクニックが絞られてきたので、ここらでちょっと個人的にもまとめておこうかと。 liボックス 幅：190px マージン：15px liボックス ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。 liボックス ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。 <li>にはクラスを指定せずに、左右にぴったりくっ付くように配置が可能。 <style type="text/css"> #box1{ width: 600px; } ul{ width: 615px; margin: 0 -15px 0 0; overflow: hidden; _zoom: 1; font-size:7
フッタをブラウザ下部に固定配置するCSSテクニック – creamu
フッタをブラウザ下部に固定配置したい。 そんなときにおすすめなのが、『cleanstickyfooter』。フッタをブラウザ下部に固定配置するCSSテクニックです。 IE6とそれ以前のブラウザ用に、ハックは1つしか使っていないとのこと。min-heightの部分のハックのようですね。 ほかには同様のテクニックに以下のものがありますが、前者はwidth:100%のフッタには対応していないようです。 CSS Sticky Footer ブラウザの下部にフッターを固定表示する『CSS Sticky Footer』 対応ブラウザは以下の通り。 ・Firefox (2, 3, 3.5) ・Internet Explorer (6, 7, 8) ・Safari ・Opera ・Google Crome ぜひ使ってみてはいかがでしょうか？ cleanstickyfooter 今日もいい天気ですね〜。タス
cssの情報・まとめ - かちびと.net
cssの情報まとめです。ローカル 環境にストックしていた情報を 開放してみますのでシェアして 頂ければ幸いです。内容は 結構偏っていると思いますので 参考程度になさってください。 全てのcss情報が有るわけではありません。主観でストックしていたリンク集です。ツールとかメニュー関連とかハックとかいろいろ188の情報です。 ツール オンラインのcssツール。 CSS Validation Service / W3C検証サービス日本語版 RoundedCornr / 角丸のHTML・CSSコードを生成してくれる CSS Type Set / ファミリー、色、単語間、行間等をプレビューで確認 CSS Text Wrapper / 様々な形のテキストの回りこみを簡単に実現できる CSS Builder / オンラインでスタイルを生成可能 Spiffy Box / cssによる角丸を簡単に生成 The
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のちょっと小粋なテクニック13個 - かちびと.net
小粋の定義は分かりませんが、ちょっと「おっ」と思えるcssのテクニックをいろいろと。以前、記事にさせていただいた、ｃｓｓとHTMLのみで3D効果を実現したテクニックで他にも無いかなと思って同様に驚いたテクニックです。 3Dのテクニック同様に実用性があるかどうかは考えていませんが、何かのヒントになるかも・・と思い、cssplayでちょっと探してみましたのでいくつかのｃｓｓを使った良アイデアや高度なテクニックなど。 ざっとしか見ていませんが、多分jsは使ってないと思います。 Film strip gallery with information text ネガポジ加工された画像にフィルムのような枠をつけてマウスオーバーで写真を表示するギャラリー。 Film strip gallery with information text Super animation – just for the fu
JavaScriptなしでCSSのみで実現するクールなドロップダウンのサンプル:phpspot開発日誌
JavaScriptなしでCSSのみで実現するクールなドロップダウンのサンプルが公開されています。 次のように、明らかにJavaScript 使ってるんじゃないか？と思うのですが、CSSのみでelement:hoverを使って実現されています。 ソースコードも解説されているのでこのテクニックについて覚えておいてもよさそう。 以下のエントリを参照してください。 Incredible Drop Down Menu Solution With CSS Only | AEXT.NET 関連エントリ jQueryで幅の大きなドロップダウンメニュー作成チュートリアル セクシーなドロップダウンメニュー実装サンプル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
綺麗なボックスのスタイルシートを簡単に生成できるWebサービス フリーソフトの樹
指定した画像をCSSにしてくれるジェネレータ・・・『Img to CSS』 | 100SHIKI
CSSの知識をもっと深める30+2の小技テクニック集｜Webpark
リンク画像の枠線を消す方法 - 森薫の日記
わずか四文字でIE6/7/8を区別するCSSハック | コリス
IDEA * IDEA
