CSS3 Flexboxを利用したナビゲーションメニューのサンプル

Bootstrap, 環境構築, 素材, ,

最新ブラウザで利用できるCSS3 flexbox を利用した、ナビゲーションメニューのサンプルを作成しました。 ・メニューは均等配置になります。 ・リンクテキストが複数行になっても、要素の縦方向センター揃えになるようになっています。 Flexbox ナビゲ....続きを読む

Bootstrapを利用したレスポンシブHTML5フレームテンプレート

Bootstrap, 環境構築, 素材, ,

Bootstrapを利用した、レスポンシブHTML5テンプレートを用意しました。 まずは、ヘッダー、ナビ、フッターなど大枠のフレームのみのシンプルバージョンです。 随時アップデートしていきますので、ぜひご活用ください。 HTML5テンプレート(左右2カラ....続きを読む

jquery スムーズスクロールでタブ切り替えが効かなくなった

Bootstrap, テクニック, ,

jQueryを利用してスムーズスクロールを導入した際、タブナビゲーションを利用しているページでタブ切り替えが出来なくなりました。今回はその解決方法をご紹介します。導入しているスムーズスクロール$(document).ready(function () { //スムーズスクロ....続きを読む

WordPressのカスタムメニュー【3】Bootstrap3のドロップダウンを利用する方法

Bootstrap, カスタムメニュー,

カスタムメニューの活用方法を紹介していますが、wp_nav_menu()のカスタマイズや、管理画面でclass追加などを用いても、BootstrapのドロップダウンNAVはとても困難です。そこでBootstrap3のドロップダウンを再現してくれるコードがGithubで公開されていま....続きを読む

スライド「最近知ったBootstrapの注意点」を公開しました

Bootstrap, お知らせ, ,

新松戸にあるコワーキングスペースにて、2015年5月20日に開催されたWordPressの勉強会『WordPress部 @ 松戸 Banana Cluster』にてLT(ライトニングトーク)を行いました。 その時のスライドをシェアさせていただきます。 最近知ったBootstrapの注意点 ....続きを読む

【BootStrap3】Glyphicons をIE7で使う方法

Bootstrap, カスタマイズ, テクニック, ,

Bootstrap3なら簡単にアイコンフォントを使うことができますが、残念ながらIE7には正式には対応していません。そこでアイコン表示をIE7に対応させる方法をご紹介します。BootstrapアイコンフォントGlyphiconsの表示方法通常の使い方はこうです。アイコ....続きを読む