PLUSTRiCK | ひとつでも多くサイト制作でラクをするためのメモ

制作会社に作ってもらったサイトをIEで見ると大きく崩れていたことがあり、どうやら勝手に互換表示がされ、IE7の表示になっていたことで思わぬ崩れが発生していた。ソースを見るとmetaタグのX-UA-Compatibleが設定されていなかったの原因でした。
続きを読む ＞

グローバルナビにカーソルを合わせたときに、左から右にぬるっと下線が出てくるUIを最近見かけることが多かったので、自分でも作ってみました。作ってみたら意外と簡単にできたので忘れないようにメモ書きです。
続きを読む ＞

フォームの送信ボタンは、valueにテキストを入力して使用するのが一般的です。typeをimageにして、送信ボタンを画像にすることもあります。この部分をFontAwesomeを用いてアイコンフォントを設置することも可能です。
続きを読む ＞

垂直方向中央に文字を整える場合、heightとline-heightを同時に使用するケースがよくあるかと思います。heightとline-heightの値を同じに指定すると、指定したサイズの垂直方向中央に要素が整います。
ただし、buttonタグのheightとline-heightの値を同じに指定すると、ベースラインが若干下にずれてしまいます。
続きを読む ＞

Font Awesomeはサイトで汎用的に使用されるようなアイコンをWebフォントとして表示することができます。表示されたアイコンはWebフォントとして扱うので、差し替えはもちろん、色の変更や大きさの拡大・縮小もソース上で行えます。
続きを読む ＞

今や特に珍しくも無いレスポンシブデザイン。PC・タブレット・スマホ、いろいろなデバイスでネットができるので、各デバイスで最適化させたサイトを見せたいというのは当然なところでもありますね。
ちょっと前に1ソースでレスポンシブ対応をする業務があったので、復習をかねてのメモ。
続きを読む ＞

floatを使わずに要素を横に並べる方法として用いられる事の多いinline-block。自分も結構な頻度で使用しています。ですが、普通に使うとなぜか数ピクセルの隙間が発生してしまいます。
この隙間の対処として、htmlのみで対処する方法とcssのみで対処する方法をまとめてみました。
続きを読む ＞

基本的にデフォルトで使用されるチェックボックスの表示。見慣れているせいなのか違和感はないのですが、デフォルト状態では小さいため分かりにくかったり、サイトのデザインによっては、デフォルト状態ではサイトの世界観に合わない表示になることがどうしてもあります。
続きを読む ＞

文字の大きさや色は変えずに強調したい部分を作るときに使う方法の一つとして、蛍光ペンでマーカー線を引いたような効果をつける方法があります。
cssで作る。背景画像を用いる。…など、方法はいくつかありますので、それぞれサンプルを作ってまとめてみました。
続きを読む ＞

ソーシャルゲーム(だけとは限りませんが)で頻繁に使用されるスタミナや行動力、経験値などの数字で表現する場所に一緒に用いられるゲージの部分。
このようなものをしばらく作っていない為、作り方を忘れそうなので作り方を思い出しながら再確認しつつ備忘録としてメモ。
続きを読む ＞