HTML/CSS

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

ブラウザの HTML5, CSS3 の機能を検出してくれる Modernizr

2014年10月4日

Modernizr の基本的な使い方に関する個人的なメモ。 Modernizr は、ユーザーのブラウザがどのような機能をサポートしているかを検出(テスト)し、その結果に基づき html 要素に特定のクラスを付与したり、Modernizr という名前のグローバルオブジェクトを生成しそのプロパティに各機能に関する情報を格納する JavaScript ライブラリ。 Modernizr を利用することで個々のブラウザの状況にあわせたコードを書くことが可能。 Modernizr の主な機能 Modernizr という名前の JavaScript オブジェクトを作成…

続きを読む

ドメインの移管(転入)に関するメモ

2014年5月30日

今回行ったドメインの移管(転入)を行った際に気づいたことのメモと覚書。 いろいろと事情があり以前米国のレンタルサーバー間での移管の時と、ドメインの移管のタイミングが異なってしまったのでサイトの移転に時間がかかってしまった。 目次 以前行った際の手順 以前米国のレンタルサーバー間(Dreamhost -> inMotion)での移管を行った際のおまかな手順は以下のようなもの。 移管先のホスティングにアカウントを作成 既存のウェブサイトのデータを移管先のホスティングにコピー、メールアカウントを作成 既存のホスティングでネームサーバーを移管先のホスティングに切…

続きを読む

404 ページの作成

2014年5月27日

ユーザーがサイト上で存在しないページにアクセスしたときに表示される 404 ページのカスタマイズに関するメモ。 目次 404 ページ Google ウェブマスターツールの「有益な 404 ページを作成する」には以下のように書かれている。 また、404 ページについて以下のようなことも書かれている。 ユーザーに対して、探しているページが見つからないことを明確に伝える。 404 ページを、サイトのその他の部分と同じデザイン(ナビゲーションを含む)にする。 最も人気のある記事や投稿へのリンクの他、ホームページへのリンクを追加する。 404 ページが Googl…

続きを読む

Google カレンダーをレスポンシブ対応に

2014年5月20日

Google カレンダーをウェブサイトに埋め込んでレスポンシブ対応にする方法のメモ。 目次 ウェブサイトに埋め込む ウェブサイトに埋め込む(https://support.google.com/) Google ID を取得してすでにカレンダーを利用していることを前提。 Google カレンダーにログイン(下の画像) 右上の歯車のような(設定の)アイコンをクリックして「設定」を選択(下の画像) 以下のような画面が表示される。 左上の「カレンダー」のタブをクリック。(上の画像) カレンダーを誰でも閲覧できるようにするには、カレンダーを一般公開する必要がある…

続きを読む

CSScomb JS を Sublime Text 3 で使ってみる

2014年4月30日

いろいろなサイトで CSS プロパティをソートしてくれるパッケージ「CSScomb」が紹介されていたので、インストールしようと思い「Package Control」で検索すると「! DEPRECATED ! Please use CSScomb JS instead.」と表示される。代わりに「CSScomb JS」をインストールしたので、それに関するメモ(Windows 環境)。 こちらのページ(https://github.com/csscomb/csscomb)にも「DEPRECATED」とあり以下のように書かれている。 おそらく PHP から No…

続きを読む

sublimeBookmark:Sublime Text でブックマークを付けるパッケージ

2014年4月29日

Sublime Text に標準で付いている「Bookmarks」は作成したブックマークに名前が付けられないなど使い勝手がよくないということで作成されたパッケージとのことで、便利そう。 目次 概要 ブックマークに名前が付けられる セッションを越えて保存可能 プロジェクト内のどのブックマークにも移動可能 ブックマーク数の制限なし プロジェクトベースでのブックマークの管理が可能(Sublime Text 3 のみの機能) sublimeBookmark ホーム:SublimeBookmark 以下は Windows のキーで説明していますが、Mac の場合は…

続きを読む

Sublime Text 3 のダウンロードと基本的な設定

2014年4月25日

Sublime Text 3 のダウンロードと基本的な設定に関するメモ。 目次 ダウンロード 以下のページから自分の環境に合うものをダウンロード(以下は Windows 64bit 版) http://www.sublimetext.com/3 インストールはダウンロードしたファイルをダブルクリックして指示にしたがっていくだけでとても簡単なので省略。 設定 メニューの「Preferences」→「Settings-User」に設定を記述する。 どのような設定項目があるかは「Preferences」→「Settings-Default」のファイルを参照し、…

続きを読む

Firefox の表示(文字などの)サイズ

2014年4月25日

Firefox の文字サイズが他のブラウザと比較して大きいのが気になる場合の対処法。 ハードディスクを入れ替えてすべて再インストールしたため同じことを調べたので(1年前に行ったことをすっかり忘れていたので)メモ。 Firefox の場合バージョン22から、PC のディスプレイの設定により表示される(メニューバーや本文などの)文字等の大きさが異なるようで、ディスプレイの設定を変更すれば Firefox の大きさも変わるがそれでは困る(他に影響する)ので、以下の方法で設定。 1.アドレスバーに about:config と入力すると以下のように表示される 2…

続きを読む

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

2014年4月25日

XAMPP(Windows版) のダウンロードとインストールに関してメモ(以前インストールしたときと少し違っていた)。 ダウンロード 「ダウンロード – Xampp」(https://www.apachefriends.org/jp/download.html)からダウンロード。 2014年4月25日現在以下の2つのバージョンがダウンロード可能。 XAMPP 1.8.2 と 1.8.3 違いは PHP などのバージョンや必要条件(OS の種類)で、以下は必要条件。 (1.8.3 では XP、2003 はサポートされていない) XAMPP 1….

続きを読む

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

2014年4月3日

CSS3 アニメーションに関する個人的なメモ。 CSS3でアニメーションを実装する方法は以下の2種類がある。 transition プロパティでの定義 animation プロパティでの定義 Transition 始点終点の2点間のアニメーション機能を提供 (始点から終点までの2点間のアニメーションしか行えない:設定がシンプル) 設定時間の中でアニメーション中の変化を自動的に設定し、終了後に自動で逆のアニメーションで元に戻る(hover で動かすロールオーバーなどが簡単に設定できる) ループの設定不可 Animation 設定時間の中で開始・終了するタイ…

続きを読む