「Compass」、基礎から応用まで！ | 株式会社LIG
こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません！ はじめに結論を言うと、CompassでCSSを書くと 早い！ 見やすい！ メンテしやすい！ コード量がぐっと減る！ 一度使い出したら最後、もう元には戻れない！ 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず！ 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください！ Compassとは？ Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh
Twitter BootstrapでさくさくWeb開発 : アシアルブログ
新年度です！ 新入学、新入社を迎えるみなさん、おめでとうございます。 エンジニアのみなさんがWebアプリケーションを作るとき、一番悩むのはデザインではありませんか？ カッコよくって統一的なデザインがほしい！でもデザインセンスないし…実は私もそうでした。 ですが、2月にメジャーバージョンアップしたTwitter Bootstrapを使うと、簡単にカッコいいサイトが作れます！ Twitter Bootstrapとはなにか Twitter Bootstrap CSSのフレームワークです。 Web上に使ってみた！スゲー！等、たくさんのドキュメントが存在していますが、中には2月以前のバージョン(v1.4)について言及しているものもありますので、2系を使う方はバージョンの違いに気をつけて下さい（クラス名など結構ガラっと変わっています）。 今回ご説明しているのは、Twitter Bootstrap 2に
IE6〜8でCSS3セレクタ利用「Selectivizr」
CSS3セレクタを使う上で問題となるのはやはりIEです。HTML5 & CSS3 Supportで確認すると、IE6～8はほとんど対応できていないことが分かります。 そんなIEでもCSS3セレクタを使えるようにするのがSelectivizr.jsです。詳しく紹介されているサイトがあまりなかったのでご紹介。 Selectivizrの設置方法 ここで提供されているselectivizr.jsとJavaScriptライブラリを外部ファイルで読み込むだけで、CSS3セレクタがIE6～8でも利用可能となります。コードも外部ファイルを読み込むだけですのでとてもシンプルです。 <script type="text/javascript" src="[JSライブラリ]"></script> <!--[if (gte IE 6)&(lte IE 8)]> <script type="text/javascr
ホームページ作成 - テーブルを表示する（中央）
テーブルをスタイルシートで中央に表示するには、テーブル全体を<div>～</div>などのブロック要素で囲い、その中身に対して設定していきますが下記の様にブラウザによって結果が変わってきますので、複数の設定が必要となります。 【考え方】 <div>の中身をtext-align:center;で中央に表示() 中央表示されないブラウザ()に対してmargin-方向:auto;を設定 <caption>だけ中央表示されないブラウザ()用に、さらにmarginを設定 になります。 （この方法の１～２に関しての詳細は、レイアウト > 範囲を中央に表示する（センタリング）にて紹介してますので参照して下さい。） １．<div>の中身をtext-align:center;で中央に表示() 最初にテーブルを<div>～</div>で囲い、その<div>に対してtext-align:centerを適用し中央
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
white-space－スタイルシートリファレンス
white-spaceプロパティは、ソース中のホワイトスペース（連続する半角スペース・タブ）・改行の表示方法を指定する際に使用します。 white-spaceプロパティは、 １.ソース中のホワイトスペース（連続する半角スペース・タブ）の表示方法 ２.ソース中の改行の表示方法 の２点を指定するプロパティです。 この２つの表示方法の組み合わせパターンの数だけ値が用意されている、と考えると理解しやすいかもしれません。 ■値 normal ソース中のホワイトスペースを無視 ソース中の改行を1つの半角スペースとして表示 ボックスサイズが指定されている場合にはそれに合わせて自動改行する（初期値） pre ソース中のホワイトスペースをそのまま表示 ソース中の改行をそのまま表示 ボックスサイズが指定されている場合にも自動改行しない nowrap ソース中のホワイトスペースを無視 ソース中の改行を1つの半角
border-collapse:collapse;にするべきか separateにするべきか at softelメモ
HTMLにて、tableに下記のスタイルを指定すると、CSSの見た感じがわかりやすく簡単で、レンダリングもきれいにできているように見えます。 table {border-collapse:collapse;} td, th {border:1px solid #000000;} border-collapse:collapse; の指定は、境界線の共有。 1pxの境界線を共有するということは、計算上隣接するセル同士で0.5pxずつ受け持つことになります。 この指定によって、Firefoxで上の境界線、左の境界線が消える、期待する位置から1pxずれるといった問題が発生します。 ★ ★ ★ こちらをおすすめします。 ★ ★ ★（IE6非対応。CSSハック入りは下に追記。） table { border-collapse: separate; border-spacing:0; empty-ce
スタイルシート［CSS］/テーブル/表のレイアウト方法を指定する - TAG index
自動レイアウト （auto） 表全体のデータを読み込んだ後に、表の表示を開始します。 固定レイアウト （fixed） 表の1行目を読み込んだ時点でレイアウト（各セルの幅）を決定し、その後すぐに表の表示を開始します。（素早く表示されます） fixed を指定する場合は、表全体の横幅を指定しておく必要があります。また、必要に応じて列（またはセル）の幅も指定しておきます。
table-layout－スタイルシートリファレンス
table-layoutプロパティは、テーブル（表）の表示方法を指定する際に使用します。 指定できるのは、テーブル（表）の列幅を自動レイアウトにするか（auto）、固定レイアウトにするか（fixed）についてです。いずれの場合も行の高さは自動的に算出されます。 初期値のtable-layout:auto; では、ブラウザはテーブル（表）全体を読み込んでから、セル内容に合わせて各列の幅を決定して表示を開始しますが、 table-layout:fixed; を指定すると、最初の一行目を読み込んだ時点で各列の幅を固定して表示を開始するため、 表示が速くなるメリットがあります。 table-layoutプロパティに「fixed」を指定する場合には、必要に応じて各列（セル）の幅を指定しますが、幅が指定されていない列には残りの幅が均等に割り当てられます。 ■値 HTMLソース <p>table-lay
width－スタイルシートリファレンス
widthプロパティは、 <TABLE>・ <TD>・ <IMG>・ <INPUT>・ <TEXTAREA>・ <SELECT>などの領域の幅を指定する際に使用します。 指定方法には、実数値にpxなどの単位をつけて指定する方法と、親ボックスに対する割合を％で指定する方法と、 状況に応じて大きさが設定されるautoを指定する方法があります。widthプロパティに負の値は指定できません。 ■値 auto 状況に応じて自動設定します。これが初期値です。 数値で指定 数値にpxなどの単位をつけて指定します。pxとは1ピクセルを1とする単位で、実際に表示されるサイズは72dpiや96dpiといったモニタの解像度により変化します。 ％で指定 ％値で指定します。 スタイルシート部分は外部ファイル（sample.css）に記述。 table.sample {width: 50%; background-c
文字コード宣言は行いましょう(CSS) - Web標準普及プロジェクト
文字コード宣言は行いましょう(CSS) 注意:文字コード宣言を何故行うべきなのか、 ということについては「文字コード宣言は行いましょう(HTML)」を参照してください。 CSSファイルで日本語というとピンと来ない人もいるかと思いますが、font-familyや、content等、 日本語を用いる可能性のあるプロパティも存在しています。 また、CSSファイル内にコメントを記述する場合は多くの人が日本語を使用すると思います。 日本語のプロパティ値を使う場合には文字コード宣言が無いとMozillaはそのプロパティの値を誤って解釈し、思い通りの表示にならないかもしれません。 また、コメント中の日本語が原因で最悪、そのCSSファイル内の指定が全て無効になってしまうかもしれません。 CSSファイルでもできる限り文字コードを宣言するようにしましょう。 CSSファイルでの文字コード宣言の仕方 CSSファイ
[css] フォームのボタンをスタイルシートで画像ボタンに変更する
フォームのボタンについては以前、buttonタグにボタン画像をそのまま入れるという手法を書きましたが、 もう一つ、ボタンの見た目をCSSで変更する手法がございます。 この記事ではCSSでスタイリッシュなフォームボタンを作る方法について解説します。 メリットとしては、ロールオーバーアクションをCSSで制御出来るという点と、 タイプ属性にimageを指定しないので、送信やリセットなどの機能を殺さないという点があります。 ただし、CSSでのロールオーバーはIE6未対応なので、気になる方はJavascriptと併用してください。 （個人的にはスルーしても問題ないと思っています） (X)HTMLソース buttonとinputどっちでもOK <button id="submit" type="submit">Submit</button> <input id="submit" type="submi
![[css] フォームのボタンをスタイルシートで画像ボタンに変更する](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
-moz-border-radius - CSS
<HTML> <HEAD> <META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css"> <TITLE>-moz-border-radius</TITLE> <STYLE TYPE="text/css"> <!-- .mbr1 {-moz-border-radius:10px; color:white; background-color:red; width:200px; height:200px; } .mbr2 {-moz-border-radius:40px; color:white; background-color:red; width:200px; height:200px; } .mbr3 {-moz-border-radius:100%; color:white; background-color:red; width:
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.css-lecture.com/log/css3/css3-border-radius.html
sakurachiro.com
HTMLタグ/HTMLの基本/フォントの表示例 - TAG index
css-lecture.com
http://www.dynamicdrive.com/style/csslibrary/item/bold_css_buttons/
overflow―スタイルシートリファレンス
[css][Firefox]<input>タグの特定のtypeにCSSを適用する「input[type=text]」 | うえちょこ＠ぼろぐ