Web Design Leaves

目次 久しぶりに Compass を 1.0.3 (Polaris) にアップデートしたら、コンパイル時に以下のような警告がコマンドプロンプトに表示されるようになりました。 C:\xampp\htdocs\compass>compass w >>> Compass is watching for changes. Press Ctrl-C to Stop. modified sass/_setting.scss WARNING: Compass has changed how browser support is configur…

続きを読む

Google Fonts（GoogleFonts）の基本的な使い方・利用方法に関するメモ。 Google Fonts は「Open Source Fonts」で商用・非商用に関わらす無料で使用することができます。About Google Fonts 目次 Google Fonts で使いたいフォントを探す Google Fonts (https://www.google.com/fonts/) にアクセスして使いたいフォントを探します。 もし、使いたいフォントのキーワードがわかっていれば、左上の検索ボックスにキーワードを入れて検索することができます。 検…

続きを読む

アメリカのメールマガジン（ニュースレター）配信サービス、MailChimp の登録方法と基本的な使い方について。 MailChimp には無料利用枠があり、メールアドレス登録数が 2,000件未満で、月間の送信回数が 12,000件までなら無料で利用可能です。 メール編集にはいくつかのテンプレートがあり、予めデザインされたものやドラッグ＆ドロップで簡単に編集できるもの、カスタムデザインなどが用意されています。HTML 及びテキスト形式に対応しています。 また、有料でしか使用できない機能には以下のようなものがあります。 Automation （マーケッティ…

続きを読む

HTML ソースをページに表示させる際、そのままソースを記述してしまうと、HTML 要素として解釈されてしまうので、「< 」や「 >」 は変換（エスケープ）しておく必要があるが、いちいち変換するのは面倒なので一括して変換する方法のメモ。 目次 概要 テキストエリアに入力した HTML ソースをボタンをクリックすると、エスケープ処理（変換）した文字列を表示するページを作成。 HTML ソースのエスケープ処理用ページの作成 HTML HTML の構造は以下の部分から成り、単純なもの。 textarea 要素（id=”input&#82…

続きを読む

google-code-prettify を使ってシンタックスハイライトする方法のメモ。 google-code-prettify の最も簡単な方法はオートローダーを使う方法で、以下をヘッダー部分に記述して、表示する部分を pre 要素で囲み、pre 要素に「prettyprint」というクラスを指定するだけ。 但し、オートローダを使う方法だとカスタマイズが難しいので google-code-prettify からファイルをダウンロードして使う方法について記述。 関連ページ：WordPressのショートコードでシンタックスハイライト 目次 google-…

続きを読む

Windows 環境での git（バージョン管理システム/VCS）の使い方等に関する個人的なメモ（自分の学習のためのまとめ）。 公式サイト：http://git-scm.com/ 参考にさせていただいたサイト Git初心者が見るべきサイトまとめ Pro Git（日本語版）：http://git-scm.com Try Git：https://try.github.io/levels/1/challenges/1 サルでもわかるGit入門：http://www.backlog.jp Learn Git Branching：http://k.swd.cc G…

続きを読む

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

続きを読む

レスポンシブのサイトを作成していたら、何故かスマホのサイズの場合のみ、右側に余白（空間）ができていた。 HTML の構造は以下のようなもの。 CSS は以下のようなもの（関連部分抜粋） #header の幅は 100% に指定してあるのに、いくつかのページのみスマホのサイズでヘッダーの右側に余白ができる。よく見るとヘッダー部分のみではなく全体に余白ができている。デスクトップ PC でサイズを変更した場合や FireFox の View port resizer では余白が確認できない。 解決策 ラッパー要素の #container に「overflow:…

続きを読む

HTML5 文書の構造や新しい要素に関する個人的なメモ。 参考： 「入門 HTML5（オライリー）」 「TAG index Webサイト」 「HTML5のセクションで“文書構造”を理解する atmarkIT」 目次 DOCTYPE HTML5 の DOCTYPE は以下のようになる。 DOCTYPE は HTML ファイルの最初の行に存在する必要がある。 その前に何かあれば（空白行などでも）一部のブラウザは DOCTYPE が存在しないものとして扱い、ブラウザは後方互換モードで表示する。 DOCTYPE によって発動されるブラウザモード 後方互換（qui…

続きを読む

HTML5 の機能を検出する方法の個人的なメモ。 参考：「入門 HTML5（オライリー）」 目次 Modernizr Modernizr は HTML5 と CSS3 の機能のサポートを検出してくれる JavaScript ライブラリ。（これを利用するのが一番簡単だと思う） Modernizr は読み込まれると、Modernizr という名前の JavaScript オブジェクトを作成し、そのプロパティにテストの検出結果（true/false）を格納するので、それを利用する。 関連ページ：「ブラウザの HTML5, CSS3 の機能を検出してくれる Mo…

続きを読む