CSSで複数の条件を満たした要素を絞り込む
既存のPCサイトを外部CSSだけでスマホ対応させた案件で CSSだけでどこまでマニアックな指定ができるか限界に挑んだので、覚書的に。 複数のidやclassで要素を絞り込む 複数のidやclassをずべて併せ持った要素だけにスタイルを適用させたい場合は、 スペースを開けずに続けて指定する書式で指定できます。 .typeA.typeB { border-color: 3px solid #f00; } 例えばトップページだけ1カラム構成にしたいとき <div id="container" class="toppage"> <div id="mainColumn"> メインカラム </div> <div id="mainColumn"> サブカラム </div> </div> #container { width: 80em; } #container:after { content: '';
CSS3のセレクタ全42種 まとめておさらい使い方リファレンス | WP-E (仮)
こんにちわ。WP-Eイクラこと@ampersand_xyzです。 CSS3のセレクタ、ちゃんと覚えてる？ 普段使わなかったりするようなセレクタって、すっかり脳みそから抜け落ちてしまい、適用されているスタイルを確認したときに あれ？コレなんだったっけ？ というセリフを何度心のなかでつぶやいたか分かりません。 また、場面によって必要に応じたセレクタを使えてるかどうかというところも気になるところ。どんなセレクタがあるのかを覚えておけば、たとえばDOMの動的生成をするときに無駄な分岐処理をしてstyle適用とか、JSでゴリゴリスタイル付与とかしなくてよくなるはずです。 おさらい用チートシート作成を兼ねて、Selector Level3 のSelectorsについて、セレクタの記法と使い方のgistつけてまとめていきたいと思います。 なお、仕様書の日本語訳は以下のページをご参照ください http:/
エンジニアならこれ読んどけって本まとめ - だったらこうしてみたら?
改訂：2014/10/20 備忘録としてまとめていきます。 今まで集めていた情報まとめていきます。 すでに読んだやつも今これから読んでこうってやつもまとめにまとめちゃいまっせ。 アウトプットも大事だけど、自分より先輩の方がアウトプットし続けて頑張って得た知見をあっという間にインプットできる"本"という形での学習も超大事なのです。 エンジニアとしての心得みたいな本 ハッカーと画家 コンピュータ時代の創造者たち 作者: ポールグレアム,Paul Graham,川合史朗出版社/メーカー: オーム社発売日: 2005/01メディア: 単行本購入: 109人 クリック: 4,884回この商品を含むブログ (594件) を見る YCombinatorの共同設立者の彼の本。 CODE COMPLETE 第2版 上 作者: スティーブマコネル,Steve McConnell,クイープ出版社/メーカー: 日
Bootstrap 3 徹底解説！
ついに登場した「Bootstrap 3」。このサイトでは、Bootstrap3を徹底的に解説していこうと思います。 Bootstrap 公式サイト(英語) Ver. 3.0.3 が最新版のようです(2014/01/02 現在) お問い合わせはコチラ Menu はじめに Bootstrap とは？ Bootstrap3 導入の仕方 基本のHTMLコード CSS グリッドシステム タイポグラフィ(見出し、段落、文字サイズなど) コードの表示 テーブル(表) フォーム ボタン ヘルパークラス レスポンシブWebデザインで使えるコード Components アイコン ドロップダウン Coming Soon ... About どうもこんにちは、SofPyon(そふぴょん)です。最近、Bootstrap3に興味を持ち、サイトを作ってみました。できるだけわかりやすくしていこうと思いますので、よろしくお
Bootstrapの使い方超入門 (1/4) - ＠IT
話題のレスポンシブWebデザインも簡単にできる、CSSフレームワーク「Bootstrap」の概要と基本的な使い方をサンプルとコードを交えて紹介します。 最近はやりのHTML5、JavaScriptライブラリ、CSS3、APIの紹介、またそれらを組み合わせたサンプルアプリケーションの紹介と解説を厳選して紹介、解説していく本連載「HTML5アプリ作ろうぜ！」。今回紹介するフレームワークは「Bootstrap」です。 話題のレスポンシブWebデザインも簡単にできる、CSSフレームワーク「Bootstrap」とは 現在のWeb制作、開発では、ともにスピードが重視されています。「Bootstrap」を使用すると、既に用意されているスタイルを適用するだけで、格段に速く見栄えを整えられます。事実、Webシステムの管理画面などでBootstrapを使用するケースも増えてきました。 Bootstrapは最近
Twitter Bootstrapのcontainer、row、col(span)の正しい使い方 -- ぺけみさお
Twitter Bootstrap 3.0.0のcontainer、row、col(Bootstrap 2.xならspan)クラスの使い方を説明する。公式サイトでも例示されているが、体系だった説明がされていないのでBootstrap初心者の役に立つはずだ。 1. containerは中身をセンタリングし幅を固定するcontainerクラスは中身を画面の中央に幅を固定するクラスだということを理解しよう。containerクラスはBootstrapのレイアウトを使う上でルートとなるクラスである。 2.で述べるcontainerクラスより幅の広いレイアウトをする場合を除いて、Webページのほとんどの内容をcontainerクラスの内部に書くことになるだろう。 containerクラスはWebページの中に複数個作っても全く構わない。また3.で詳しく述べるが、グリッドシステムを使わなくて良いのなら、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSのセレクタがちょっとあやふやな人はやってみて！ 楽しみながらCSSのセレクタを学ぶ -CSS Diner
TECH PROjin
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。