emuramemo

製品レビュー、HTML/CSS、webデザイン、音楽、その他いろいろ

HTML・CSS

スマホサイトに簡単に実装できる画像ギャラリー系jQueryプラグイン IMAGE LIGHTBOX

今までPCサイトに画像ギャラリー系(Lightbox系)のjQueryにcolorboxをよく使ってたのですが、スマートフォンでの表示に動作があんまりな感じだったのでスマートフォンサイト向けのjQueryのプラグインを探してみました。

cssで見出しにアイコン画像を表示させる方法いろいろ

見出しのアクセントとしてよく使われるアイコン画像。 imgタグで表示させるよりもcssで書いたほうがメンテナンス性にも優れます。 センター寄せをする方法も含め、まとめておきます。

firefoxで上下に意図しない隙間ができるclearfix問題

サイトをコーディングしていると、たまにFirefoxだけ意図しない隙間が上下にできる事があります。(主に上に隙間ができます) Firebugで見てみると、marginでもpaddingでもなくcssでは確認できない空白があります。

css spriteで使うcssプロパティを理解する

最近はよくcss spriteで画像を表示することが多くなってきました。 アイコンやボタン画像などをまとめておくと画像リクエスト数が減ってサイトの高速化につながります。ですが私自身、どのタイミングで、どこからどこまで使えばいいかは試行錯誤中です。 css…

chrome スマートフォンサイト制作で快適にコーディングするために使っているツール

スマートフォンサイトの制作案件が年々増えてきました。 自分自身もスマートフォンサイトを見るのに慣れてきたので、ネットサーフィンしてる時にスマートフォンサイトがないと「なんだよーPCサイトだけかよー」と思ったりします。 スマートフォンサイト制作…

2014年春 気になったWEBデザイン書籍

なにか良いWEB系の本ないかなーと本屋で立ち読みではありますが紹介しておきます。 せっかくWEBの業種で働いてるのでこういう記事もたまには書いておきます。 今回紹介する本はどちらかというとコーディングする人向けって感じです。

【css】snsボタンを横並びで頭をきれいにそろえる方法

ツイートボタンやいいねボタンなどのsnsボタンを並べたとき、たまにこういうふうに頭がそろわない事がないでしょうか。 並びがガタガタであまり印象がよくないです。 というかFacebookボタンだけおかしい? HTMLのソースはこんな感じです。 <aside class="sns_btn"> <ul> <li>snsボタン</li> <li>sns</li></ul></aside>…

sublime textのテーマ「Flatland」がフラットデザインでかっこよくて使いやすい

sublime textを使い続けて約1ヶ月ほどになります。 どんな設定よりもカラースキームやらテーマを決めるのに一番悩みました。 そこで見つけたのが「Flatland」というテーマ。色だけではなく、デザインも変わります。 こちらのブログで紹介されてました。設定…

【css】フロートする時にコンテンツ幅を左右ぴったり横並びにする方法

デザインがあがってきたけどフロートコンテンツがコンテンツ幅ぴったりになってるけどどうするの?って経験、あると思います。 こんな感じ。コンテンツ幅がかつかつだとmargin入らないんですけど…って状態です。こんなときはネガティブマージンを使って回避…

IEでFire bug風の開発者ツールをつかったりIE7~10の表示を簡単に確認する方法

IEといえば問題児ブラウザで有名ですが、各バージョンの確認が多少面倒なものです。 chromeみたくバージョン制度廃止してほしいです。自動更新してほしい! いままではIE TesterなるソフトをインストールしてIEの各バージョンを確認していたのですが、すぐク…

IE9でinput type="image"のフォームボタン画像が表示されない時の対処法

フォームのボタンを画像で表示したいときに <input type="image" src="画像パス" alt="代替テキスト" /> で画像を表示させる方法があります。 が、IE9だけ表示されません。。。 ボタンをcssのbackground表示で解決できるかもしれませんが、大量にボタンがある場合はひとつずつcss書いていくのがさすがに面倒。 htmlの…

cssのfloat横並びリストの左右中央揃えいろいろ

ページャーなどでよく使うCSSテクニックです。 横並びしつつ、そのブロック全体は左右中央にセンター揃え。 inline要素なら簡単に中央揃えできますが、block要素の横並び中央揃えは若干面倒でして、text-align:center;は使えないし、幅が決まっていなければm…

CSSでbefore,after要素が表示されなくて困ったとき

CSSでbefore,after要素が表示されなくて困ったときに確認したいポイントをまとめています。疑似要素の簡単な説明と実際に確認するためのCSSの記述方法を紹介しています。

windowsでもスマートフォンの表示を確認したい!chromeのアドオン「User-Agent Switcher」が便利

スマートフォンサイトの制作をするために参考サイトをよく見るのですが、 (こことか→iPhoneデザインボックス http://design.web-hon.com) PCでスマートフォンサイトのリンクをクリックするとほとんどの場合、 PCサイトに飛ばされます(泣) スマートフォン…

PNG画像を軽量化できるサイト「TinyPNG」とCSSスプライトで高速化

以前何度かいろんなブログでお見かけしたPNG画像軽量化サイト「TinyPNG」 これが想像以上に軽量化してくれます。 そして見た感じもほとんど劣化がわかりません。(私自身、見分けはつきませんでした…) 実際に試してみると合計700KBが300KBまで軽量されまし…

高さの異なる画像リストを上下中央に配置する

↑このような横並びボックスに縦横比の異なる画像を並べたいとき 普通に画像を配置すると、それぞれ高さが異なるのでこうなってしまいます↓ これじゃあかっこ悪いですよね。左右の中央に配置するのはmarginのautoだったり、text-align:center;だったりで結構…

twitterの新ウィジェットの幅を指定したい(2012年11月現在)

twitterのウィジェットが新しくなりましたね。 今までのやつはデザインもそのままで問題なく使えているようです。 (もう古いウィジェット使えなくなりましたね、早めにお取替えを!) 新しいウィジェット作成画面↓ https://twitter.com/settings/widgets (こ…

iOS Safariでinput要素にbackgroundがうまく反映されない (2013.03.23追記)

スマートフォン用にコーディングするの楽しいですよね。 CSS3がキモです。 iPhoneのSafariでちまちま見ながらコーディングしてるとあることに気が付きました。 backgroundで指定した色がなんか薄い? 原因はあらかた想像はつきますが、ボタンにうっすらグラ…

emuramemo(c) All Rights Reserved.