色のアクセシビリティ対応で役に立ったツール | バシャログ。
こんにちは。2月が28日までしかないことを一昨日思い出したsitoです。 今回は、とある案件でアクセシビリティ：AA レベルのサイトデザインを行ったときに使ってみて便利だった、色のチェックができるツールをご紹介したいと思います。 アクセシビリティって？という方は、以前kourakuが書いたこちらの記事 ▼【アクセシビリティ】HTML/CSSで突っ込まれた点をメモメモ https://bashalog.c-brains.jp/17/09/08-193700.php とか、 ▼Web Content Accessibility Guidelines (WCAG) 2.0 https://waic.jp/docs/WCAG20/Overview.html をご参照くださいませ。 ▼Web Content Accessibility Guidelines (WCAG) 2.0の原文はこちら htt
CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 | バシャログ。
Backjoyを買ってみたらほんとに腰が楽なminamiです。 CSSで要素を上下中央寄せする方法は古くから色々と試されてきました。 今回は海外のサイトで知って目から鱗だった方法をご紹介します。 基本的な設定 上下左右中央寄せしたい要素に以下のCSSを設定します。 position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 任意の値 height: 任意の値 これだけ。これだけで親要素に対しての上下左右中央寄せを実現できます。 追記： 親要素にはposition: absolute;かposition: relative; を設定してください。body に対してセンター寄せしたい場合はそのままでOKです！ 今までtop とleft の値を50%にとって、要素の高さと幅の分だけマイナスのmarg
スマートフォンサイトのコーディング Tips あれこれ | バシャログ。
ゴールデンウィークはゴールデンに過ごせそうにない Latin です。 今回はスマートフォンサイトのコーディング周りでのあれこれをまとめてみます。 先日の macky の記事、「スマホサイトの矢印付きメニューをCSSのみで実装する。」もあわせてご覧ください。 viewport 系の設定 描画サイズをデバイスの横幅に合わせる、拡大縮小を不可に これが一番よく見る形式でしょうか？ <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> 文字サイズの自動調整をオフにする 各スマホブラウザでは、横向きにすると text-size-adjust の処理が走り、自動で文字サイズを最適化（拡大）する機能があります。 読
あれ、いつも書いてるな～というJavaScript の小技集 | バシャログ。
いい加減髪を切りたいminamiです。 JavaScriptでいつも書いてるな～という処理や、知っていると便利なTipsを簡潔に集めた記事を見てほお～と思ったものがいくつもあったので抜粋してみました。 ※追記1： ご指摘がありましたので一部修正しました。「配列をソートする」ではなく「配列をシャッフルする」でした。 ※追記2：「HTMLをエスケープする」のソースがまちがって表示されていました。修正しました。 ※追記3：予想以上に反響が大きく、多数ご指摘を受けてしまいました。よく使う処理の書き方もいろいろあるんだな～という参考程度にご紹介したのですが、参照元の記事の内容の検証が不十分なまま紹介してしまい申し訳ありませんでした。いろいろと勉強になりました！ 45 Useful JavaScript Tips, Tricks and Best Practices 配列からランダムで値を取り出す v
[WordPress]サムネイル画像を再生成してくれるプラグイン Regenerate Thumbnails | バシャログ。
こんにちは Latin です。WordPressのプラグイン「Regenerate Thumbnails」のご紹介。先日、実案件ですごく便利なプラグインだな～と感じたのでメモ。 WordPress の functions.php にオリジナルサイズのサムネイルを、いくつか生成する処理をいれているのですが、途中の仕様変更でサムネイルサイズが変わる事に･･･。 通常、サムネイル生成は「画像をアップロード」した際に走る処理の為、アップロードし直さなければなりませんが、すでに数百件のデータが入っている場合、そんな訳にもいきません。 既に数百件の記事が投稿されている。（画像が数百枚） サムネイル生成の処理は「画像アップロード時」に走る為、再アップロード作業が必要。 プラグインでなんかいいのないかな～と思っていたら、 ちょうど LIGさんのブログでまさに「要件バッチリ」なプラグインを紹介されていました
![[WordPress]サムネイル画像を再生成してくれるプラグイン Regenerate Thumbnails | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/b53dec6a802a8894496962b618bea8a7e8829438/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fimages%2Fcat_wordpress.png)
どれ使う？使い勝手の良いカラースキームツール8選！ | バシャログ。
今更ながら最近PSPの「勇者のくせになまいきだor2」が楽しくて仕方ない seki です。世界に平和はおとずれなぁい!!! さてさて今回は、もう何番煎じになるか分りませんが･･･！私がよく使うカラースキームツールのご紹介です。こういうツールは、突然URLが消えてなくなってしまう事もあるので、定期的におさらいも兼ねて一覧を作っておくのはいいことなんだ･･･！と自分に言い聞かせつつ、最近のものから定番のものまで、これだけ抑えておけば大丈夫！という、多機能で使いやすいものを選んでみました。 詳細は以下より。 カラースキームツールを使いこなそう！ 色選びを感覚でやると怒られる･･･！という現実を知ってからというもの、こういうツールを自然とブックマークし、集めるようになりました。説得力ある色選びをするには欠かせないツールのご紹介。 「kuler」 これはもう定番中の定番ですね！Photoshopにも
【CSS】画像を上下中央に表示する（IE7以下にも対応させる） | バシャログ。
娘が小学二年生になり、みまもりケータイ2を買い与えました ishida です。 娘がケータイのボタンを押すたびに、位置情報が送られてきて便利なのですが、 電話をかけたときにも、位置情報がメールで送られてきてちょっと通知頻度高すぎなんじゃね？ さてさて、今回はとある案件で画像を上下中央に表示する機会がありまして、 忘れないように自分的メモです。 CSS3が使えるようになってからは、display: table-cell; で簡単に対応できるようになりましたよね。 例としては、こんな感じ。 HTML/CSSコードサンプル <div class="box"> <p class="image"><img src="image.png" alt="" width="200" heigh="200"><p> </div> .box { display: table; } .box .image { d
cssで縦方向中央に配置する方法（5つのケース＋1） | バシャログ。
iPhone 4Sが発売間近。 買おうか迷って一旦諦めたはずがまた迷い始めました、hakoishiです。 Siriに甘い言葉をささやきたい。英語できないけど。 さて、コーディングで縦中央にオブジェクトを配置したいことって少なくないですよね。 しかしながら、cssはそういうのちょっと苦手。 「ほら、あの時使ったアレだよアレ！」と過去のソースを掘り起こしてみても、状況が違ってて使えないケースも多かったり。 というわけで今回は、cssで縦中央配置するためのtipsを5つのパターンに分けてまとめました。 case1：画像の場合 上下方向中央を始点として画像を配置し、画像の縦サイズの1/2だけネガティブマージンで上に移動。 サンプル html <p class="case01"> <img src="http://dummyimage.com/100x100/000/fff.gif&text=img
つまづきがちなiPhoneコーディングのTips（JS多め） | バシャログ。
来月はキャプテン・アメリカ見るし、気が付いたら年中アメコミ映画を見ているminamiです。 来月にはまた大きな発表がいろいろありそうなiPhone界隈ですが、iPhoneサイトのコーディングをする際につまづいてきたポイントを挙げてみました。 [HTML] input type="file"は使えない 画像をアップするコンテンツだからフォームに input type="file" を・・・と考えがちですが、iPhone版のSafariでは使用不可です。 [HTML] <meta name="viewport" content="user-scalable=no">が効かない 最近ハマったポイントです。ユーザーに画面の拡大をさせなくすることができるviewportのuser-scalableプロパティですが、本体のアクセシビリティ設定で「ズーム機能」をオンにしているとバッチリ拡大できてしまいま
黄金比をさっと算出！Metallic Ratio | バシャログ。
高木豊の次男がオランダ1部リーグ・ユトレヒト移籍！？いやあ、日本人の欧州リーグ移籍が活発ですね。kimoto です。 Web サイトに限らず、デザインをする時に黄金比を意識する事ってあると思います。 そこで、よく使われる比率をさっと算出してくれるサイトを紹介。 Metallic Ratio この Metallic Ratio というサイトでは、黄金比はもちろん白銀比や青銅比、単純な 4:3 など、よくある比率を一発で算出してくれるサイトです。 画面はこんな感じ。 上部の比率を現すエリアをクリックして算出したい比率を選択し… 下の数値入力フォームに数字を入れると、もう片方の辺の数値を出してくれます。 また、プルダウンで、入力フォームを横の辺にするか縦の辺にするかを選択でき、さらに、小数点をどこまで求めるかも選べます。 ちょっとした計算が億劫な時にいかがでしょうか。
jQuery Mobile が必須スキルになる！と思うのでこれから勉強する際に参考になる記事まとめ | バシャログ。
Adobe の Creative Suite 5.5 が発表になりましたね。 Dreamweaver の進化っぷりが凄まじいです。マジで。 HTML5+CSS3への対応が目に付きますが、個人的にはjQuery MobileとPhoneGapフレームワークの導入に注目します。 アプリ開発はこれまで、Objective-Cやjavaが主流でしたがDreamweaverでアプリへの書き出しまで出来てしまうなんて…。今後、モバイルアプリケーションの統合開発環境のデファクトスタンダードになる予感が。 ってことで、まずはjQuery Mobileを理解せねば！ jQery Mobile についてはまだ書籍はあまりなく洋書しかありませんでしたので、参考になる記事を取り上げてみます。 http://jquerymobile.com/ 本家サイト jQuery Mobile Gallery http://w
Firefox4と以前のバージョンを共存させる方法 | バシャログ。
こんにちは、minamiです。今いちばん欲しいものはランタンです。 3/22にFirefox4が正式公開となりました。ちょっとさわった感じだとchromeやsafariに負けず劣らず軽快ですね。 しかし、制作環境ではFirefox4と以前のバージョンを両方確認することも必要になるかと思います。 そこでFirefox4と以前のバージョンを共存してインストールする方法をおさらいしてみました。 試した環境はWindows XPです。 プロファイルを複数作る 方法としては、以前tanakaが紹介していたものとほぼ同じになります。Firefoxのプロファイルを複数つくって、各バージョンに対応させていきます。 windows XPの場合、firefoxのプロファイルは、 C:\Documents and Settings\ユーザー名\Application Data\Mozilla\Firefox\P
Apple 関連のフォントを手に入れよう | バシャログ。
シーブレインのマニュアル作成サービスチームから「スマートフォンで読めるマニュアル作成」を PR するページを作ってほしいとのご依頼があり、ページをデザインました。 せっかく iPhone を素材に使うのだから、フォントも Apple 風にしたいわあ、といろいろ探した際に知ったいくつかのフォント情報をメモします。 ひと目でフォント判別できる一流デザイナーにあこがれる！ 1. Apple 日本語サイトのフォントは「AXIS」 Apple 公式サイトの日本語や Apple store で手に入るパンフレットには「AXIS」というフォントが使われていることが多いそうです。 その「AXIS」試用版が、無料でダウンロードできます。登録さえすれば商用も OK という太っ腹ぶりです。 なだらかなラインがスマートな、きれいなフォントです。 Type Project｜試用版ダウンロード http://www.
FuseKit が便利でしょうがない | バシャログ。
MosesSupposes :: Fuse Kit とっても便利なFlashのライブラリです。 複雑なコードなんて必要無し。 かなり自由にフィルタとアニメーションを制御できるみたいです。 とりあえず、いじくってみましたが…あら、便利。 簡単なサンプルをいくつか作ってみました。 ●サンプル1： フィルタもの 実行部分のソースはこんな感じ // G10博士 左 g10_01.Blur_blurX = 100; //横方向のぶれ幅 g10_01.Blur_blurXTo(0, 1.5, Regular.easeOut, 0.5); //(目的値,所要時間,イージングの種類,待機時間) // G10博士 中 g10_02.Blur_blur = 100; //横・たて方向のぶれ幅 g10_02.Blur_blurTo(0, 1.5, Bounce.easeOut, 2); //(目的値,所要時間,
世界中の動物園で生まれた動物の赤ちゃん写真を集めたサイト「ZooBorns」 | バシャログ。
お花見に行きましたか？ toyama です。横浜では雨のおかげで、せっかくの満開の桜が散り始めています。この時期くらいは雨も遠慮してくれたらいいのに。 Yahoo news などで「動物園で○○の赤ちゃん誕生！」なんて記事を見ると迷わずクリックして、かわいい写真にでれっとした後、もっと別アングルからの写真はないのか！？もっと見せろ！と物足りない思いをしている方に紹介したいサイトです。 仕事の気分転換にぴったり。 ZooBorns は世界各地の動物園で生まれた動物の赤ちゃんの写真を収集しているサイトです。 動物の種類ごとに分類されていて見ごたえ十分。ゾウやキリンなどメジャーな動物から鳥類のヒナ、爬虫類までカバーしています。動物園でもソートできます。 最近のヒットを挙げてみますと… ラッコの赤ちゃん 手乗りサイズ！ http://www.zooborns.com/zooborns/2010/0
【CSS】ページ送りナビゲーションには display:inline-block が超便利 | バシャログ。
こんばんは、ishidaです。 CSS2.1 で定義されている displayプロパティの値、inline-blockの使いどころを探してみたところ、ページ送りにかなり使えそうです。 まずは以下のサンプルをご覧下さい。Yahoo 検索結果のページ送りデザインをまねています。 ページ送りのサンプル 1 2 3 4 5 6 7 8 9 10 次へ> XHTML のサンプルは以下です。とてもシンプルです。 <ul class="pager"> <li><strong>1</strong></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">
重いFirefoxをなんとかして速くしたい | バシャログ。
その強力なアドオンで、とっても便利なFirefoxですが、毎日使っているとドンドン動きが重くなっていってしまいます。 うーん、どうにか軽くならないものかと色々やってみました。 起動を速くしたい まずはとにかく時間のかかる起動をなんとかしたいと思います。 Firefoxはブックマークやら履歴やらクッキーやらをSQLite DBで管理しています。 毎日使っていくうちにDBは大きくなり、起動や動作が重くなっていくとのこと。 そこでSQLite Optimizerというアドオンを使って、DBの最適化をしてしまいます。 手順は以下の通り。 1. SQLite Optimizerをインストール。 2. アドオンの管理画面でSQLite Optimizerの環境設定画面を開きます。 3. 『Firefox終了時にsqliteデータベースのREINDEXを実行する』にチェックを入れます。 以後、Firef
【CSS】覚えておいて損はない CSS の定番テクニック BEST 5 | バシャログ。
ネットで検索をすると CSS のテクニックが山ほど公開されていますが、実際に商用サイトの制作をしていて個人的に利用する頻度が高いテクニックの BEST 5 をご紹介します。 ちょっと凝ったデザインのサイトをコーディングする時に、これらのテクニックに助けられることが多いです。どれも覚えておいて損はないものばかりです！ IE6 でも min-height を使う 例えば、異なる高さのブロックを float しつつ底辺のラインを揃えたい時などに、「IE6 が min-height に対応していたら楽なのに！」と思うことがありますが、以下のテクニックを使えば IE6 でも min-height（相当）の適用が可能になります。 [CREAMU]CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 IE6 に mi
デザイナー・コーダー必見！使えるform関連jQueryプラグインの数々 | バシャログ。
こんばんは、最近ホルモン焼きにハマっているishidaです。 WEBサイト制作時、formは必ずといってもいいぐらい存在します。 お問い合わせフォームや会員登録フォームなどがすぐに思いつきますよね。 デザインをがっつりフォーム部分で作り込んでも、CSSのみでは、 実現できなかったりすることもよくあります。 そんなクセのあるformを、よりリッチに！かつ操作性を向上！できるjQueryプラグインの数々をご紹介します。 デザイナーの方は、フォームのデザインの参考に。 コーダーの方は、ページ作成時間の短縮に手助けになればと思います。 jQuery plugin: Validation フォームの入力チェック（バリデーション）が簡単にできるプラグイン。 エラーメッセージはlocalizationディレクトリ内に18言語用意されています。 日本語用は別途作成し、使用することが可能です。 jQuery
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
