HTML&CSS Sassの@import 〜Sass（４）
SassではCSSと同様に複数のscssファイルを@importを使ってインポートすることができます。
更に便利な機能としてパーシャルという機能があります。これは複数のscssファイルをインポートして、余計なCSSを作成せずに、ひとつのC...
lecture
HTML&CSS HTML&CSS Sassの変数 〜Sass（３）
Sassでは変数を使用することができます。グローバル変数の仕様がSass v3.4から大きく変更されていますので注意してください。(この記事はSass 3.4.19で確認した内容です )
変数の宣言は$の後に変数名を書き、コロン（：）の後...
HTML&CSS Sassのネスト 〜Sass（２）
子孫セレクタをSassで書くにはネストで記述します。最近のCSSの書き方として、深い階層の子孫セレクターを使用した記述は敬遠される傾向にあります。そのためネストの恩恵は子孫セレクターよりも後述するメディアクエリなどの方が価値があるかもしれま...
HTML&CSS Sassの導入 〜Sass（１）
Sass(Syntactically Awesome Stylesheets)はCSSを拡張したメタ言語です。
機能を拡張してより効率的にCSSを書けるようにするものです。
具体的には、変数や関数をはじめ、演算、条件分岐、ループなどスク...
HTML&CSS CSS3の新しい単位〜vhとvw
CSS3ではビューポートを基準にした単位vhとvwが導入されました。地味ですね、単位ですから。けれどもこれのおかげで色々なことが簡単にできるようになります。
例えば次の例のように各セクションをブラウザいっぱいに広げることです。（コードと解...
lecture ベーシック認証の設定方法
ベーシック認証とは
基本認証とも呼ばれる、最も簡単な認証方法の一つです。
Base64という印字可能な64種類の英数字（A-Z、a-z、0-9）のみを使用してエンコードするため、改ざんが容易であるなどセキュリティ面で問題があります。
...
HTML&CSS スマートフォン用ドロワーメニューの作成方法〜レスポンシブ対応編
スマートフォン用のドロワーメニューの簡単な例は前回紹介しましたが、少し複雑な動きに対応させるには多少問題があります。
今回は起こり得る問題点と解決方法について考えてみます。サンプルとして前回使用したドロワーメニューを使用します。
ス...
HTML&CSS スマートフォン用開閉メニューの作成方法
スマートフォン向けのサイト作成の時に定番的に使われている開閉式のナビゲーションの作成方法です。今回は縦方向の開閉と横方向の開閉（ドロワーメニュー）の基本的な仕組みの解説です。
jQueryとCSS3を使用した作成方法です。通常jQue...
HTML&CSS レスポンシブサイトの切り替えポイント〜javaScript
レスポンシブサイトを作成するときに、javascriptで切り替えポイントを認識させる方法の説明です。
javascriptですからjQueryでも使用できます。
CSSメディアクエリによる切り替え
まずは、CSSでのメディアクエ...
HTML&CSS CSS3のtransitionで使えるイベント〜transitionのトリガー
transitionアニメーションを実行するには何らかのトリガー（イベント）が必要です。通常は:hoverが使用され、マウスがホバーすると簡単なアニメーションを行ったりします。けれどもトリガーになるのは:hoverだけではありません。
色...