HTML5からの追加要素placeholderを利用して入力フォームに入力補助を設定しよう
HTML5から新しく追加された属性のひとつであるplaceholder。
placeholderはinputやtextareaで表示される入力フォームの空白部分に、あらかじめ文字を入力しておくことで、ユーザの入力補助として使用されます。
> 詳しく見る- category:codingtag:html5
box-shadowで汎用的に使えるプロパティについてまとめてみた
box-shadowはCSS3で登場したプロパティで、文字とおりボックスの周りにシャドウを落とすことができます。FireworksやPhotoshop風に伝えるならばドロップシャドウですね。
box-shadowについてまとめられてるサイトはとても多いので、自分的に使っていたものや、今後取り入れておきたいシャドウエフェクトについてまとめてみました。
> 詳しく見る- category:codingtag:css3, html
input:focusを使って入力フォームにフォーカスをあてよう
フォームの入力エリアをクリックすると、入力エリアの背景色が変更されたり、枠線の色が変更されたりと、フォームにひと工夫付け加えているサイトを目にする事があるかと思います。
これは:focusという擬似クラスをつけることにより、入力エリアにフォーカスが当たる際の背景色とボーダーの変更を可能にしています。
> 詳しく見る- category:codingtag:css, html
透過させるためのプロパティopacityとbackground:rgba()
cssのopacityとbackground:rgba()は、ともに透過させるためのプロパティ。透過させるという用途は共通でも、使い方は異なっていると思います。
透過には常にopacityを使っていたとき、囲っていた範囲全体に透過及んでしまい、どのように対処しようかと悩んだことがあったので、そのときのメモです。
> 詳しく見る- category:codingtag:css, html