[B! *css] komzのブックマーク

komz id:komz

*cssに関するkomzのブックマーク (205)

http://www.designwalker.com/2010/05/css3.html
komz 2010/05/18
*css
リンク
少しのコードで実装可能な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
komz 2010/04/16
*css
リンク
CSS適用前のIEのスタイル情報をまとめた『IE CSS』 | 100SHIKI
資料として便利そうなのでエントリー。 IE CSSはスタイルシート適用前にInternet Explorerがそれぞれの要素にどんなスタイルをあてているかをまとめたサイトだ。しかも丁寧に、IE6、IE7、IE8、IE9毎にまとめてくれている。実際にはCSSをリセットしてからサイトを作る人も多いかと思うが、IEは昔から広く使われていたので、いわゆる「標準的なインターネットっぽいスタイル」を知りたいときに便利かもしれないですな。デザイナーさんやWebサービスを作る人は知っておいていいかもですね。
komz 2010/03/31
*css
リンク
わずか四文字でIE6/7/8を区別するCSSハック | コリス
「\」「9」「*」「_」の四文字だけで、IE6, IE7, IE8を区別するCSSハックをNettuts+から紹介します。 <textarea name="code" class="css" cols="60" rows="5"> body { color: red; /* all browsers, of course */ color : green\9; /* IE8 and below */ } </textarea>
komz 2010/03/31
*css

ie
リンク
ページ送りのサンプル4種+2
ず、随分間が空いてしまった・・・何て言う現実。気付けば冬間近ですね。久々の更新が、特別目新しくもなんともないんですが、自分なりのページ送りサンプルを作ってみました。ホントは最初のだけ有れば事足りてるんですけど、ボリューム感を出す為に4種類+2にしてみました。サンプルサイトを見るサンプルをダウンロード地味にサンプル作ってたら時間取られたので、解説は軽めですが続きにて。今回作っておきたかったのは、センタリングさせたページ送りっす。とても似たようなエントリーが有るので、下記も参考にしてみるといいかと。ページ送りナビゲーションには display:inline-block が超便利 | バシャログ。不特定の数の横に並ぶブロック要素をセンタリングさせる | CSS-EBLOG 各サンプル共通で以下のスタイルが当たってます。 #main ul, #main ul li { marg
komz 2009/10/28
*css
リンク
【CSS】ページ送りナビゲーションには display:inline-block が超便利 | バシャログ。
こんばんは、ishidaです。 CSS2.1 で定義されている displayプロパティの値、inline-blockの使いどころを探してみたところ、ページ送りにかなり使えそうです。まずは以下のサンプルをご覧下さい。Yahoo 検索結果のページ送りデザインをまねています。ページ送りのサンプル 1 2 3 4 5 6 7 8 9 10 次へ> XHTML のサンプルは以下です。とてもシンプルです。 <ul class="pager"> <li><strong>1</strong></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">
komz 2009/09/11
webdesign

*css
リンク
[CSS]HTML 5用のブラウザのスタイルをリセットするスタイルシート
HTML 5用のブラウザのスタイルをリセットするスタイルシートをHTML5 Doctorから紹介します。 <textarea name="code" class="css" cols="60" rows="5"> /* html5doctor.com Reset Stylesheet v1.4 2009-07-27 Author: Richard Clark - http://richclarkdesign.com */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl,
komz 2009/07/29
*web制作

*css
リンク
CSSでゲームのような円形メニューを作るサンプル:phpspot開発日誌
Stu Nicholls | CSSplay | A circular menu with circular sub menus CSSでゲームのような円形メニューを作るサンプル。次のような、可愛い円形メニューが作れます。アイコンにカーソルを合わせると、「HOME」といったメニュー内容が表示されるため、迷うことなく使えそう。鉛筆にカーソルを合わせると、追加で２つのアイコンが表示され、次のアクションにいけます。人型のアイコンにカーソルを合わせると、４つのアイコンが表示。メールアイコンにあわせると次のアクションとなる４アイコンが表示。という感じで、なかなかユニークなナビゲーションで、触っているだけでもなんとなく楽しい感じがします。実装すると、それだけでアイデアの利いたサイトだなぁと思われそう。こうした枠の幅を最小限にしてすべての項目を見せつつスマートに配置できるという点でＵＩと
komz 2009/06/27
*css
リンク
スクロールバー　色メーカー　～自分でデザインするスクロールバー～
-当サイトについて- ☆当サイトはリンクフリーです。 ☆生成したタグをお使いの方は当サイトへリンクをしていただけると嬉しいです。（ですが、強制ではありません。）管理人｜免責プライバシーポリシー
komz 2009/05/04
webdesign

*css
リンク
Stu Nicholls | CSS PLAY | CSS Menu menu
Information Similar to the previous map, this one is a bit more formal but works on a similar principle. Unfortunately IE7 has another bug that requires a separation of the stylesheet into 'IE5.5/IE6' and 'IE7 plus all other browsers'. I will be documenting this bug in a later demonstration. Tested in IE5.5, IE6, IE7, Firefox v2.0.0.2 and Opera v9.10. Copyright Because of all the time and effort s
komz 2009/04/20
*css

