最新ブラウザで利用できるCSS3 flexbox を利用した、ナビゲーションメニューのサンプルを作成しました。 ・メニューは均等配置になります。 ・リンクテキストが複数行になっても、要素の縦方向センター揃えになるようになっています。 Flexbox ナビゲ....続きを読む
「」や『』など約物が半角にできる、Yaku Han JP のご紹介
標準のフォントでは WEBの文章での「」や『』など約物の空きが気になります。 それを解消できる約物半角専用のWebフォント、Yaku Han JP をご紹介します。 約物半角専用のWebフォント、Yaku Han JP デザイナーの Qrac(クラク)さんが Noto Sans Jap....続きを読む
Bootstrapを利用したレスポンシブHTML5フレームテンプレート
Bootstrapを利用した、レスポンシブHTML5テンプレートを用意しました。 まずは、ヘッダー、ナビ、フッターなど大枠のフレームのみのシンプルバージョンです。 随時アップデートしていきますので、ぜひご活用ください。 HTML5テンプレート(左右2カラ....続きを読む
HTML <table>テーブルタグのサンプル
<table>テーブルタグのサンプルコードです。HTMLコーディングする際のベースとしてご活用ください。 サンプルコード サンプルの表示イメージです。 HTML <table class="fgr-table"> <thead> <tr> <th col....続きを読む
jquery スムーズスクロールでタブ切り替えが効かなくなった
jQueryを利用してスムーズスクロールを導入した際、タブナビゲーションを利用しているページでタブ切り替えが出来なくなりました。今回はその解決方法をご紹介します。導入しているスムーズスクロール$(document).ready(function () { //スムーズスクロ....続きを読む
スライド「最近知ったBootstrapの注意点」を公開しました
新松戸にあるコワーキングスペースにて、2015年5月20日に開催されたWordPressの勉強会『WordPress部 @ 松戸 Banana Cluster』にてLT(ライトニングトーク)を行いました。 その時のスライドをシェアさせていただきます。 最近知ったBootstrapの注意点 ....続きを読む
スライド「そろそろ明朝(セリフ)フォントを使ってみましょ」を公開しました
新松戸にあるコワーキングスペースにて、2015年4月1日に開催されたWordPressの勉強会『WordPress部 @ 松戸 Banana Cluster』にてLT(ライトニングトーク)を行いました。 その時のスライドをシェアさせていただきます。 そろそろ明朝(セリフ)フォント....続きを読む
【Bootstrap】印刷時に表示されるURLを消す方法
Bootstrap を利用してwebサイトを構築した時、ページをプリントアウトするとリンクの箇所に意図していないのにURLが記載されていて驚いてしまいました。ブラウザのプリント設定?それともほかの?・・・と調べてみたところBootstrap が原因でした。Bootst....続きを読む
【Bootstrap3】dropdownのタップ不具合の解消方法
Bootstrap 3.3.4 でサイトを構築後、スマホ・タブレットで表示確認していたところ、Dropdowns (ドロップダウンメニュー)の挙動がおかしいのを発見しました。複数のDropdownを設定しているドロップダウンメニューAをタップして開く次にドロップダウンメ....続きを読む
【IE8対応】PIEを使った透明背景
IE6~9にCSS3を反映させるため、 PIE http://css3pie.com/ を利用されている方も多いのではないでしょうか。 今回はそのPIEを用いて透過する背景(色)の設定方法をご紹介します。 ドロップシャドウと併用できないデメリットがありますが、デザイン....続きを読む
【BootStrap3】Glyphicons をIE7で使う方法
Bootstrap3なら簡単にアイコンフォントを使うことができますが、残念ながらIE7には正式には対応していません。そこでアイコン表示をIE7に対応させる方法をご紹介します。BootstrapアイコンフォントGlyphiconsの表示方法通常の使い方はこうです。アイコ....続きを読む
【CSS】ご挨拶ページなどで使える!オススメの明朝フォント指定
サイトデザインをしていると、稀にクライアントから「ご挨拶は明朝体にできませんか。」と相談されることがありませんか?そんな時は Microsoft OFFICE(以下 MS Office )の付属フォントをCSS指定してはいかがでしょうか。ちなみに 「ご挨拶」でgoogle画....続きを読む
スライド「マスメディアサイトのテキスト部分CSS設定を調べてみた【2015年2月版】」を公開しました
新松戸にあるコワーキングスペースにて、2015年2月18日に開催されたWordPressの勉強会『WordPress部 @ 松戸 Banana Cluster』にてLT(ライトニングトーク)を行いました。 その時のスライドをシェアさせていただきます。マスメディアサイトのテキスト部分....続きを読む
IE7 で z-indexが効かない場合の対処法
IE7 に対応させるためにコーディングを行っていたことろ、ドロップダウンが下のブロックレベル要素に潜り込んでしまう事象が発生していました。他の主要ブラウザでは起きておらず、IE7だけの現象でした。改めて調べたものをまとめておきます。どんな問題....続きを読む