【Sassを覚えよう！Vol.4】Sassの基本的な記述方法
前回のエントリーで、無事にSassが動作する環境が整ったかと思います。 今回は、いよいよ通常のCSSでは出来なかったSassの記述（Sass記法）に関してです！ まずは基本って感じですが、これだけでも十分Sassを利用することでコーディングの効率が上がる！って思ってもらえれば幸いです＞＜ 記法の前に Sass記法の前に、SassはCSSの「完全な上位互換」と言えるので、CSSのルールはすべてそのまま利用することが出来ます。 その為、cssファイルをそのまま拡張子だけ .scssに変更して変換（コンパイル）し直すみたいな事も可能です。（圧縮できる程度のメリットしか有りませんが） 軽く余談ですが、このCSSとの完全な互換性が従来のSassには無かったのですが、現行のバージョンではそれが出来るので、余計な事を覚える必要がなく、Sassの機能を今までのCSSの知識にプラスアルファとして使えるんです
コーディング前に確認しておきたいこと。 - CSS HappyLife
CSS HappyLife ZERO が移転したのでお手数ですが、消えちゃう前にブックマーク等変更してもらえるととても嬉しいです。 制作会社でコーディングする場合、社内のガイドライン的なのが有ったりデザイナーもある程度固定されてると思うので、毎回似たような事を確認したりとか、このデザインはどういう意図なんだろう？ってのも、何度か同じ人とやってれば見えてくる訳ですが、フリーランスの場合だとデザイナーは毎回違っていたり、当然ディレクションをする人も違うので最初に確認しておきたい事が有ったりします。 って事で、その辺りをまとめてみたり、デザインを渡されたときにこのデザインの意図は？って思う事とかもばーっと書いてみます。はい。 なので、デザイナーさんもコーダーにデザインを渡すときに気をつけて欲しい点とかもわかってしまうすばらしい内容（だと良いな）！ じゃあまずは最初に確認しておきたい基本的なことか
とっても使えるoverflowプロパティ。その使い方色々。
光の4戦士を買ったんすが、売り文句通りレトロな感じがしていいですね。 まぁまだ2, 3時間程度しかやってないんで、これからどうなるか分かりませんが時間を見つけてやって行こうかと。 さて、以前からoverflowプロパティは使い勝手が良いというか、使う場面が多いプロパティの一つですが、考えてみると色んな事に使ってるなぁ～と思ったので自分が良く使うのをまとめてみました。 あんまoverflowプロパティを使った事が無い方は、ビックリですよ！ これで、ソコの可愛いアナタもoverflowプロパティの虜になる事間違い無し！！（わかんないけど サンプルとかは以下よりどうぞ。 サンプルサイトを見る サンプルをダウンロード 基本的に、全てoverflow: hidden; の指定を足す事で解決したり実現出来る感じです。 01 clearfixみたいに使う まずは以前の「clearfixを使わないでやるに
IEの様々なバグの真相らしきもの｜CSS HappyLife
IEには様々なバグが報告されていますよね。 もうコーダーからしたら勘弁して下さいって泣きが入りそうになるくらいに... 背景色が指定された要素内でfloatがある時、要素内の文字が消えるとか、floatに後続するmarginの値が無視されるとか、widthを指定しているとボックスの中身にfloatしている要素があっても、自動的に高さが伸びるとか。 こういったIEのバグに有効な手段として、IE6まではheight:1%を指定する事で回避したり、IE7でもwidthを指定して回避したりと色々やってると思います。 その他、IE独自拡張のzoomを使った方法なんかもあります。 今まで理由とかは分からないけど取り合えず解決するんだって事で、widthやheight、zoomを指定しておけばいいんだ。 と認識していましたが、つい先日ちょっと気になる内容をみつけましたのでご紹介。 ソレはhasLayou
ボックスを上下左右画面中央に
ウィンドウを小さくした時に左上が見えなくなってしまうことに関する対処を追記しました。 何か、こういう立場のお仕事してる人とか、初心者のススメでFirefoxを使え！とかまずはFirefoxで確認すべしとか聞きますが、ボクはIE派です。 Firefoxに乗り換えようと頑張った時期もあったんすが、どーも合わない感じだったんすよね。 重さとかスクロールの仕方とかが、、、 だから確認もIEが先だったりします。 まーコレはボクのスタンスなんで、どーでもいいんすが。 ちなみにこのサイトのアクセス解析を見てると、IEとFirefoxの比がおおよそ、5:4っていう普通のサイトじゃありえない結果が出ます。こんなブログ書いてると当然っちゃ当然かもしれませんが（笑 さて本題にでも。 Tipsでも充実させたいと思ったので、特に目新しい内容ではございませんが、div要素とかのボックスを左右の中央、そして上下も中央に
もう、そんなミスに陥らないんだからっ！！
どーも。最近密かに主婦に人気が有るんじゃないか？と思い始めているhirasawaです。 遊び心がある方、コレから「主婦CSS」とかって付けて下さい。えぇ。 主婦に優しいブログ運営を頑張りたいと思っておりますので。 【超CSS】STOPN' LISTENですに対抗したいとか、そんな大人気ない事思ってないデスヨ？ で、本題ですがCSSレイアウトが崩れている時に試す10の処方箋::::::STOPN' LISTEN::::::to the silence:::::::の影響もあるんですが、会社関係の人に同様の事を言われた事が有り、いつか書こう書こうと思ってました。 でも、同じじゃアレなんで、ボクが良くやる（やった）初歩的なミス絡みで書いてみようと思います。 1.何か、コレだけスタイルが適用されないんすが… ボクの場合、取りあえず !importantでそもそも効いているのかチェック。 もしくは、
CSSに関する基本的なこと4（優先順位、セレクタの組み合わせ）｜CSS HappyLife
3回続いた基本的なことも今回で最終です。 4回目の内容は、以下のことについて触れております。 んなの分かってるよ！って人は、次の次のエントリーにお進み下さい。 スタイルの優先順位 セレクタの組み合わせ セレクタのグルーピング スタイルの優先順位詳細 スタイルの優先順位 スタイルのもっとも基本的な優先順位は、 「後から読み込んだスタイルを優先的に適用」します。 読み込む順序は、上から読み込まれていくので、、、 p { color:red; } p { color:blue; } のように書いたとしたら、color:blueが優先され、文字は青になります。 基本的な読み込み順序で最低限の部分は、コレだけです。 より詳細な優先順位については後述します。 セレクタは色んなセレクタを組み合わせて指定できます。 子孫セレクタ（空白文字区切り） 親要素に含まれるすべての子孫要素をターゲットにスタイルを適
もう、class名やid名で悩まないんだからっ！！｜CSS HappyLife
class名やid名って付ける時悩みませんか？ 今でもボクは結構悩むんですが、そんな悩みを解決する為に、人さまのソース覗きまくってよくあるclass名とid名を拾ってきました。 これで、チョットだけ作業効率アップ！？ 2010年6月10日追記： この記事自体、2007年 1月15日に書かれてるんでかなり古いです。 あくまでも参考程度に留めてもらうのが良いかと思います。 今だったら、html5の要素を参考にしたりして付けるのが、今後の事を考えると良いのかなーと思います。 また、善し悪しの判断はせずに公開しているものですが、位置に関するのは仕様変更に弱くなるのでオススメはしません。 全体に使えそうな感じ wrap wrapper top-wrapper wrapperAll frame mframe all-frame container page pagetop all allContent
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
