HTML・CSS
今までPCサイトに画像ギャラリー系(Lightbox系)のjQueryにcolorboxをよく使ってたのですが、スマートフォンでの表示に動作があんまりな感じだったのでスマートフォンサイト向けのjQueryのプラグインを探してみました。
見出しのアクセントとしてよく使われるアイコン画像。 imgタグで表示させるよりもcssで書いたほうがメンテナンス性にも優れます。 センター寄せをする方法も含め、まとめておきます。
サイトをコーディングしていると、たまにFirefoxだけ意図しない隙間が上下にできる事があります。(主に上に隙間ができます) Firebugで見てみると、marginでもpaddingでもなくcssでは確認できない空白があります。
最近はよくcss spriteで画像を表示することが多くなってきました。 アイコンやボタン画像などをまとめておくと画像リクエスト数が減ってサイトの高速化につながります。ですが私自身、どのタイミングで、どこからどこまで使えばいいかは試行錯誤中です。 css…
スマートフォンサイトの制作案件が年々増えてきました。 自分自身もスマートフォンサイトを見るのに慣れてきたので、ネットサーフィンしてる時にスマートフォンサイトがないと「なんだよーPCサイトだけかよー」と思ったりします。 スマートフォンサイト制作…
なにか良いWEB系の本ないかなーと本屋で立ち読みではありますが紹介しておきます。 せっかくWEBの業種で働いてるのでこういう記事もたまには書いておきます。 今回紹介する本はどちらかというとコーディングする人向けって感じです。
ツイートボタンやいいねボタンなどのsnsボタンを並べたとき、たまにこういうふうに頭がそろわない事がないでしょうか。 並びがガタガタであまり印象がよくないです。 というかFacebookボタンだけおかしい? HTMLのソースはこんな感じです。 <aside class="sns_btn"> <ul> <li>snsボタン</li> <li>sns</li></ul></aside>…
sublime textを使い続けて約1ヶ月ほどになります。 どんな設定よりもカラースキームやらテーマを決めるのに一番悩みました。 そこで見つけたのが「Flatland」というテーマ。色だけではなく、デザインも変わります。 こちらのブログで紹介されてました。設定…
デザインがあがってきたけどフロートコンテンツがコンテンツ幅ぴったりになってるけどどうするの?って経験、あると思います。 こんな感じ。コンテンツ幅がかつかつだとmargin入らないんですけど…って状態です。こんなときはネガティブマージンを使って回避…
IEといえば問題児ブラウザで有名ですが、各バージョンの確認が多少面倒なものです。 chromeみたくバージョン制度廃止してほしいです。自動更新してほしい! いままではIE TesterなるソフトをインストールしてIEの各バージョンを確認していたのですが、すぐク…
フォームのボタンを画像で表示したいときに <input type="image" src="画像パス" alt="代替テキスト" /> で画像を表示させる方法があります。 が、IE9だけ表示されません。。。 ボタンをcssのbackground表示で解決できるかもしれませんが、大量にボタンがある場合はひとつずつcss書いていくのがさすがに面倒。 htmlの…
ページャーなどでよく使うCSSテクニックです。 横並びしつつ、そのブロック全体は左右中央にセンター揃え。 inline要素なら簡単に中央揃えできますが、block要素の横並び中央揃えは若干面倒でして、text-align:center;は使えないし、幅が決まっていなければm…
CSSでbefore,after要素が表示されなくて困ったときに確認したいポイントをまとめています。疑似要素の簡単な説明と実際に確認するためのCSSの記述方法を紹介しています。
スマートフォンサイトの制作をするために参考サイトをよく見るのですが、 (こことか→iPhoneデザインボックス http://design.web-hon.com) PCでスマートフォンサイトのリンクをクリックするとほとんどの場合、 PCサイトに飛ばされます(泣) スマートフォン…
以前何度かいろんなブログでお見かけしたPNG画像軽量化サイト「TinyPNG」 これが想像以上に軽量化してくれます。 そして見た感じもほとんど劣化がわかりません。(私自身、見分けはつきませんでした…) 実際に試してみると合計700KBが300KBまで軽量されまし…
↑このような横並びボックスに縦横比の異なる画像を並べたいとき 普通に画像を配置すると、それぞれ高さが異なるのでこうなってしまいます↓ これじゃあかっこ悪いですよね。左右の中央に配置するのはmarginのautoだったり、text-align:center;だったりで結構…
twitterのウィジェットが新しくなりましたね。 今までのやつはデザインもそのままで問題なく使えているようです。 (もう古いウィジェット使えなくなりましたね、早めにお取替えを!) 新しいウィジェット作成画面↓ https://twitter.com/settings/widgets (こ…
スマートフォン用にコーディングするの楽しいですよね。 CSS3がキモです。 iPhoneのSafariでちまちま見ながらコーディングしてるとあることに気が付きました。 backgroundで指定した色がなんか薄い? 原因はあらかた想像はつきますが、ボタンにうっすらグラ…