HOME＞フォントをロゴに！
| kon`s produce webdesign lecture! | |
| <<｜フォントをロゴに！｜テーブル使用法｜グラデーション｜>> Lロゴ制作しなくても Lロゴ制作できるんです。 |
| ロゴ制作しなくても。 | |
フォントとは早い話が「字」。 HTMLではフォントとして、ボールド(強調体)やイタリック(斜体)がよく知られています。 他には、字の色を変えたり字を大きくしたり小さくしたりするのもフォントと言えるでしょう。 しかしここで扱うフォントはちょっと違います。 ジツは上のボールドやイタリックといった文字体だけでなく「明朝体」や「ゴシック体」などを表現する方法があるのです。これを使用すればサイトの印象ががらりと変わります。 やり方は簡単。HTMLタグを<FONT face="フォント名">文章</FONT> とするだけです。 一般的によく使われる明朝体やゴシック体の他にも、以下のようなフォントがあり、ウェブデザインに役に立つでしょう。 Arial black-比較的強調しつつもカジュアルな感じに なる。 Impact-強調。パッケージデザインによくでてくる感じの字体になる CenturyGothic-洗練された感じになる。ブランドのロゴ等に使われがちなフォント Brush script-要するに筆記体。個人的にはこれを多用するのはどうかとおもうが印象付けには効果的。 ポップ体ーこれもcoolというよりcuteであるのであまり使わないが特徴的。趣味。 右のようにフォントはHTMLタグで指定できます。 ただしページ内の同じ項目すべてにフォントを反映させたいときはスタイルシートという方法が便利です。 スタイルシートについてはとほほのWWW入門というサイトやその他のHTML入門サイトで解説されています。 実はフォントを使い分けるだけでウェブサイトの印象がグッと変わります。 自分のサイトの雰囲気にあったフォントを選び、できるだけ一貫性を保った使い分けをすれば良いでしょう。 ■一般的なフォント ボールド(強調)：<B>ボールド</B> イタリック(斜体)：<I>イタリック</I> 文字色：<FONT color="blue">文字色</FONT> 文字の大きさ：<FONT size="+1">文字の大きさ</FONT> <FONT face="Arial black">kon`s produce</FONT> kon`s produce <FONT face="Impact">web design</FONT>web design <FONT face="Century Gothic">access up</FONT>access up<FONT face="Brush script">homepage</FONT>homepage <FONT face="@HG創英角ﾎﾟｯﾌﾟ体">easy and cool</FONT>easy and cool※フォントが全て同じ字体に表示される場合上記のフォントがインストールされていない場合、全てがＭＳゴシック表示になるなど、フォントの違いが表れません。上の字体は基本的なものなので、インストールされていることが多いですが、利用者によっては効果が表れないことを念頭において使用して下さい。 フォントを画像で確認 |
|
| →次へ |
| プロの技！ウェブデザインの資料集 | |
会社の意識をイメージした配色。 画面上部にナビ、全体的には左右に分割されている。 清楚な配色とひまわりが夏っぽいイメージを出す。 トップページはキャラクターなどを使い簡単に、他のページは情報量が多い等、証券会社らしい作り。 |
|
| チュートリアルー第13回 | |
フォントを使って印象をつけよう！ 前回は「配色」で印象を変えましたが 今度は「フォント」を使ってみましょう。 ・・・といってもこのフォントは前に一回使った事がありますよね？ そうですこのページの題名のところで「Arial Black」というのが使われています。 これはウェブデザインの基本ー文章のときでした。 今回はもっとフォントを使ってみたいと思います。 ①「メニュー一覧」と「説明」をフォントが変えやすいように半角英数字に。→フォントを変更(Impact) ②フォントを変えたあとに「斜体」にすることもできます。題名をイタリック(斜体)に。  こんな風になりました。 |
|
| topics | |
| nodata... |
HOME＞フォントをロゴに
| kon`s produce All rights reserved |
