Web Design Leaves

HTML ソースをページに表示させる際、そのままソースを記述してしまうと、HTML 要素として解釈されてしまうので、「< 」や「 >」 は変換（エスケープ）しておく必要があるが、いちいち変換するのは面倒なので一括して変換する方法のメモ。 目次 概要 テキストエリアに入力した HTML ソースをボタンをクリックすると、エスケープ処理（変換）した文字…

続きを読む

google-code-prettify を使ってシンタックスハイライトする方法のメモ。 google-code-prettify の最も簡単な方法はオートローダーを使う方法で、以下をヘッダー部分に記述して、表示する部分を pre 要素で囲み、pre 要素に「prettyprint」というクラスを指定するだけ。 但し、オートローダを使う方法だとカスタマイズが…

続きを読む

Windows 環境での git（バージョン管理システム/VCS）の使い方等に関する個人的なメモ（自分の学習のためのまとめ）。 公式サイト：http://git-scm.com/ 参考にさせていただいたサイト Git初心者が見るべきサイトまとめ Pro Git（日本語版）：http://git-scm.com Try Git：https://try.gith…

続きを読む

CSS のベンダープレフィックス（接頭語）を自動で最適化（追加・削除）してくれる Sublime Text のプラグイン「sublime-autoprefixer 」に関するメモ。 対象ブラウザやそのバージョンを指定することも可能。 適切なベンダープレフィックスを付けるのはとても面倒で大変だが、このプラグインを使用すると簡単に CSS に付与したベンダープレ…

続きを読む

レスポンシブのサイトを作成していたら、何故かスマホのサイズの場合のみ、右側に余白（空間）ができていた。 HTML の構造は以下のようなもの。 CSS は以下のようなもの（関連部分抜粋） #header の幅は 100% に指定してあるのに、いくつかのページのみスマホのサイズでヘッダーの右側に余白ができる。よく見るとヘッダー部分のみではなく全体に余白ができてい…

続きを読む

HTML5 文書の構造や新しい要素に関する個人的なメモ。 参考： 「入門 HTML5（オライリー）」 「TAG index Webサイト」 「HTML5のセクションで“文書構造”を理解する atmarkIT」 目次 DOCTYPE HTML5 の DOCTYPE は以下のようになる。 DOCTYPE は HTML ファイルの最初の行に存在する必要がある。 そ…

続きを読む

HTML5 の機能を検出する方法の個人的なメモ。 参考：「入門 HTML5（オライリー）」 目次 Modernizr Modernizr は HTML5 と CSS3 の機能のサポートを検出してくれる JavaScript ライブラリ。（これを利用するのが一番簡単だと思う） Modernizr は読み込まれると、Modernizr という名前の JavaSc…

続きを読む

Modernizr の基本的な使い方に関する個人的なメモ。 Modernizr は、ユーザーのブラウザがどのような機能をサポートしているかを検出（テスト）し、その結果に基づき html 要素に特定のクラスを付与したり、Modernizr という名前のグローバルオブジェクトを生成しそのプロパティに各機能に関する情報を格納する JavaScript ライブラリ。…

続きを読む

今回行ったドメインの移管（転入）を行った際に気づいたことのメモと覚書。 いろいろと事情があり以前米国のレンタルサーバー間での移管の時と、ドメインの移管のタイミングが異なってしまったのでサイトの移転に時間がかかってしまった。 目次 以前行った際の手順 以前米国のレンタルサーバー間（Dreamhost -> inMotion）での移管を行った際のおまかな手順は以…

続きを読む

ユーザーがサイト上で存在しないページにアクセスしたときに表示される 404 ページのカスタマイズに関するメモ。 目次 404 ページ Google ウェブマスターツールの「有益な 404 ページを作成する」には以下のように書かれている。 また、404 ページについて以下のようなことも書かれている。 ユーザーに対して、探しているページが見つからないことを明確に…

続きを読む