Web Design Leaves

以下のサイトを参考にまとめた「LESS」の基本的な使い方のメモ。詳細（解説等）は以下のサイトを参考にしてください。 参考にさせていただいたサイト LESS 日本語ページ「The dynamic stylesheet language」 gihyo.jp 「LESSで3倍ラクするスマートフォンコーディング」 ネスト CSS のセレクタを入れ子にすることができる…

続きを読む

先日このサイトを Bootstrap 3 を使ってリニューアルして、IE のブラウザモードとドキュメントモードを IE8 にして確認したところ、ナビゲーションバーがスモールデバイス用のトグルメニューが表示されてしまっていました。 respond.min.js の読み込み おそらくメディアクエリを認識していないようで、実機で確認しても同じ状態だったので、調べた…

続きを読む

Bootstrap 4 に関しては以下をご覧ください。 Bootstrap4 の使い方 Bootstrap 3 を WordPress で使った際のメモ。 目次 Bootstrap 3 のインストール Bootstrap の「Getting started」ページで「Download Bootstrap」をクリックして Bootstrap 3 をダウンロード…

続きを読む

typewonder は既存の Web ページを、指定した Web フォントで表示してくれるサービス。使い方はとても簡単。http://typewonder.com/（Typewonder Beta）にアクセスして、試してみたいページのアドレスを入力し、フォントを指定するだけ。 「Typewonder Beta（http://typewonder.com/）…

続きを読む

Prepros をインストールして Compass を使った際のメモ。 config.rb の設定が反映されない？ 追加情報 2013年8月31日 Version 3.0.0 で config.rb の設定が反映されるようになりました。 昨日 Prepros を起動したところ画面上部に「贈り物」のようなオレンジ色のアイコンが表示されていたのでクリックすると、…

続きを読む

Zen-coding (Emmet) に関するメモ。 Zen-Codingは、HTML と CSSをショートカットや短縮記法でコードを書くことができるライブラリで、多くのアプリケーションで提供されている。そのZen-Codingが、「Emmet」とリネームされて2013年2月24日に正式リリースされた。 エディタやオーサリングツールなどによって使用できるメニ…

続きを読む

目次 更新：2016年5月20日 Sass は Syntactically Awesome Style Sheets (構文的に素晴らしいスタイルシート) の略で、CSS を便利に使えるように拡張した言語です。 Sass には Sass 記法（拡張子 .sass）と SCSS 記法（拡張子 .scss）の二つの記法がありますが、ここでは SCSS 記法（拡張…

続きを読む

Pure は Yahoo! が公開している CSS フレームワーク。その基本的な使い方のメモ。 Pure の読み込み Pure/Customize: Choose the modules that you need 以下を head 要素内に記述するだけ。（各機能別に読み込むことも可能） ボタン Pure/Buttons: Simple CSS for Bu…

続きを読む

PC 用に作成した WordPress のテーマを jQuery Mobile を使ってスマートフォン対応にする際のメモ。 PC とタブレット端末には、すでに作成してあるテーマを使用し、ユーザーエージェントによりテーマを切り替えるプラグインを利用して、スマートフォン用に jQuery Mobile を使ってテーマを作成。 以下は参考にした主なサイト。 jQu…

続きを読む

WordPress で Favicon（ファビコン）を表示する方法のメモ。 Favicon に使う画像を作成して用意する。（X-Icon Editor などを利用） Favicon に使う画像の名前は「favicon.ico」にする。 Favicon の画像を使用中のテーマのメインディレクトリに配置する。 （/wp-content/themes/テーマ名） …

続きを読む