Image may be NSFW.
Clik here to view.
Clik here to view.
レスポンシブ Web デザインのサイトを作成する時に、知っておきたいコト
最近、レスポンシブ Web デザインのサイトを仕事で作成しています。レスポンシブは、PC・タブレット・スマートフォンなどのあらゆるデバイスに適したサイトを単一 HTML で表現する手法です。このブログもレスポンシブを採用していて、左右の横幅を狭めていくとページのレイアウトが変わります。...
View Article
Image may be NSFW.
Clik here to view.
Clik here to view.
「次に進む/前に戻る」で CSS の記述量が減るテクニック
ページネーションでよく使用される下図のような「次に進む/前に戻る」を実装する時に、少し考えこんで手が止まることが多かった。 左右に均等に配置するから float を使用する。width: 50% で指定するか。float を使うからその親要素に clearfix しなきゃいけないし、左右に配置された要素の中身をさらに text-align...
View Article
Image may be NSFW.
Clik here to view.
Clik here to view.
最小限の記述でソーシャルボタンを綺麗に並べる
Twitter, Facebook, Pocket, hatena 等のソーシャルボタンを綺麗に並べる方法を紹介します。 各ソーシャルボタンのコードを取得してきたまま貼り付けると上下がガタガタになります。これまではボタンの横幅を決め打ちし、float: left で横並びにして余白を調整していたのですが、良い方法とは思えませんでした。 最近、仕事で使っているのは、各ボタンを div...
View Article
More Pages to Explore .....
