CSS設計の教科書をまとめてみた - yagisukeのWebなブログ
Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法posted with ヨメレバ谷 拓樹 インプレス 2014-07-24 AmazonKindle楽天ブックス CSS設計の教科書を読んで、今後意識していくべき項目を大雑把にまとめてみました。 もっと知りたいという方は本の購入をオススメします。 よりよいCSSの設計とは 予測しやすい 期待通りに振る舞い、追加したルールが他のルールに影響を与えない。 再利用しやすい 抽象的で分離され、再度遭遇した同じUIに対して、再度書き直す必要がない。 保守しやすい 新しいルールを追加・更新するときに既存のルールのリファクタリングを必要としない。 拡張しやすい 自分と自分以外の人にもメンテナンス・管理がしやすい。 破綻しやすいCSSの特徴 HTML構造に依存している スタイルを取り消している 絶対値を多様
idとclassの違いと使い分け！スタイルシート(CSS)適用法 [ホームページ作成] All About
idとclassの違いと使い分け！スタイルシート(CSS)適用法idとclassの違いと、使い分け方法をご紹介いたします。HTMLにスタイルシート(CSS)を適用する方法には、class属性を使う方法と、id属性を使う方法があります。この「class」と「id」は明確に役割が異なります。全部にclass属性を使っている場合は問題ありませんが、全部にid属性を使っている場合は問題がある可能性があります。 スタイルシート(CSS)を記述する際、「特定の要素すべて」を一括して装飾するのではなく、「特定の要素のうち一部だけ」を装飾したい場合、HTMLに付加できる属性は2種類ありますね。class属性と、id属性です。この「class」と「id」を、正しく使い分けられていますか？ この「class」と「id」は、どちらでもよい方法が2種類用意されているわけではなく、明確に役割が異なります。そこで今回
![idとclassの違いと使い分け！スタイルシート(CSS)適用法 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f530daf3cb408d6b6a0ba6f38ed7ccece36cffc/height=288;version=1;width=512/https%3A%2F%2Fimg.aacdn.jp%2Faa%2Fcommon%2Fogp300_300.png)
ズルいデザインテクニックを生かして作る、汎用性のあるズルいボタンデザイン
さて今回は、ズルいデザインテクニックの集大成ともいえる「ズルいボタン」です。これまでの連載で取り上げた数々のズルいデザインテクニック、「ズルいテキストシャドウ」「ズルいグラデーション」「ズルい角丸」、そして前回解説した「ズルいボックスシャドウ」を用いたズルいボタンの作り方を解説します。 今回のズルいボタンに関しては、以前にズルいデザインテクニックのスライドで紹介したものから大幅に改定を加えて、より汎用性があり、さまざまな場面で使い勝手の良いものに刷新しました。 改良のポイントは次の通りです。 文字サイズの変更、またそれに併せてボタンサイズの変更に対応しています iタグを使ったアイコン用のWebフォントに対応しました。今回はfont-awesomeを使って解説しています フラットデザインの流行に伴うデザイン傾向に合わせ、立体感やグラデーションをより控えめに、かつpaddingを大きめに取った
ひと味ちがうTwitter Bootstrapの9個の無料テンプレート&有料まとめサイト - 酒と泪とRubyとRailsと
ひと味ちがうTwitter Bootstrapの9個の無料テンプレート&有料まとめサイト Jan 28th, 2013 Tweet Twitter Bootstrapはデザインが苦手なプログラマのための必須ツールです。今回は、一味違ったBootstrapサイトを作るときにきっと参考になるテンプレートをまとめてみました！ (03/05 追記) FlatUI、Bootstrap Expoを追加しました (03/24 追記) Flatstrapを追加しました (04/03 追記) MagicSuggestを追加しました (04/04 追記) Bootstrapのリソースネタを別の記事にしました 無料のテンプレート 無料のBootstrapテンプレートの紹介です。BootswachのようにCSSだけで適用できるものと、HTML/CSS/JSなどいろいろ追加しないと実現できないものがあります
HTML5で組んでるならこの魔法のjsも入れておけっていう話
現在、A!@attripさん発で話題になっている「たった2行でIE5.5～IE8をモダンブラウザの挙動にする魔法のJS」という記事。 Webデザイン界隈では当たり前のものですが、実はもうひとつ追加しておくといいかもしれないjsがあったりします。 Photo:html5 By michael pollak IE8以前のブラウザはどうにもこうにも開発者泣かせなわけですが、ie9.jsとcss3-mediaqueries.jsを突っ込むことで、モダンブラウザと同じ挙動にすることができちゃいます。 もう少し具体的に書くと、ie9.jsを組み込むことで、 position:fixed;に対応 max-width、max-heightに対応 属性セレクタ、擬似クラスに対応 margin:0 auto;でのセンタリングに対応 透過PNGに対応 opacityに対応 といったことが可能になります。要はCS
DOM操作の主流になるか！？ セレクタAPIを使いこなそう
連載目次 従来、JavaScriptでは、以下のようなメソッドを利用して、操作対象の要素を特定していた。 getElementByIdメソッド：IDの値をキーにノードを取得する。 getElementsByTagNameメソッド：要素名をキーにノードを取得する。 getElementsByClassNameメソッド：class属性の値をキーにノードを取得する。 しかし、この方法で複雑な構造のHTML文書から要素を取り出す場合、コードが複雑になりやすいという課題もあった。例えば、以下は従来のgetElementXxxxxメソッドを利用した要素の取得例だ。 上記のJavaScriptコードでは、奇数番目の要素を特定するために全てのインデックス番号をif文で判定させている。ほかにも属性値やclass属性によって要素を絞り込むならば、同じような判定式を書いた経験が読者諸氏にもあるだろう。「もっと簡
要素特定のテクニック — Selenium 日本語ドキュメント
starts-with¶ 多くのサイトでは、要素の id 属性に動的な値を使用しており、要素を特定することが困難です。1 つの簡単な解決方法として、XPath 関数を使って、その要素について知っていることをベースに要素を特定するやり方があります。たとえば、動的 id が <input id="text-12345" /> のような形式で、 12345 が動的に変わる数だとすると、 //input[starts-with(@id, 'text-')] という XPath を使用できます。 contains¶ ほかのテキストに囲まれている可能性がある値によって要素を特定できる場合には、contains 関数を使用できます。たとえば、 <span class="top heading bold"> という要素を、 ‘top’ クラスと ‘bold’ クラスと組み合わせることなく、 ‘headin
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
高速化は一夜にしてならず | gaspanik weblog
ちまたではPHPのflush()を使ったWordPressのプラグインが話題のようですが、Webサイトの表示速度を改善したかったら、もう少しサイトの作り方を根っこから考えなおした方がいいんじゃないか？、と思いましてね…。 公開されているプラグインにどうこう言うつもりはなく、諸手を挙げて喜んでらっしゃる世間様の様子を見ながら「なんかなぁ…」「入れる前にできることあるんじゃないかな？」と。ちなみにボクも昔flush()での手法を試したことがあるんですけど、結局すぐやめちゃいました。 回線速度自体は昔に比べたら格段にあがってるのは事実ですが、いまとなっては環境としては比較的貧弱なスマートフォンみたいなデバイスも増えています。 サーバの負荷が気になるとか自分とこじゃできないなどの理由で、テキストデータをGzip化（データサイズが半分以下になる）しないのであれば、その他の部分でサイトの全体的な転送デ
CSSのfont-family：ヒラギノとＭＳ Ｐゴシックとメイリオの悩ましい関係 : webデザイナーのナナメガキ
CSSでのfont-familyの指定がとても悩ましい。文字コードによって表示が変わったりするし、イレギュラーケースまで想定すると煩雑なコードになってしまう。ちょっと整理しながら考えてみる。 まず、font-familyを何も指定しないと、だいたいのブラウザではデフォルトで設定されているフォントで表示されるのだが、文字コードがUTF-8だとWindowsのIE6で英数文字が「Times New Roman」になってしまう。※文字コードがShift_JISやEUC-JPの場合はデフォルトのフォントで表示される。 それでは例えば総称ファミリー名（generic-family）である「sans-serif」のみ指定してみると、WindowsのIE6では文字コードがShift_JIS・EUC-JPの場合は「Lucida Sans Unicode」で、UFT-8の場合は「Arial」で表示されてしま
CSS解説 -書き方-
コメント CSSでは、「/*」と「*/」で囲まれた部分をコメントとして扱います。コメントは複数行にわたって書くこともできます。 /* ここはコメントアウトされます。 */ /* コメントは一行で書いても、 複数行で書いてもいいです。 説明を書くのにも使えます。 */ 基本 一番シンプルな書き方は次のようなものです。 p{color:blue} これは、まず「セレクタ」と「宣言」という二つの部分に分けられます。 セレクタ{宣言} 「セレクタ」は「スタイルシートを適用する対象」で、「宣言」は「適用するスタイル指定の内容」です。上の例では、「p」が「セレクタ」、「color:blue」が「宣言」にあたります。 さらに「宣言」は、「プロパティ」と「値」とに分けられます。 セレクタ{プロパティ:値} 上記の例では、「color」が「プロパティ」に、「blue」が「値」に当たります。「プロパティ」によ
スタイルシート［CSS］/テキスト・フォント/フォントを指定する - TAG index
font-family は、フォントを指定するプロパティです。 p { font-family: "ＭＳ Ｐゴシック",sans-serif; } フォントを指定した場合の表示例を、次のリンク先で確認することができます。 フォントの表示例 フォントの指定方法 フォントの指定には、フォントファミリ名で指定する方法と総称ファミリ名で指定する方法があります。 フォントファミリ名で指定 フォントの具体的な名前で指定する方法です。 フォントファミリ名にスペースが含まれる場合は、その名前を引用符で囲む必要があります。 "ＭＳ Ｐゴシック" 総称ファミリ名で指定 ゴシック体系や明朝体系など、フォントの大まかな種類で指定する方法です。 次の5種類の値を指定することができます。 sans-serif … ゴシック体系のフォント serif … 明朝体系のフォント cursive … 筆記体系のフォント fa
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Spriteを活用しよう - DesignWalker