てるてる坊主: css

ラベル css の投稿を表示しています。すべての投稿を表示

2012年7月3日火曜日

Sassでメディアクエリを使ってみたけど変数が使えない？

Sass でメディアクエリを記述してみました。

普通に書くと

#header {
    background-color: #ccc;

    h1 {
        float: left;

        @media screen and (max-width: 320px) {
            float: none;
        }
    }
}

コンパイル後は

#header {
  background-color: #ccc;
}
#header h1 {
  float: left;
}
@media screen and (max-width: 320px) {
  #header h1 {
    float: none;
  }
}

こんなかんじで至って問題ありません。
まぁ確かにこれでいいんですが max-width の部分を変数にしようと思ったんですがコンパイルエラーになりました。

/* 変数宣言 */
$mobile-width:320px;
#header {
    background-color: #ccc;

    h1 {
        float: left;

        /* 変数を使用 */
        @media screen and (max-width: $mobile-width) {
            float: none;
        }
    }
}

Syntax error: Invalid CSS after "...nd (max-width: ": expected expression (e.g. 1px, bold), was "$mobile-width) {")

んーよくわかりません。
普通に変数を使う分は問題ないんだけど。。。単純にこういうところに変数使ったらだめなんかな。。。

誰か詳しいひと教えてください！！！

Sassの基本的な使い方

Sassのインストールについては先ほど書きましたが
まず簡単な使い方。GUIツールとかもあるみたいですがまずはコマンドを使って試してみます。

ターミナル（Windowsならコマンドプロンプト）を起動して任意のディレクトリに移動して以下のコマンドを実行します。

$ sass --watch .:.
>>> Sass is watching for changes. Press Ctrl-C to stop.

これでOK。
あとはそのディレクトリにscssファイルを生成してコーディングすると自動的にコンパイルしcssファイルに変換してくれます。

試しに以下のような sample.scss を作成してみます。

#container {
    width: 100%;
    height: 50px;

    h1 {
        font-size: 1.5em;
    }
}

そうすると自動的に sample.css ができたことがわかると思います。

#container {
  width: 100%;
  height: 50px; }
  #container h1 {
    font-size: 1.5em; }

これが sass です。

cssのコーディングをしているとセレクタの指定はほぼ必須。
同じものを毎回記述するのはけっこう面倒なことです。
sass では親セレクタにネストすることでこの面倒な手間を省略することができます。
これだけでもかなりいいです。
慣れてしまえば今までの css より直感的に操作できるのではないかと思います。

次によく使うであろうアンカーなどの:hoverや:activeなどの疑似クラス。
これも簡単です。
sample.scss

a {
    font-size: .9em;
    &:hover {
        text-decoration: underline;
    }
    &:visited {
        text-decoration: none;
    }
}

sample.css

a {
  font-size: .9em; }
  a:hover {
    text-decoration: underline; }
  a:visited {
    text-decoration: none; }

scss の特殊文字 & を使うと親セレクタと & を置換してくれます。
簡単です。

ほかにも sass には変数や関数を作ることもできますし、@mixinやsingleton といった機能も備えています。
このあたりは追々。

sass のコマンドについてちょっとメモ。

< --watch >

フォルダの監視: --watch input/stylesheets:output/stylesheets
ファイルの監視: --watch input.scss:output.css

< --style >
nested / compact / compressed / expanded

--watch と --style は組み合わせて使うことができます。
時間があればそれぞれ試してみてください。

$ sass --style compact --watch .:.

#container { width: 100%; height: 50px; }
#container h1 { font-size: 1.5em; }

