CSSセレクタのチートシートでは、要素セレクタ / classセレクタ / idセレクタ / 属性セレクタ / 複数セレクタ / 子孫セレクタ / 兄弟セレクタ / 隣接セレクタ / 擬似クラス / 擬似要素 / 全称セレクターから37パターンのセレクタの説明と実際のコードで使い方サンプルを紹介しています。
CSSセレクタのチートシート｜37パターンを一覧で解説
CSSセレクタのチートシートでは、要素セレクタ / classセレクタ / idセレクタ / 属性セレクタ / 複数セレクタ / 子孫セレクタ / 兄弟セレクタ / 隣接セレクタ / 擬似クラス / 擬似要素 / 全称セレクターから37パターンのセレクタの説明と実際のコードで使い方サンプルを紹介しています。
フラットデザインで使われている色｜カラーコード付き
こんにちは、コプロシステムWebデザイングループの石川です。 当ブログの6/12付エントリー『UIデザインの2013年のトレンド「フラットデザイン」の事例・16個』で、 2011～2012年頃から「フラットデザイン」というデザイン手法が注目を集め始めていること Googleトレンドの指標を見ると2013年に入ってから急上昇をし始めていて、間違いなく今年のWebデザインのトレンドであること フラットデザインとは、特徴 事例サイトの紹介 などを書かせていただきました。 アクセス解析ツールでアクセス状況を見ていると、「レスポンシブWebデザイン」について書いているエントリーの次に、「フラットデザイン」について書いている上記エントリーにアクセスが集中している傾向にありましたので、今回のエントリーでは、そのフラットデザインなWebサイトたちでどんな色が使われているか、前回ご紹介した事例サイト（＋α）
cssだけでcheckboxやradioのデザインを変更
CSS3の 隣接セレクタ、属性セレクタ、擬似セレクタの合わせ技で input[type=checkbox]:checked + label の書式を駆使すると、スタイルシートだけでcheckboxやradioのデザインを変更できます。 CSS3のセレクタに対応していないIE8以下では 通常のラジオボタンやチェックボックスが表示されます。 応用編で、cssだけでラジオボタンを2択スイッチに変更も紹介しています。 htmlの構成は inputの次にlabelを配置し、idとforで連動させるようにしておきます。 <div class="sample"> <div> <input type="radio" name="sample-radio" checked="checked" id="radio-1" /><label for="radio-1">radio 1</label> <input
Web フォントでアイコン表示。 Font Awesome 使ってみた
Blog のデザインをリニューアルしました報告でもちょっと書いたんですが、アイコン関係を Web フォントを使ってやってみました。その時に利用させてもらったのが 「Font Awesome」 でして、今回はその簡単な使い方について書いてみようと思います。 Font Awesome, the iconic font designed for use with Twitter Bootstrap Font Awesome は簡単に言ってしまえば、Twitter Bootstrap のアイコンを Web フォントで扱えるようにしたもの。Twitter Bootstrap のアイコンは CSS Sprite で利用できるようにひとまとめになった 「画像」 として提供されていますが、Web フォントとして提供されることで、よりサイズ、カラーなどを柔軟に扱えるようになっています。 Font Aweso
理解しておきたい、CSSによるインラインレイアウトの仕組み（font-size／line-height編）Inline Layout─Frontrend Conference
理解しておきたい、CSSによるインラインレイアウトの仕組み（font-size／line-height編）Inline Layout─Frontrend Conference 高津戸壮（株式会社ピクセルグリッド） この記事は、Frontrend Conferenceのセッション「Inline layout」でお話させていただいた内容を基に、連載記事（全4回）として書き起こしたものです。今回は第１回目です。 はじめに Frontrend Conferenceでは、皆さんが新しい技術について話していた中、私からはCSS2.1のお話をさせていただきました。私が解説したのは、CSSを書く上で欠かせない、以下の4つについてです。 font-size line-height vertical-align inline-block トレンドとはほど遠い内容ではありますが、多くの人にとって、なんとなく感覚
CSSで出来るレスポンシブ対応を考えた table レイアウト | ウェブ戦略・コンサルティング UNIONNET Inc.
2014.08.18 ▼2021年最新版 【コピペOK】制作会社が実際に使っている、レスポンシブ対応のtableレイアウト スマホ対応・レスポンシブが当たり前になってきてるこの時代、コーダーさんにとって table がなかなかやっかいものになってきてますね… 会社概要くらいならまだ良いんですが、情報量が多い table はそのままでは 320px で閲覧した際、なかなか悲惨な事に… 対応方法としては『responsive-table.js』を代表に、様々なやり方がありますが、今回はCSSで出来る事を紹介したいと思います。 目次 2セルの場合の使用した例 横に長い場合 overflow-x と inline-block を使用した例 リスト風にした場合 list-item を使用した例 最後に 2セルの場合の使用した例 2セルでよく作られてる、会社概要やフォームなどで使えるかと思います。 『
CSS： marginの正しい理解 - kojika17
toggle()や変数、calc、:matchなど、今までにないCSSプロパティ、セレクタが提案・実装されて、CSS3, CSS4も楽しくなってきています。 border-radiusや、box-shadowなども、古いAndroidブラウザ以外なら、prefixなしで使える状況も増えてきました。 最新技術は、これから必要になってくるかもしれませんが、基本も大切です。 float や position など、CSSコーディングを悩ませるタネはいくつもありますが、今回はその中でも私がCSSで一番難しいと思う margin について書きます。 「marginはバグが多い」という声をたまに聞きます。 しかし話を聞いてみると、正常な動作をバグと間違って認識しているケースもあります。 marginを正しく理解することによって、効率的なレイアウトを構築できますので、基本的な内容ですが、読んで頂ければ幸
CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ
最近改めて CSS の基本、要素の配置、レイアウトについて学習しました。過去に CSS でのレイアウトなどの記事を書いた事があるんですけど、改めて勉強してみたら、いろいろ間違えて解釈していたなー ... っていうか、基本が分かってなかったんだなーと反省 ...。今回は CSS の基本中の基本、視覚整形モデルについてまとめてみました。 Webデザインをする上で、必須とも言えるのが CSS …。このブログ – Webデザインレシピでも、過去に CSS について書いた記事がいくつかあります。最近 … でもないけど、以下のふたつは CSS でのレイアウトについて、いろいろと書いた記事でした。 CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ – 2011年 6月17日 CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め -2011年 4月21日 で
TableKit - HTMLのテーブルで任意の列をソート（並び替え）
ウェブサイトの技術っておもしろいよね RDF Site Summary RSS 2.0 このブログは、ウェブサイトで使われる様々な技術や表現についてトモヒロが実際に作成したり 考えたりした事を綴るブログです。 仕事や趣味等についても綴っていきたいと思っています。 おすすめ 最近の記事 カテゴリ ウェブ技術の実践 【Javascript】 フォームの見栄えを良くする 軽量アコーディオンスライダー 【Javascript】[Ajax] 自動入力補完 データ処理中に画像を表示 【Javascript】[Ajax] [prototype] [jQuery] 郵便番号から住所の自動補完 【Javascript】[prototype] テーブルで列の並べ替え 【Javascript】[jQuery] アニメーションするテキストリンク 注目させたい部分を強調 【PHP】 キーワードクラウド 【CSS】
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
コーディングしにくいデザインをHTMLとCSSのみで組んでみた(前編)
コーディングしにくいデザインをHTMLとCSSのみで組んでみた(前編) 2011-01-02 いつも通りデザイン系のサイトを見てると、 "Fresh Examples of Web Design and Interfaces" という記事を見つけました。 綺麗だけど、コーディングが難しそうなデザイン。コーダーにとってドSなデザインです。 そしてtwitterでこんなことをつぶやいてみました。 そしたら、"ぜひ"いう声があったので、ノリでやってみました。 実際にやってみるにあたり。 先ほどのサイトからデザインを選ぶことになったのですが、著作権的に問題があったので、先ほどのサイトからインスパイヤーしたデザインを自分で作ることにしました。 こんなんにした。 コーディングする前に コーディングの方法は様々あります。 自分の中で以下のようなルールを設けました。 ブラウザの対応はIE6-8, 最新モダ
CSSでTableをデザインするサンプル 応用編
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.
Webサイトの基本要素 見出し・リスト・引用文のスタイルを整える
2014年8月20日 CSS Webサイトを装飾していく時に無視できない要素、見出し・リスト・引用文。特にWordPressでオリジナルのテーマを作る時は、ブログ用にこれら基本の要素すべての装飾もすると思います。そんな時に使うコードのバリエーションをメモしていたので記事にしました。少し変えるだけで応用できると思うので、ぜひ使ってみてください！ ↑私が10年以上利用している会計ソフト！ 色、フォント、サイズなどを変えるだけで、どんなサイトでも使える見出し・リスト・引用文用のHTMLとCSSコードを紹介します。そのままコピペして使っちゃってください。少しはコーディングの手間が省ける…かもしれません。ちょいちょい使っている画像も保存して使ってもらってもOKです :) サンプル画面内の「HTML」「CSS」タブをクリックでコードが表示されます。IE6, 7, 8, FF, Chrome, Safa
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
まだ中央寄せで消耗してるの？ - @yoshiko_pg
CSSが破綻する4つの理由 - Qiita
角丸やシャドウ作るジェネレータ。CSS3 Generator
CSSのセレクタがちょっとあやふやな人はやってみて！ 楽しみながらCSSのセレクタを学ぶ -CSS Diner
Ultimate CSS Gradient Generator from ColorZilla
Home - Lio-Meph
Oops... sorry. This site is optimized to Safari | NIPPON COLORS - 日本の伝統色