HTML/CSS

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

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

2014年3月30日

@IT に掲載されていた Compass/SASS を使ったミックスインの作成方法の記事をもとに、個人的に使いそうなことをカスタマイズしたりした際のメモ。 Sass と Compass がインストールされていることが前提。Compass を使用しないものもあるが、「@import “compass”;」が記述してあることが必要。インストールや設定に関しては「Sass/Compass のインストールと基本的な環境設定」を参照。 サンプル ボックスシャドウを利用したミックスイン 背景に彫り込まれたように見える線 border とそれに…

続きを読む

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

2014年3月27日

アニメーションのミックスインを探していたら見つけた Compass/SASS を使ったアニメーションのミックスインに関するメモ。 Compass/SASS は最近始めたばかりなのでこの方法が正しいかは不明だが一応やりたいことはできているみたい。 追記 Sass 記法で書かれているものとは別に Scss でかかれているもの(animate.scss)も見つかったので追加。(2014年3月31日) Animate Mixin for Compass/SASS 以下のサイト上部の「Download」のところの「_animate.sass」をクリックするとコード…

続きを読む

Compass のミックスイン

2014年3月27日

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

続きを読む

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

2014年3月4日

Windows 環境での Sass と Compass のインストールと基本的な環境設定に関するメモ。 Ruby のインストール Sass には Ruby が必要なので Ruby がインストールされているかどうかをコマンドプロンプトで確認する。 上記コマンドで Ruby のバージョンが表示されれば、Ruby はインストール済み。 インストールされていない場合は、Ruby の公式サイトのダウンロードページ(https://www.ruby-lang.org/ja/downloads/)の下のほうにある「Windows版Rubyバイナリ」からリンクを選択して…

続きを読む

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

2014年2月25日

Google Map をレスポンシブに対応させる方法のメモ。 目次 概要 サンプル 参考サイト:「How to Make the New Google Maps Embeds Responsive」 基本的な構造の HTML https://maps.google.com で住所を入力して、鎖のようなアイコン(リンク)をクリックし、「ウェブサイトへの地図埋め込み用 HTML コード」を取得する。(カスタマイズしたい場合は、「埋め込み地図のカスタマイズとプレビュー」をクリック) 追加情報 現在は Google Map が変更されてこれを書いたときとは少し違…

続きを読む

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

2014年2月25日

Youtube(iframe 要素)をレスポンシブに対応させる方法のメモ。 概要 iframe で出力された Youtube 動画を CSS を使ってレスポンシブに対応させる。 参考にしたサイト:「Thierry Koblentz / A List Apart : Creating Intrinsic Ratios for Video」 サンプル Youtube から iframe の埋め込みコード(共有 → 埋め込みコード)を取得して、それを任意のクラス名を付けた div 要素(class=”youtube”)で囲む。 以下のよ…

続きを読む

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

2014年1月15日

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

続きを読む

レスポンシブメニュー

2013年12月7日

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

続きを読む

acmailer 3 を使ってみる(不着メール設定)

2013年12月2日

acmailer3 を使ってみた際のメモ。「不着メール設定」で少しはまった。今回試した共用サーバー(inMotion)では、「.forward」の機能が使えないことが判明したので cPanel の E-mail の「Forwarders」を利用。 ダウンロード 以下のページからダウンロード(今回ダウンロードしたバージョン:acmailer3.8.14 正式版) 「perl パス」を選択してダウンロードをクリック。 http://www.acmailer.jp/download/index.html インストール http://www.acmailer.j…

続きを読む

IE11 のエミュレーション

2013年11月28日

IE10 では、開発者ツール(F12)のドキュメントモードでバージョンを選ぶとエミュレーションしてくれていたが、IE11 では、バージョンを選択しただけでは正しく表示されない。 検索したところ、以下の記事を見つけたので参考にさせていただいた。 Internet Explorer11にてF12 開発者ツールのエミュレーションが使いづらい件(N2P) Windows 8.1 徹底解剖 第4回 「Internet Explorer 11」(窓の杜) 新しい開発者ツールでは、タグで X-UA-Compatible を設定して、開発者が指定しなければならないとのこ…

続きを読む