HTML/CSS

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

HTML ソースのエスケープ処理

2015年4月19日

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

続きを読む

google-code-prettify を使ってシンタックスハイライト

2015年3月29日

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

続きを読む

git の基本的な使い方に関するメモ

2015年3月8日

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

続きを読む

sublime-autoprefixer : Sublime Text でベンダープレフィックスを最適化してくれるプラグイン

2015年2月5日

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

続きを読む

スマホのレスポンシブデザインで右側に余白ができる場合

2014年12月27日

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

続きを読む

HTML5 の構造

2014年11月8日

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

続きを読む

HTML5 の機能検出

2014年10月25日

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

続きを読む

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

2014年10月4日

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

続きを読む

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

2014年5月30日

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

続きを読む

404 ページの作成

2014年5月27日

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

続きを読む