HTML/CSS

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

XAMPP (Windows) のダウンロードとインストール

2014年4月25日

新しいバージョンの XAMPP に関しましては以下のページをご覧ください。(2018年7月) XAMPP のインストール方法と基本的な使い方 XAMPP(Windows版) のダウンロードとインストールに関してメモ(以前インストールしたときと少し違っていた)。 ダウンロード 「ダウンロード – Xampp」(https://www.apachef…

続きを読む

CSS3 アニメーションについてのメモ

2014年4月3日

CSS3 アニメーションに関する個人的なメモ。 CSS3でアニメーションを実装する方法は以下の2種類がある。 transition プロパティでの定義 animation プロパティでの定義 Transition 始点終点の2点間のアニメーション機能を提供 (始点から終点までの2点間のアニメーションしか行えない:設定がシンプル) 設定時間の中でアニメーション…

続きを読む

Compass/SASS を使ったミックスインの作成

2014年3月30日

@IT に掲載されていた Compass/SASS を使ったミックスインの作成方法の記事をもとに、個人的に使いそうなことをカスタマイズしたりした際のメモ。 Sass と Compass がインストールされていることが前提。Compass を使用しないものもあるが、「@import “compass”;」が記述してあることが必要。インス…

続きを読む

Compass/SASS を使ったアニメーションのミックスイン

2014年3月27日

アニメーションのミックスインを探していたら見つけた Compass/SASS を使ったアニメーションのミックスインに関するメモ。 Compass/SASS は最近始めたばかりなのでこの方法が正しいかは不明だが一応やりたいことはできているみたい。 追記 Sass 記法で書かれているものとは別に Scss でかかれているもの(animate.scss)も見つかっ…

続きを読む

Compass のミックスイン

2014年3月27日

Compass のミックスインに関するメモ。インストールや設定に関しては「 Sass/Compass のインストールと基本的な環境設定」に記載。 目次 CSS3 モジュール CSS3 モジュールは、ベンダープレフィックスや、ブラウザの下位バージョンに対応するプロパティを書き出してくれる。 関連項目 ベンダープレフィックスのオン・オフ レガシーブラウザの対応の…

続きを読む

Sass/Compass のインストールと基本的な環境設定

2014年3月4日

Windows 環境での Sass と Compass のインストールと基本的な環境設定に関するメモ。 Ruby のインストール Sass には Ruby が必要なので Ruby がインストールされているかどうかをコマンドプロンプトで確認する。 上記コマンドで Ruby のバージョンが表示されれば、Ruby はインストール済み。 インストールされていない場合…

続きを読む

Google Map をレスポンシブ対応に

2014年2月25日

Google Map をレスポンシブに対応させる方法のメモ。 2018年7月16日から「Google Maps Platform」という新しいサービスになり、API の使い方等が変更になりました。新しい API の使い方等については「Google Maps API の使い方」をご覧ください(2018年7月30日) 目次 概要 サンプル 参考サイト:「How …

続きを読む

Youtube (iframe) をレスポンシブ対応に

2014年2月25日

Youtube(iframe 要素)をレスポンシブに対応させる方法のメモ。 概要 iframe で出力された Youtube 動画を CSS を使ってレスポンシブに対応させる。 参考にしたサイト:「Thierry Koblentz / A List Apart : Creating Intrinsic Ratios for Video」 サンプル Youtu…

続きを読む

Apache「MultiViews」オプションを使って2ヶ国語対応

2014年1月15日

ブラウザの言語設定を元にその言語のファイルを表示させる方法のメモ。(不確かな内容があります) 目次 概要 トップのフォルダに以下のような英語、日本語のトップページがある場合。 英語:http://www.mysite.com/index.html 日本語:http://www.mysite.com/indexjp.html http://www.mysite…

続きを読む

レスポンシブメニュー

2013年12月7日

基本的(単純)なレスポンシブメニュー(Menu 部分をクリックするとメニューが展開されて表示されるようなメニュー)の作成に関するメモ。 PC などでの表示(メニューは横並び) ヘッダ部分の「960×240」は特に意味はなし。ダミー画像。 スマートフォンなどでの表示 Menu 部分をクリック(タッチ)すると展開される HTML の記述 head 要素…

続きを読む