*design
リンク
Fun With CSS Shapes - Nettuts+
I bet a bunch of you don’t realize that we can create the illusion of shapes by using 100% CSS. By utilizing the border property in creative ways, we can make some really interesting polygons. In this week’s screencast, we’ll figure out a way to create speech-bubbles without resorting to background images. Most of us, by now, are familiar with using the “-moz-border-radius” and “-webkit-border-rad
komz 2009/04/14
*css
リンク
よいCSS開発を行うための８のＴＩＰＳ:phpspot開発日誌
8 methods to bring your front end coding to rockstar levels | StylizedWeb.com よいCSS開発を行うための８のＴＩＰＳとして、当たり前かなと思うことから、なるほどというものがあったので以下にご紹介。・IDやクラス名にはより意味のあるものをつけようたとえば、boxとかwrapperとかcontainerとかは一般的ですね。一般的なものをつけておけばそれが何なのかすぐに分かるし、協業の際にも便利。全体のラッパー以外にも、headerとか、content とか footer とか固定で使っておくと一貫性が出ていい感じですね。まあ当たり前の人には当たり前なテクニックかも。・閉じコメントをつけて構造を分かりやすく <div id="header" class="section"> <div id="header-
komz 2009/04/01
*css

javascript
リンク
CSSのみで画像に違和感なく注釈を入れるサンプル:phpspot開発日誌
CSS Image Maps, Redux - Flickr-like Technique? CSSのみで画像に違和感なく注釈を入れるサンプルが紹介されています。次のサンプルを見れば、その利便性が分かるはずです。(JavaScriptは使っていません) 画像内の枠線にカーソルを合わせると説明表示
komz 2009/03/27
*css

画像
リンク
スタイルシートをすっきりと見やすくしてくれる『styleneat』 | 100SHIKI
シンプルで素敵なツールだったのでご紹介。 styleneatはCSSファイルを見やすく整形してくれるツールだ。これを使えばセレクタの親子関係がインデントされて見やすくなる。複雑な階層構造もこれならわかりやすい。またそれぞれのスタイルの属性をアルファベット順に並べたり、一行でまとめたり、といったオプションもある。スタイルシートがごちゃごちゃしてきたなぁ、というときに試してみるのはいかがだろうか。
komz 2009/03/26
*css
リンク
jQueryとCSSを使ってフォームのinput要素を楽に整列させる方法:phpspot開発日誌
Justify elements using jQuery and CSS jQueryとCSSを使ってフォームのinput要素を楽に整列させる方法が紹介されております。何ができるか？というのは次の図を見て頂くのがはやいでしょう。ビフォア ↓↓↓↓ アフターこれを実現するために、CSSとマークアップによって実現するのが普通ですが、jQueryによってもっとスマートに出来るようですね。具体的には、次のように、label の中で width がもっとも大きいもののサイズを得て、そのサイズにJavaScriptで調整しちゃうというものです。 $(document).ready(function() { var max = 0; $("label").each(function(){ if ($(this).width() > max) max = $(this).width(); });
komz 2009/03/26
javascript

*css

jquery
リンク
Simple scalable CSS based breadcrumbs | Veerle's blog
You are looking at archived content. The hot new stuff is happening at Veerle's blog 3.0. You should check it out! A few days ago I was implementing breadcrumbs in a website I’m working on. Not that I sincerely believe every site needs this, but on some occasions and to some users breadcrumbs are practical. Anyhow, it gave me the idea to write an article about it because it’s been a while since I
komz 2009/02/16
*css
リンク
おしゃれなリスト実装サンプル:phpspot開発日誌
jQuery Sequential List おしゃれなリスト実装サンプル。次のようなリストをjQueryを活用して簡単実装するサンプルです。プレーンなリスト要素に、jQueryを使って、classを it em1, it em2のように自動付与していきます。あらかじめ、 li.it em1, li.it em2 のようにして定義しておいたCSSを適用させて、実現されています。 JavaScript+CSSのテクニックとしては勿論使えるものですが、そもそものリストがカッコいいので再利用したいところですね。丸いバッジ型もなかなかセンスがいいです。
komz 2009/02/12
*javascript

*css

webdesign
リンク
CSSとdivを使った画像先読みテクニック:phpspot開発日誌
Better Image Caching with CSS ? Perishable Press CSSを使った画像先読みテクニック CSSの中に、background-image として指定しておくことで読み込ませるような方法もありますが、<div> と position を使って実現する方法要は、position指定した見えないdivの中に<img>を仕込んで画像を先読みさせるというものみたい。 HTML <div id="preloader"> <img src="http://domain.tld/path/images/01.png" width="1" height="1" /> <img src="http://domain.tld/path/images/02.png" width="1" height="1" /> <img src="http://domain.tld
komz 2009/01/23
*css

*tips
リンク
さりげないレイアウト調整パネル | SIMPLE*SIMPLE
昨日と同じサイトから。右下にある「レイアウト調整パネル」がさりげなくていい感じです。最初は付箋のはしっこだけが見えていて、クリックするとメニューが現れます。 ↑ 最近GIFアニメばっかだなｗ。文字の大きさとか一行の最大文字数が決められますよ。アクセシビリティ的に良いですね。このスクリプト、どこかで配布されているのかな・・・。実際に動作している様子は以下からどうぞ。画面右下です。 » FirefoxまとめサイトのPukiwikiスキン “White flow” – Liner Note
komz 2009/01/23
*css

webdesign
リンク
スクロールすると変化しながらついてくる画像 | SIMPLE*SIMPLE
CSSでこんなこともできるのですねぇ。すごい。 ↑ アニメーションでどうぞ（クリックすると実際のデモ画面へ）。応用すると次のような効果も実現できますね。これもおもしろい。 ↑ シュレッダーちっくに（クリックで動作する画面へ）。アイデア次第でいろいろ使えそうですね。実際のマークアップの仕方は以下に詳しいですよ。 » Mike asks the CSS Guy about a scrolling trick with background images (Ask the CSS Guy)
komz 2009/01/15
*css
リンク
1 2 3 4 5 6 7 8 9 10 次のページ