Web Design Leaves

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

続きを読む

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

続きを読む

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

続きを読む

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

続きを読む

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

続きを読む

Webサイトをメンテナンスする際に、どのURLにアクセスしても「現在メインテナンス中です」というページを表示する方法。 メンテナンスを知らせるページ（HTMLファイル）を作成し、サーバーのドキュメントルートに maintenance.htmlという名前（任意の名前）で保存。 上記と異なる名前（または保存場所）でファイルを作成した場合は、以下の「/mainte…

続きを読む

フロートについてのメモ。 自分がよく忘れがちなのが、width の指定。 フロートさせる要素自体についてもだが、その親要素にも適切な幅を指定（確保）しないとフロートされないなどはまってしまうことがある。 float プロパティは、指定したボックスをフロートさせて、通常フローから外し、左または右に寄せることができる。 float プロパティを指定するボックスは…

続きを読む

Google Web Fonts をタイトルのロゴに使用しようとしたが、ブラウザによっては文字がきれいに表示されない。自分の Windows の環境では Firefox と IE ではきれいに表示されるが、Chrome、Safari、Opera では、文字の周りがぎざぎざしていてちょっとそのまま使用するのは難しい。 検索したところ、CSS3 の text-s…

続きを読む

301リダイレクトを利用 「www あり」で運用するのか、「www なし」で運用するのか。 どちらにしても、301リダイレクトを利用しどちらかに統一するようにする。以下は「Google ウェブマスターツール」からの引用。 「www あり」に統一する場合は、以下を「.htaccess」ファイルに記述。（example.com の部分を自分のドメインに変更） R…

続きを読む

テキストの最初の行のインデント幅を指定するには、「text-indent」プロパティを利用する。 指定する値は「長さ」または「パーセンテージ」で指定し、マイナスの値も指定可能。 マイナス値を指定してボックスの外にはみ出した部分の表示は、「overflow」プロパティで制御する。 以下の例の場合、クラス「indented」を指定した p 要素の最初の行は「1e…

続きを読む