2013-08-01から1ヶ月間の記事一覧

画像上の文字をキレイに見せる

文字の間隔を調整することをカーニングといいます。Photoshop上でテキストをカーニングするときは、カーソルを文字間において、【 Alt + 矢印 】 で調整します。

CSS SPRITEでの li 文字の隠し方実践

spanタグやemタグを使わずに文字を隠す方法です。 white-space: nowrap; text-indent: 100%; overflow: hidden; を使うことで、常に画像の外側に文字があるように設定することができます。 <html> <head> <meta charset="UTF-8"> <title>sprite button</title> <link href="css/style.css" rel="stylesheet" media="all"> </head> <body> <div id="nav"> <ul> </ul></div></body></html>

CSS SPRITE 隠し文字について

最近は、 visibility: hidden; を使わずにこのように設定する傾向があります。 #nav li a { width: ボタン幅; height: ボタン高さ; display: block; white-space: nowrap; background: url(背景画像のパス) no-repeat; text-indent: 100%; overflow: hidden;…

H13 C13

見本 作ったもの <html> <head> <meta charset="UTF-8"> <title>H13C13</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="container"> <div id="wrapper"> <div id="left"> <div id="nav"> <ul> <li id="info"><a href="#">Information</a></li> <li id="menu"><a href="#">Menu</a></li></ul></div></div></div></div></body></html>

H11 C11

<html lang="ja"> <head> <meta charset="utf-8"> <title>H11 C11</title> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/style_c11.css"> </head> <body> <div id="container"> <header> <h1>Caf&#233; de la plante</h1> <p>サブタイトルサブタイトルサブタイトル</p> </header> </div></body></html>