はてなブックマーク

【全ブラウザ対応】perfect-scrollbar.jsでスクロールバーの色をCSSで自由に変更する。 WEBデザイナーのつくるデザインって基本的にブラウザからキャプチャ取ってきたスクロールバーが使われるんですけど、グラフィックデザイナーよりの人がつくるWEBデザインってスクロールバーもご丁寧にサイトカラーに合わせた色合いになってる事があるんですよね。 けっこう昔に、スクロールバーをCSSで装飾するエントリーを書いた事がありましたけど、あれはChromeのみだったんですね。 今回はJavascriptを使って、メジャーどころなブラウザはほとんど同一の装飾を施せる「perfect-scrollbar.js」ってJavascriptのプラグインを使ったので備忘録。 perfect-scrollbar.jsの使い方 まずは、必要なファイルをダウンロード。 GitHubに用意されています。 必要

ヘッダーとかのナビゲーションで現在表示中のページを色を変えたりするのをカレント表示と言います。スマホではあまりナビゲーションが全て表示されている事はないけど、PC表示の時はけっこう使います。その方法をまとめました。 共通するのは、現在表示中のナビゲーション部分にCSSのclassを付与して、CSSで見た目を変えるイメージ 【共通HTML】 <ul class="nav"> <li class="current"><a href="/">HOME</a></li> <li><a href="/about.html">こだわり</a></li> <li><a href="/menu.html">メニュー</a></li> <li><a href="/company.html">店舗情報</a></li> <li><a href="/contact.html">お問い合わせ</a></li> <

A4サイズでぴったりWEBページをプリントしたいという要望があったので、対応したまとめ そもそもモニターのPixelと用紙のmmは解釈が違うので、完全にキレイにWEBページをプリント用紙に再現するのは厳しいです…。そんな中でもできる限りA4サイズでプリントできるように頑張ったので、備忘録としてまとめます。 CSSの読み込み設定 普通のWEBページのCSSの読み込みは「style.css」で プリンターの設定は「print.css」で設定する。 head内でCSSの切り替え <link rel="stylesheet" href="css/style.css" media="screen"/> <link rel="stylesheet" href="css/print.css" media="print" /> 「media=”screen”」がモニター、通常のWEBページです。 「med

現在はフラットデザインなどのシンプル系のWEBサイトが主流になっていて、画像が主体のサイト案件も減っていますが、業種のジャンルによっては、CSS3メインのデコレーションより、ビットマップ画像をガシガシ使った案件もまだまだあります。 そんな訳で今回はCSSの擬似要素を使って、高さと幅の伸縮可能な画像を使ったコンテンツ枠を備忘録としてまとめておきます。 今回使用する紙が破れた感じのコンテンツ枠は前回の記事で紹介したものを使用します。 どう分解するかというと、画像を見てもらうのが一番早いと思うので、要はこんな感じ。 Photoshopで作成した画像を「上画像」「真ん中画像」「下画像」と違和感ない程度にリピートできるように分割します。 透明部分を保持する必要があるので、形式はPNG形式で。（GIFでも違和感ないならオケです） 「PC向け」横幅と高さが決め打ちの場合 横幅と高さが決め打ちのPCサイト

以前、jQueryで作成する「スマホでも実装可能なサイズ可変型タブパネル」の記事を書きましたが、1ページにタブパネルを複数作成すると、表示がおかしくなります。 「メインページにタブパネル」「サイドバーにタブパネル」と2つ作成すると、お互いの命令が干渉しあってタブ展開がうまくいきません。 複数設置できないと具合の悪い場合もあるので、今回は別案として、複数タブパネルを設置したい場合の備忘録。 以前のやり方でタブを2つ設置すると問題が・・・ 以前のサンプルに例えばコードをごそっとコピーすると、2つ目のタブをクリックしても1つ目のタブが開閉するだけでうまくいきません。 単純に「href」のリンクと「li」のIDの番号を書きなおせばいけそうな感じでしたが、以下のような現象が起こってうまく行きません。 1.最初に表示されるページが2つ目のタブパネルが見えない。 2.どちらか片方のタブをクリックすると他