a { color: #888; font-size: .9em; }
a:hover { text-decoration: underline; }
a:visited { text-decoration: none; }

Sassを試してみました（インストール）

Sass
CSSを拡張したメタ言語。CSSのコーディング規約とかを作っててもかんじてた部分ではありますが、ほかの言語に比べ再利用とか難しいしいくら規約を作ってもどうしても煩雑になってしまいがち。
Sassを使って効率的にできないかとさわってみました。

Sassは、scssファイルをコンパイルすることでcssファイルに変換してくれます。
コンパイルするにはRubyがまず必要。
MacにはRubyが入ってるんで問題ありませんがWindowsではまずRubyをインストールします。

http://rubyinstaller.org/
ここからインストーラをダウンロードします。
（現時点での最新はrubyinstaller-1.9.3-p194.exe）
注意するところはパスを追加するくらいですがインストーラを使用すればこのあたりも自動的にやってくれます。
（以下、Add Ruby/executables to your PATHにチェックをつけます）

完了後、バージョンを確認します。

ruby -v

次にSassのインストール

gem install sass

これOK。
これもバージョンを確認します。

sass -v

使い方とかも追々書いていきます。

Sassについて参考にしたページ

2011年7月27日水曜日

CSS3で吹き出し風のリンクボタン

いろいろ実装方法はありますがせっかくなんでCSS3の回転（rotate）を使って吹き出し風のリンクを作ってみました。
吹き出し風のリンクを作る場合は回転より:beforeや:afterの擬似要素の方が重要になると思います。
（回転をしなくても吹き出し風のリンクをつくることもできます）

サンプルは２種類つくっています。
上段は回転(IEでは見れません)、下段は線（IEでも見れます）で装飾しています。

CSS3で吹出し風のリンク - jsdo.it - share JavaScript, HTML5 and CSS

【擬似要素・擬似クラス】

:link

未訪問のリンク先へのアンカー

:visited

訪問済のリンク先へのアンカー

:hover

該当の要素にカーソルがある状態

:active

該当の要素を指定した状態

:focus

該当の要素にフォーカスがある状態

:before

該当の要素の直前を対象とする要素

:after

該当の要素の直後を対象とする要素

2011年7月25日月曜日

ChromeやFireFoxでtextareaのtextareaリサイズの制御

Chrome／FireFox／Safariではテキストエリアのリサイズ機能が標準で備わっています。
入力エリアが狭いなと思うときは非常に便利ですが開発側から見るとレイアウトが崩れたりして嫌な場合もあります。
これは、CSSのresizeプロパティで制御することが可能です。

textarea {
    resize: none;
}

これだけでリサイズ機能を無効にすることができます。

他にも縦だけリサイズや横だけリサイズ、あとはリサイズの高さ・幅なんかも指定することができます。
【縦だけリサイズ】

【横だけリサイズ】

【高さ・幅指定】

2011年7月19日火曜日

CSSで縦書き

CSSで文字を縦書きにしたい場合は「writing-mode」を指定します。

【writing-mode】（IE）

tb-rl

縦書き（Top to Bottom - Right to Left）

lr-tb

横書き（Left to Right - Top to Bottom）

【-webkit-writing-mode】（webkit）

vertical-rl

縦書き

horizontal-tb

横書き

以下、サンプル（IE、webkitでみると縦書きになってるはず）

CSSで縦書き - jsdo.it - share JavaScript, HTML5 and CSS

Firefoxはtransformのrotateで回転はしてくれますが縦書き用のフォント（@）が正しく表示されないようです。

1カラムのCSSレイアウト

1カラムレイアウトというかヘッダー・メイン・フッターと段組みし、フッターをページ下部に表示したい場合があると思います。
メイン画面のページ量にもよりますが量が少ない場合、メイン部分とフッター部分がくっついてページの下のほうが空いてしまうことが多々あると思います。

フッターをページ下部に表示したい場合は「height:100%」のボックスを使って表示させることができます。

<style>
* {
    margin: 0;
    padding: 0;
}
html, body {
    height: 100%;
}
div#container {
    position: relative;
    margin: 0 auto;
    width: 800px;
    height: 100%;
    min-height: 100%;
    background: #cccccc;
}
body > div#container {
    height: auto;
}
div#header {
    height: 50px;
}
div#main {
    padding-bottom: 50px;
}
div#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
}
</style>

<div id="container">
 <div id="header">ヘッダー</div>
 <div id="main">メイン</div>
 <div id="footer">フッター</div>
</div>

出力したイメージ↓（かなりアバウトですが...）

「height:100%」を使う際の注意点はhtmlとbodyにheight:100%を記述することくらいです。

min-heightやbody > #containerなどは各ブラウザへの配慮といったかんじですのでそういうものくらいでいいと思います。

てるてる坊主