CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
スタイルシート［CSS］/リスト/floatを使用した横並びのリスト - TAG index
フロートの指定方法については、ボックスのフロート（浮動化）を指定するをご覧ください。 回り込みの解除について 以下の使用例では、clearプロパティを使用してリスト項目の回り込み（横並び）を解除しています。（指定方法については、回り込みを解除するをご覧ください）
CSS Lecture: フッターでよく使われているナビゲーションのサンプル
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
Google HTML/CSS Style Guide
Revision 2.1 This style guide contains many details that are initially hidden from view. They are marked by the triangle icon, which you see here on your left. Click it now. You should see “Hooray” appear below. Hooray! Now you know you can expand points to get more details. Alternatively, there’s a “toggle all” at the top of this document. This document defines formatting and style rules for HTML
HTML5+CSS3の導入時に役立つ7つの設定
こんにちは、鴨田です。 個人的に仕事の大半はスマートフォン関連なので、 最近のマークアップはほとんど全てHTML5+CSS3で行っています。 とはいえ、PC向けのサイトではまだまだHTML4.01、XHTML1.0、CSS2.1を使用している場合が多いと思います。 ですので、今回はHTML5+CSS3を導入するにあたって、役立つと思う7つの設定について、書きたいと思います。 １．HTML5の初期テンプレート案 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>HTML5 初期テンプレート</title> <!-- reset.cssの設定 --> <link rel="stylesheet" media="screen" href="reset.css" /> <!-- Viewportの設定 --> <meta nam
CSS3 Linear Gradient Syntax Breakdown
This is not going to be an extensive post, but just something to serve as a quick reference, along with some interesting points from the spec. In another post, I’ll break down CSS3 radial gradients, but for now I’ll just focus on linear, to keep things simple. The Bare Minimum for All Supporting Browsers To get a linear gradient to work in all supporting browsers, this is how you do it: .element {
web高速化のためのコーダー向け圧縮ツール・サービスまとめ | バシャログ。
ゴールデンウィークは、ディズニーランドに連れていくと娘に約束してしまった ishida です。いったいどのくらい混雑するんだろう、どうせオイラはパレードの席取りでひたすら待つのさ。 さてさてweb高速化においてサーバー側ではなくフロントエンド側で対応できることもかなりあります。 CSSのセレクタ構文の最適化やCSSスプライトによる画像リクエスト数の削減であったり。 今回は、ファイル容量を削減に焦点を当てて圧縮ツール・サービスをまとめてみます。 Javascriptの圧縮 /packer/ http://dean.edwards.name/packer/ とってもシンプルな圧縮サービス。オプションで難読化することもできます。 JavascriptとCSSの圧縮 Compress javascript and css http://compressor.ebiene.de/ こちらもシンプルな
float解除の決定版。clearfixを考えたら、進化した。
現在この中でclearfixでよく使用されているプロパティは display:inline-block; height:1%(min-height:1%) zoom:1; でも良く考えたら、全て微妙です。 zoom:1はIEの独自仕様ですし、heightを使用する場合は、IE6,7に対応させるために2つのプロパティが必要です。 display:inline-blockもボックスの要素を変形させることになります。 hasLayoutのスイッチを見た時に、一番理に適ったプロパティはwidthかなと思いました。 子要素を囲む要素として、divやulなどデフォルトCSSがdisplay:blockのプロパティのものが多く、display:blockのプロパティの場合、width:100%で問題ないと思ったからです。 現在のブラウザ状況に適したclearfix 上記を踏まえ見直したclearfixが
横並びメニュー｜CSSの小技(指定テクニック)
ここでは横並びメニューサンプルとサンプルソースのみ掲載します。ロールオーバー及びfloatについては特に解説しません。 グローバルナビゲーション部分が#wraaper、#header等のボックス内に配置されているものとします。 テキストのみの場合 横並びメニューサンプル表示 HTML <div id="globalnavi"> <ul> <li><a href="#">Home</a></li> <li><a href="#">menu</a></li> <li><a href="#">menu</a></li> <li><a href="#">menu</a></li> <li><a href="#">menu</a></li> <li><a href="#">menu</a></li> <li><a href="#">menu</a></li> </ul> </div> css #gl
CSSでグラデーションを表現する - builder by ZDNet Japan
今時プライベートクラウドの作り方 2020年代のプライベートクラウド環境を AzureとVMwareを例に紹介 オープンソース活用はあたりまえ！ そんな今だからこそ改めて考える 企業ITにおけるOSS活用のメリットとリスク 高い従業員満足度と安心・安全 新時代にむけた理想の業務環境こそ Anywhere Workspaceが目指す未来 ID管理の基礎知識 新しい働き方におけるITガバナンスの 向上にむけて Kubernetes活用の最適解とは？ 今、注目のコンテナを活用した柔軟なIT基盤 運用、管理の課題を解決しメリットを最大化 現場主導のデジタル変革 ビジネス変革のための“ITの民主化” そして 変わるIT部門の役割 本当のデータ活用できていますか？ データドリブンがあたりまえと言われる今あらためて考えたいデータ活用のありかた 膨大なアクセスを支える屋台骨 高い安定性とパフォーマンスを両
base.cssメモ（初期化と基本設定） - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 CSSの初めでUA固有の表示設定を解除するリセットCSSと、フォントサイズ指定、そしてタグ自体の基本的な振る舞いを規定する指定、この３つを合わせたもの。 この部分はいつでもどんなサイトでも大抵は使いまわせるので、自分なりのものを用意している人も多いと思います。ちなみにSig.は「base.css」という名前で用意してますが、「default.css」とか「master.css」とかって命名も良く見かけますね。それはともかく。 このところデフォルト設定に関するレポを良く見かけるので、いちど当サイトでも纏めておこうかと思った次第です。（ま～「良い感じの方法を見つけたんだけ
floatと親ボックスの高さ（clearのもう一つの役割）
まったくの初心者さんが読むと混乱しそうなので書かなかったfloatの詳細について書いてみます。 IE7以下だと親の背景が表示されるのに、FF3.5、IE8など最近（現時点）のブラウザだと表示されない、という状況に遭遇することがあります。下の例は、float指定したボックス（あああ…）を子として、親ボックスが指定されています。 （FF3.5↓） （IE7↓） （HTML） <body> <div class="box-A"> <div class="box-B"> ああああああああああああああああああああああああああああああああああああああああああああああああああああああ </div> </div> </body> （CSS） body { margin:0px; padding:0px; font-size:14px; background-color:#ddd; } .box-A{/*
floatボックスが親ボックスを突き破る問題 - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 floatボックスが親ボックスを貫通して表示される問題について。いわゆるclearfixに関するアレコレ。 親ボックスの中に「box_A (float:left;)」と「box_B (float:right;)」があるとする。OperaやFirefox等のモダンブラウザで見てみると、中身（floatボックス）の高さが親ボックスに反映されていないことが判る。ちなみに上記のソースは以下。 <div style="width:140px; padding: 10px; border:1px solid #666; color: #333;"> <div style="flo
1本だけ線を引くCSS - スタイルシートTipsふぁくとりー
《2017年6月23日 16:30 公開/更新》 1本だけ線を引くCSS [ボックス,線] 文章や話題の区切りを示す目的とか、何らかのデザインなどでウェブページ内に「1本だけ線を引きたい」と思うことがあります。細い1本の横線を。CSS(スタイルシート)を使えば、太さ1ピクセルの線を1本だけ横方向に引くのも簡単です。「ボックスの枠線を活用する」方法と「hr要素を装飾する」方法がありますので、その2通りを解説。 CSS(スタイルシート)を使って1本だけ線を引く方法 方法1. ボックスの枠線として「1本線」を引くCSSの書き方 点線や破線はもっと太くすると違いが分かりやすい 直近の文字と1本線との間隔(距離)を調節したい場合 二重線を引くこともできるが、その場合は太さを「3px」以上にしないといけない 方法2. 区切りを示す目的としてhr要素を使う書き方 hr要素で引く水平線を破線にするCSSの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5 Reset
re-dzine.net situs togel online toto 2023 -
box-shadowを極めて「Mac風UI」を作る！ (1/6)
css-lecture.com
行間の調節 CSS line-height:
HTMLクイックリファレンス