CSS(スタイルシート)の基本、小技、テクニック総まとめ
CSSの基本や使える小技テクニックなどを幅広くまとめました。以前書いて今もそこそこアクセスがある「CSSの知識をもっと深める30+2の小技テクニック集｜Webpark」という記事があるのですが、2年近く前の記事ですしパワーアップさせて作り直しました。 恐らく過去最長の記事ですので目次を作りました。クリックするとするりと移動します。基本的な内容が多いですが、お役に立つ項目があればうれしいです。 ということで順番に説明していきます。 1. 全般的なこと 1-1. CSSリセット ブラウザごとでデフォルトのスタイルは異なっています。その違いをそのままにしておくと、後でブラウザ間の表示の違いに悩むことになり、どこが原因か分からないとイライラしてしまいます。 そんなことのないように、いったんデフォルトのスタイルをリセットしてしまおうというのがリセットCSSです。 方法は色々ありますが、個人的には一番
いまどきの SCSS 運用方法 - tokuhirom's blog
最近は scss をつかっています。SCSS の運用についてまとめておこうとおもったので、まとめます。 scss --watch を手元でうごかす運用などをすると、scss と css の両方を git レポジトリにコミットすることになって残念ですし、生成された css を直接いじる人があらわれてまきもどったりするのでそういった運用は避けています。 開発環境についてPlack::Middleware::Scss::Lite ( https://github.com/tokuhirom/Plack-Middleware-Scss-Lite ) というミドルウェアを配置して利用しています。これはリクエストがあったタイミングで scss コマンドがはしります。 実行する際、scss コマンドは、エラーメッセージも stdout に出力するので、stdout を capture することが肝要です
sassの抑えておきたいfunctionの使い方 « NAVER Engineers' Blog
こんにちは。 年末の予定はぶっ通しでスカイリムにつぎ込むことが決定したUIT富田です。 今回は、Less & Sass Advent calendar 2011の6日目として、 sassのfunctionについて解説します。 すっぽりハマった四則演算の落とし穴 sassは値の四則演算をサポートしており、10進数だけでなく、16進数の値であってもよしなに計算してくれます。 color: #a3a4a5 + #111111; ↓ color: #b4b5b6; 16進数と10進数でもエラーにならず計算してくれます。（普通あまりやらないとは思いますが） color1: #000000 + 1; color2: #000000 + 15; ↓ color1: #010101; color2: #0f0f0f; この16進数の計算は、結果が#fffffを上回った場合、上回った分は切り捨てて、す
CSSの勉強中に困ったら
CSSの勉強中に色々困ることが起きて検索するのですが、だいたい同じところに行き着くので自分用のリンク集も兼ねてまとめておきます。 仕様を確認するとりあえずW3Cを見に行った方が早い。 そもそもプロパティや値について分かっていない場合はここで解決することが多い。 CSS current work & how to participate現在の状況と仕様書の目次。CSS3の日本語訳集 - 血統の森 web実験小屋日本語訳へのリンク集。W3Cの目次から探すのが面倒なときはGoogleで「w3.org プロパティ名」で探すと早い。「devs.w3.org」と「www.w3.org」を分けて検索するのもいいと思う。 ブラウザの対応と実装対応しているかどうかだけの場合は以下の2つのサイトで事足りる場合も多い。 When can I use… Support tables for HTML5, CSS3
第27回 フォームとCSS
今回のポイント formの幅や高さは指定しないのが無難 divの中にformを含めてレイアウトする IMEをCSSで制御する フォーム（form）もHTMLを形成するタグの一種ですから，当然CSSによる装飾が利きます。これまで多くのWebデザイン解説書が世に出てきましたが，formの装飾にページを割いたものは多くはありませんでした。 しかし，エンジニアがformを使わないWebサイトに関わることはほぼ皆無です。サーバー側でのプログラムを必要とするサイトでは，ほとんどの場合，ユーザーがformでデータを入力するからです。 ページにたくさんのエレメントを並べるのだけがformではありません。Googleのスタートページのように検索語句を入れるテキストボックスと，その語句を送信するボタンがひとつずつというのも立派なformです。ですからエンジニアの方々は，formの装飾の仕方をどうしても習得して
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Bootstrap Templates and More on WrapBootstrap
GitHub - necolas/normalize.css: A modern alternative to CSS resets