HTML&CSS Sassの変数 〜Sass（３）
Sassでは変数を使用することができます。グローバル変数の仕様がSass v3.4から大きく変更されていますので注意してください。(この記事はSass 3.4.19で確認した内容です )
変数の宣言は$の後に変数名を書き、コロン（：）の後...
HTML&CSS HTML&CSS Sassのネスト 〜Sass（２）
子孫セレクタをSassで書くにはネストで記述します。最近のCSSの書き方として、深い階層の子孫セレクターを使用した記述は敬遠される傾向にあります。そのためネストの恩恵は子孫セレクターよりも後述するメディアクエリなどの方が価値があるかもしれま...
HTML&CSS Sassの導入 〜Sass（１）
Sass(Syntactically Awesome Stylesheets)はCSSを拡張したメタ言語です。
機能を拡張してより効率的にCSSを書けるようにするものです。
具体的には、変数や関数をはじめ、演算、条件分岐、ループなどスク...
HTML&CSS Sublime Text3にColorPickerの導入
しばらくatomを使っていたのですが、起動時間が遅いので再びSublime Textに戻ってきました。
Sublime Text3にColorPickerを導入したのでその方法です。
atomはColorPickerのプラグインを入...
HTML&CSS 疑似要素で下線を引く
テキストに下線を引く方法としては「text-decoration: underline」を使用しますが、装飾的な下線としては使い勝手が悪いです。そのため「border-bottom」を使用したりします。けれども、これも決して使い勝手の良いも...
HTML&CSS text-indentで文字を非表示にする
h1要素などの背景にcssで画像を指定してh1のテキストを隠すための手法としてtext-indentが使われます。
かつて多く取られた方法は−9999pxの位置まで飛ばす方法でしたが、パフォーマンスの問題やサーチエンジン対策としてダークな...
HTML&CSS font-sizeにvwを使用して文字を画面サイズに応じて拡大縮小
ビューポートに応じた割合を指定できる単位vwは以前紹介しましたが、今回はvwをフォントサイズに設定して画面のサイズに応じて文字を拡大縮小する方法を解説します。
この方法の一番のメリットはスマートフォンを縦向き（ポートレイト）にしても横...
HTML&CSS CSSで計算する〜calc()
CSSの値を計算することができるcalc()ファンクションの紹介です。IE8は当然ダメで、それ以外はOpera Miniと一部Androidを除くと使えます。
使用可能なブラウザはこちらです。
CSSの幅や高さの計算やフォントサイズ...
HTML&CSS CSS3の新しい単位〜vhとvw
CSS3ではビューポートを基準にした単位vhとvwが導入されました。地味ですね、単位ですから。けれどもこれのおかげで色々なことが簡単にできるようになります。
例えば次の例のように各セクションをブラウザいっぱいに広げることです。（コードと解...
lecture ベーシック認証の設定方法
ベーシック認証とは
基本認証とも呼ばれる、最も簡単な認証方法の一つです。
Base64という印字可能な64種類の英数字（A-Z、a-z、0-9）のみを使用してエンコードするため、改ざんが容易であるなどセキュリティ面で問題があります。
...