「HTML5,CSS3」カテゴリーアーカイブ

立体感のある文字の表現

CSS3のtext-shadowを利用して立体感のある文字を表現することができる。ベベル（立体的に角を切り取る）表現を実現するには、上左方向に1pxの明るい色を指定、そして右下方向に影をつける。エンボス（浮き彫り）表 …続きを読む→

CSS3のtext-shadowを使って袋文字を作ることができ、文字を立体的に表現することができる。 CSSは次のとおり h1.shadow03-1 { font-size:4.0em; color:#DDD; text …続きを読む→

CSSで何も指定しない場合、画像にリンクを張ると画像の周りに枠線が表示される。これを表示しないようにするにはCSSで次のようにする。 a img { border-style:none; }

HTMLで扱っている文字を表示するためのフォントは、HTMLを表示するクライアント上のフォントを使って行われている。CSS3からは、より美しい文字や特徴のある文字を表示させるためにサーバ側で用意したフォントを使うことがで …続きを読む→

File　APIとはクライアント（ローカル）上にあるファイルをスクリプトを使って読み書きすることができるようにするものです。ただし、スクリプトで任意のファイルを選択することはできず、ユーザーが選択したファイルが対象となり …続きを読む→

HTML5からドラッグ＆ドロップAPIが登場した。これまでjQueryを使わないとできなかったが、HTML5でもできるようになったのでさっそく使ってみた。操作は次のHTMLで画像一覧の画像をカートに移すことを試してみ …続きを読む→

複数カラムのレイアウトを実装するには、これまでdiv要素を入れ子にし、floatとマージンを組み合わせて実装する必要があった。しかし、CSS3ではflexboxを使うことで、floatよりも柔軟に対応できるようになる。 …続きを読む→

Web Storageとは、ブラウザ上に文字列データを保存することのできるクライアントストレージの1つである。これまでブラウザ上にデータを保存するためには、Cookieを利用していたが、Web Storageを利用すれば …続きを読む→

line-heightは行間のスペースを制御するプロパティです。2行以上の文などには利用できません。これを使って1行だけのテキストを簡単に縦方向中央にする有用な方法です。その方法は、テキストが収まっているボックスのh …続きを読む→

cssで全ての要素を指定する場合は*を用いる。最近気づいたので記録しておく。 p * { color:red; } 上の例ではp要素の中にある要素すべてに適用される。