デザイナーのタネあかし

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

標準のフォントでは WEBの文章での「」や『』など約物の空きが気になります。それを解消できる約物半角専用のWebフォント、Yaku Han JP  をご紹介します。 約物半角専用のWebフォント、Yaku Han JP デザイナーの Qrac（クラク）さんが N....続きを読む

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

<table>テーブルタグのサンプルコードです。HTMLコーディングする際のベースとしてご活用ください。 サンプルコード サンプルの表示イメージです。 HTML <table class="fgr-table"> <thead> <tr> <th col....続きを読む

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

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

新松戸にあるコワーキングスペースにて、2015年4月1日に開催されたWordPressの勉強会『WordPress部 @ 松戸 Banana Cluster』にてLT（ライトニングトーク）を行いました。 その時のスライドをシェアさせていただきます。 そろそろ明朝（セリフ）フォント....続きを読む

Bootstrap を利用してwebサイトを構築した時、ページをプリントアウトするとリンクの箇所に意図していないのにURLが記載されていて驚いてしまいました。ブラウザのプリント設定？それともほかの？・・・と調べてみたところBootstrap が原因でした。Bootst....続きを読む

Bootstrap 3.3.4 でサイトを構築後、スマホ・タブレットで表示確認していたところ、Dropdowns （ドロップダウンメニュー）の挙動がおかしいのを発見しました。複数のDropdownを設定しているドロップダウンメニューAをタップして開く次にドロップダウンメ....続きを読む

IE6～9にCSS3を反映させるため、 PIE　http://css3pie.com/　を利用されている方も多いのではないでしょうか。 今回はそのPIEを用いて透過する背景（色）の設定方法をご紹介します。 ドロップシャドウと併用できないデメリットがありますが、デザイン....続きを読む

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

サイトデザインをしていると、稀にクライアントから「ご挨拶は明朝体にできませんか。」と相談されることがありませんか？そんな時は Microsoft OFFICE（以下 MS Office ）の付属フォントをCSS指定してはいかがでしょうか。ちなみに 「ご挨拶」でgoogle画....続きを読む

新松戸にあるコワーキングスペースにて、2015年2月18日に開催されたWordPressの勉強会『WordPress部 @ 松戸 Banana Cluster』にてLT（ライトニングトーク）を行いました。 その時のスライドをシェアさせていただきます。マスメディアサイトのテキスト部分....続きを読む

IE7 に対応させるためにコーディングを行っていたことろ、ドロップダウンが下のブロックレベル要素に潜り込んでしまう事象が発生していました。他の主要ブラウザでは起きておらず、IE7だけの現象でした。改めて調べたものをまとめておきます。どんな問題....続きを読む