HTML/CSS

HTML, CSS 及びその他全般(他のカテゴリー以外)のメモ

LESS を使って Bootstrap をカスタマイズ

2013年9月2日

Bootstrap(v3.0.0) には以下のようなボタンなどにあらかじめ用意されたオプション(クラス)がある。 btn-primary(青色) btn-success(緑色) btn-info(水色) btn-warning(オレンジ色) btn-danger(赤色) これらを独自のクラス名で使ったり、色を変更するなどのカスタマイズをする際のメモ。LESS…

続きを読む

CSSの拡張メタ言語 LESS の基本的な使い方のメモ

2013年9月1日

以下のサイトを参考にまとめた「LESS」の基本的な使い方のメモ。詳細(解説等)は以下のサイトを参考にしてください。 参考にさせていただいたサイト LESS 日本語ページ「The dynamic stylesheet language」 gihyo.jp 「LESSで3倍ラクするスマートフォンコーディング」 ネスト CSS のセレクタを入れ子にすることができる…

続きを読む

Web フォントを簡単にテストできる typewonder

2013年8月18日

typewonder は既存の Web ページを、指定した Web フォントで表示してくれるサービス。使い方はとても簡単。http://typewonder.com/(Typewonder Beta)にアクセスして、試してみたいページのアドレスを入力し、フォントを指定するだけ。 「Typewonder Beta(http://typewonder.com/)…

続きを読む

Prepros で Compass を使ってみる

2013年8月16日

Prepros をインストールして Compass を使った際のメモ。 config.rb の設定が反映されない? 追加情報 2013年8月31日 Version 3.0.0 で config.rb の設定が反映されるようになりました。 昨日 Prepros を起動したところ画面上部に「贈り物」のようなオレンジ色のアイコンが表示されていたのでクリックすると、…

続きを読む

Zen-coding (Emmet) を使ってみる

2013年8月15日

Zen-coding (Emmet) に関するメモ。 Zen-Codingは、HTML と CSSをショートカットや短縮記法でコードを書くことができるライブラリで、多くのアプリケーションで提供されている。そのZen-Codingが、「Emmet」とリネームされて2013年2月24日に正式リリースされた。 エディタやオーサリングツールなどによって使用できるメニ…

続きを読む

Sass の基本的な使い方のメモ

2013年8月15日

目次 更新:2016年5月20日 Sass は Syntactically Awesome Style Sheets (構文的に素晴らしいスタイルシート) の略で、CSS を便利に使えるように拡張した言語です。 Sass には Sass 記法(拡張子 .sass)と SCSS 記法(拡張子 .scss)の二つの記法がありますが、ここでは SCSS 記法(拡張…

続きを読む

Yahoo Pure を使ってみる

2013年8月9日

Pure は Yahoo! が公開している CSS フレームワーク。その基本的な使い方のメモ。 Pure の読み込み Pure/Customize: Choose the modules that you need 以下を head 要素内に記述するだけ。(各機能別に読み込むことも可能) ボタン Pure/Buttons: Simple CSS for Bu…

続きを読む

ローカル環境(XAMPP)でサブドメインを使用

2013年6月21日

XAMPP でサブドメインを使用する方法のメモ。 C:\xampp\apache\conf\extra\httpd-vhosts.conf を開き、「##NameVirtualHost *:80」 の前についている#を外す。 最初の<VirtualHost>ブロックとして、従来の localhost を追加。1番目の VirtualHost セク…

続きを読む

.htaccess ファイルのメモ

2013年6月17日

.htaccess ファイルについてのメモ。 目次 基本的事項 ウェブサーバとして「Apache」が使用されていて、サーバ管理者が「.htaccess」ファイルの設置を許可していれば使用可能。 .htaccess ファイルは、サーバの挙動を決定する設定ファイルのひとつ ウェブサーバの設定は httpd.conf ファイルに記述するが、サーバ管理者しか編集でき…

続きを読む

ページの表示速度を改善する方法

2013年6月17日

ページの表示速度を改善する方法について調べたことのメモ。 gzip 圧縮での高速化 自分でファイルを圧縮する方法とサーバーでファイルを圧縮する方法の2通りある。 ファイルを gzip 圧縮して .htaccess で圧縮ファイルを読み込む指定をする 静的なウェブのあまり変更のないファイルに対して向いている。 Windows でファイルを圧縮するには、専用のソ…

続きを読む