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

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

「wordmark.it」というサイトは、自分のPCにインストールされているフォントを一覧でプレビュー表示してくれるので、その場でフォントの比較をすることができます。
続きを読む ＞

iPhoneでinputにwidthにパーセント指定とplaceholderを同時に使用すると横幅が画面サイズに調整されずにハミでてしまうバグのお話。調べてみると、どうやらiOS6特有で特定条件下におけるバグのようで…まぁやっかい。
続きを読む ＞

html5からinput要素に追加されているrequired属性。inputの属性にrequiredを追加すると、その項目は入力必須となり、入力をしないと送信不可になります。
今回は各ブラウザにおけるrequiredの表示の違いを並べてみました。
続きを読む ＞

PNGファイルは透過処理が入れられ、かつ画像劣化が無いので綺麗に扱うことができます。しかしながらきれいに書き出せる分、画像容量が大きくなるのは否めません。このPNGファイルの画像容量を削ってくれるWEBツールが「TinyPNG」です。
続きを読む ＞

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

デザインラフを作成するとき、点線や破線をケースがあります。Fireworksユーザーの人は、この時に矩形ツールが活躍してくれます。矩形ツールのテクスチャを用いると、点線や破線を簡単に作成することができます。
続きを読む ＞

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

サイズが可変するtdを、セルごとリンク要素にするお話。セル内にaタグを使ってリンクを作るとセルの高さが変わったときに、セルに吸着してくれない。
それならいっそのこと、aタグは使用しないでtdのセルごとリンクにさせてしまおうといったおかしな発想から。
続きを読む ＞

既知ですが、スマートフォンはブラウザのブックマークだけでなく、ホーム画面にサイトへのショートカットアイコンを設定できます。
このショートカットアイコンは、PCのファビコンと一緒に作ってしまうのが流れ的にも忘れることが少なくなるので、よいのかなと思います。
続きを読む ＞