スマホサイトの作成をしていると、どのタイプのナビゲーションメニューを実装するか迷います。 コンテンツ量が多いと、アコーディオンメニューだと開き過ぎるとか、コンテンツ量が少ないと横型スライドだと、わびしい感じがあったりとか、そのサイトに適したナビゲーションメニューの選択が必要になるということは、必然的にレパートリーが必要になるということ。そんな訳で今回はLightroom風のポップアップタイプのモーダルウインドウ式のナビゲーションメニューを作成したので備忘録としてまとめておきます。 そもそも、「モーダルウィンドウってナニ？」って方は、Twitterで交流のある@arayutwさんがまとめている「初心者でも分かる！モーダルウィンドウの作り方」って記事でめちゃくちゃ丁寧にまとめられているので、そちらをご参照いただくことをオススメします。かくいう僕も今回のナビゲーションを作成できたのはこの記事のお

CSSでレイアウトを組んでいる時によくある希望のレイアウトは「画像の中央配置」 そんな訳で今回は自分がCSSでコーディング作業をしている時に使用している画像の中央配置の方法を色んなサイトで調べたりするのが面倒なので、自分用の備忘録代わりにまとめておきます。 （1）「text-align:center」でインライン要素を中央寄せ 「text-align:center」はもっとも一般的な中央配置のプロパティですが、前に「text」と書いてあるとおり、テキストや画像などのインライン要素でしか使えません。画像をただ単に中央に配置したいだけなら、これだけでおけ。 【HTML】 <p class="img_center"> <img src="img/sample_image01.jpg" alt="サンプル画像" /> </p> 【CSS】 p.img_center{ text-align: cen

CSS3やらモバイルファーストの概念やSEOの観点からも、見出しに画像を使うのはほとんどなくなり、せいぜいCSSで背景画像に使う程度。＜h＞タグを使う見出しの部分はHTMLでテキストを書いてCSSで装飾するのが理想となってます。 水平ラインを使った「border-bottom」だけでは味気ないので、水平ラインを使った応用型の見出しタイトルのCSSデザインを2つご紹介。 DEMO （1）テキストの左右に水平ラインを引く※擬似要素を使用 下にボーダーを引くだけでは芸がないって場合に有効なデザインかと思います。 HTMLは至ってシンプルに＜h＞を指定するのみ 【HTML】 <h2><span>左右に水平ラインの見出し</span></h2> 【CSS】 h2{ position: relative; text-align: center; } h2:before { border-top: 1p

jQueryを使ってのスライダーってTOPページのメインビジュアルが基本ですが、それはフェード系やダイナミックなアニメーションが主流だった頃の話で、前後左右の画像を表示しつつスライドするカルーセルスライダーが出始めて、メインビジュアルだけでなくコンテンツバナーを複数表示させて左右にスライドするタイプの物がTOPのメインだけでなくサブコンテンツ部分にも多く見られてきてます。 今回とあるコンテンツ量の多いポータルサイトを作成した時にそのタイプのスライダーを作成したので備忘録としてまとめておきます。 どんな感じのスライダーかっていうと、bxSliderの本家サイトにあるサンプル「Carousel – dynamic number of slides」のような感じです。 まず、bxSliderをダウンロードして準備 まず、「bxSlider」の本家サイトからDownloadします。 ダウンロードす

ブログを自作Themeで立ち上げて、コメントが来て承認して返信して、コメント一覧（リスト）を見てみると、なんともお粗末な表示になっていました。自分のThemeのデザインに合わせてカスタマイズしたので、備忘録も兼ねてまとめておきます。 ※今回は、ほとんんどCSSのカスタマイズのみでPHPはほとんどイジってません。 見出し変更のためcomment.phpを作成 デフォルトや配布されてるThemeなら基本設置されていますが、自分のThemeには設置していなかったので、まずはここからです。comment.phpを設置していなくてもsingle.php（ブログページ）に以下の記述をしておけば、デフォルトのコメントフォームとコメントリストが設置されます。 <?php comments_template(); ?> しかし、これだけではコメントリストの見出しが「フィードバック」と表示されます。 なので、

コーディング作業の際にふとboaderにグラデーションを引くのってどうするのかなあと思い、調べてみたらできたので備忘録としてまとめておきます。正確には擬似要素を使ってそれっぽくしてるだけです。 擬似要素を使ってBoxに2pxのboaderにグラデーションをかける場合 まずは、boaderが引かれるBOXをHTMLでマークアップ 【HTML】 <div class="box"> <p>横の線にグラデーションがかかったBox</p> </div> CSSはこんな感じ 【CSS】 .box{ margin:auto; width: 95%; height:100%; text-align: center; border-left:2px solid #0b01b8; border-right:2px solid #0b01b8; } .box:before, .box:after{ conten

色んなサイトで使われる定番のコンテンツ「Q&A」「よくあるご質問」をどのようにレイアウトを組んでいくか？ HTMLの構文的にももっともふさわしいのはDL定義を使うのがいいかと思います。 そもそもDL定義とはどんな物か？HTMLクイックリファレンスには以下の説明があります。 ＜dt＞タグは、定義・説明される言葉を表す際に使用します。 例えば、定義用語・名前・何らかの説明をする際の説明の前半部分などです。 定義・説明リストを作成する際には、 ＜dl＞～＜/dl＞の中に、 ＜dt＞タグで定義・説明される言葉を、 ＜dd＞タグでそれに対応する説明を配置してリストを作成します。 HTMLクイックリファレンスより抜粋 HTML4.01では定義語限定の文法でしたがHTML５から説明される言葉なら何でもOKってことらしいので、 ＜dl＞で全てを囲ってその中に「＜dt＞っていうのは＜dd＞ですよ」って説明を

コーポレートサイトや飲食店のサイトなどの定番コンテンツ「Access」にGoogleMAPを埋め込むのはよくあることですが、通常のGoogleMAPからiframeで地図を埋め込むこともできますが、横幅と縦幅ぐらいのカスタマイズしかできないので、応用が効きません。そんな訳で今回はGoogleMaps APIを取得して、GoogleMapをカスタマイズする方法を備忘録としてまとめておきます。 GoogleAPIを取得してGoogleMAPを表示 まず、ごくごくシンプルに地図のみを表示するやり方 （1）head部分に以下のスクリプトを記述 <script src="http://maps.google.com/maps/api/js?sensor=true"></script> （2）bodyタグにスクリプトを読み込ませるための「onload=”initialize();」を記述。 divのI

iPhoneが発売された初期の頃「スマホにはスクロールバーの概念がない」とあるお方からスマホが出来た頃にそう言われましたが、 「スクロールバーがない＝スクロールできない」というわけではなく、バーが見えてないだけで実際はスクロールさせることが出来ます。ですが、iphoneではスクロールバーが表示されないのでユーザビリティーの観点から考えると明らかによくありません。 そんな訳で今回は、iphoneでも見れるスクロールバーを作成してみたので、備忘録。 ※Androidでの実機確認はしてません。iPhoneのiOS7でのみの確認です。旧バージョンで見れる・見れないとかあったらコメント下さいm(_ _)m スクロールしてる間だけスクロールバーを表示 スクロールバーを表示させたいBoxに「-webkit-overflow-scrolling: touch;」を記述するだけです。PCでは何の変化もありま

スマホのWEBデザインをしているのに必ず決めなきゃいけない事は「ナビゲーションメニューをどのタイプでいくか」って事です。表示領域の少ないスマホの画面ではできるだけナビゲーションはコンパクトにわかりやすく見せたいもんです。 ナビゲーションのタイプはいくつかありますが、今回はFacebookアプリのナビゲーションメニューですっかりお馴染みになった横にスライドするタイプのスライド式ナビゲーションを実装した時の備忘録 jQuery のプラグイン「slidebars.js」を使って実装 スライド式ナビゲーションは基本jQueryを使って実相するパターンがほとんどでプラグインも多く配布されています。その中でも比較的人気なのが「slidebars.js」かと思いますので、今回はこちらを使用します。 【配布先サイト】Slidebars ダウンロードしたファイルにはバージョン違いでたくさんのファイルが梱包さ

ちょっと前からCSSでフラットな立体ボタンは色んな所で目にしますが、一回自分でもつくろうかな〜と思ってたのに、なかなかその手のデザイン案件に当たらなかったので自分で作ってみることにしましたので、備忘録。 もちろんクリックもしくはロールオーバー時はボタンらしくカチッとしたアクションを行うボタンです。 まず、立体的なボタンを「box-shadow」でつくる HTMLはごくごく一般的なソースになります。 【HTML】 <p class="solid_btn"><a href="#">立体ボタン</a></p> 立体部分はCSS3のボックスシャドウでぼかしを「0」にしてくっきりした影をつけるイメージです。 【CSS】 .solid_btn a{ background-color:#f70841; padding:12px 40px; text-decoration:none; color:#fff

WordPressでサイト構築をした際サイドバー（sidebar）を各ページ毎に変えたい事はよくあります。 TOPページ（index.php）と固定ページ（page.php）とブログページ（single.php）と3パターンだけなら、phpファイルに別々のサイドバーを呼びこむだけで済みますが、 例えば固定ページAには、Aのサイドバーを。固定ページBには、Bのサイドバーをとか、ブログサイトでは少ないですが、コーポレートサイトではこういう動きがほしい時が多々あります。今回はそのパターンの備忘録。 個別のサイドバーを作成する方法 まず、通常のサイドバーを呼び出すWordpressコードは以下 <?php get_sidebar(); ?> これで、Theme内の「sidebar.php」というファイル名を呼び出す事ができます。 複数サイドバーを使用する場合は以下のようにSidebarのPHPファ

今回CSS 珍百景 Advent Calendar 2014にエントリーさせていただきましたが、バグというよりCSSセレクタの対処法的な記事です。 例えば、ボタンを作成する時、CSSで背景画像を指定する時はたいていボタン全てをデザインする事がザラでしたが、スマホの横幅可変のボタンを作成する時は、できるだけCSSのみで作成したいですが、ワンポイントで画像をのせたい場合もあります。そんな時に背景色やグラデーションに背景画像を重ねる時の方法を備忘録としてまとめます。 ※今回の検証は「firefox」と「chrome」のみです。「ie」は確認してませんm(_ _)m 背景色と背景画像を表示させたい場合 一般的な角丸色付きボタンの右端に矢印を付けたい場合。 【失敗例】まず、何も考えずに組むとこんな感じ background:url(img/arrow.png) no-repeat; backgrou

以前、CSSで吹き出しを作って対談式のレイアウトを組んでみたんですが、PCのみのレイアウト組みだったので、新たにスマホ版の物を組んでみました(・∀・) PC版との違いを検証してみれば面白そうなので、見比べながら検証しようと思います。 @akiueoさんのブログで「どなたか改良版を」って書いてあったので、LINEのグループトークみたいなレイアウトの改良版をアップします（頼まれてもいませんが・・・） CSSで会話形式のフキダシデザインを作ってみる – AIUEO Lab2 以前組んだ奴とほとんど同じレイアウトで対応させた例 以前の物は横幅指定していたため、スマホではキチンと表示されませんので、width指定のところはすべて％表示に治す必要があります。【HTML】はほとんど変更なしです。＜img＞に直接指定しているサイズ指定を取っ払うのみです。 HTMLマークアップ 【HTML】 <body>

最近特にスマホの案件が増えてる・・・というよりも、セットで当たり前になってます。 スマホはディスプレイの表示領域がPCに比べて少ないので、ファーストビューはもちろん、スライドした下の領域も少ないスペースを有効に使って、ユーザーにいち早く情報を伝える必要があります。そんな訳で今回はjQueryのtoggleメソッドを使った定番のアコーディオンメニューを備忘録としてまとめておきます。 アコーディオンメニューはjQueryの「slideUp()」や「slideDown()」が一般的なようですが、今回はToggle()を使用して、アコーディオンメニューを実装させてみます。 toggleメソッドの概要 jQuery日本語リファレンスによると… 各要素のうち、表示状態にあるものを非表示にし、非表示状態にあるものは表示状態にします。 jQuery日本語リファレンスより引用 ある要素に設定することによって

古くからの友人に「ECサイトのバナーの作り方のコツ」的な物を教えて欲しいという相談をされたので、今回は制作のコツとか色々まとめてみようと思います。Web系の商業デザインでは初歩の初歩ですが、何かと奥が深いのがデザインですから・・・結構長文になってしまいました。 商業デザインをするにあたって各方面に応用が効くと思いますので、初心者の方はぜひ目を通してみてくださいm(_ _)m そもそもECサイトのバナーデザインとは？ 一言でECサイト用のバナーと言っても種類は様々で大まかに分けると・・・ 【A】商品購入のページに誘導するタイプ（自社サイト） 【B】新商品orイチオシor割引のPRタイプ（自社サイト） 【C】商品購入ページの商品説明タイプ（自社サイト） 【D】外部サイトへの自社サイトor自社商品宣伝タイプ（外部サイト） こんなところでしょうか？では、一つずつ確認していきましょう(・∀・) 今回