CSS上級編

マイサイトをより本格的に仕上げるためのCSS上級編になります。

 

このマイサイトでは、主にフッターのプロフィールの形を整えるのに使っています。

結構複雑なので、初めてですと苦戦するかもしれませんが、

挑戦してみたい人はぜひどうぞ!

 

01.まずは素材をダウンロード

 

こちらをダウンロードしましょう。

http://hoxai.com/others/CSS/otehon.zip

 

02.何も考えずにお手本に沿って、HTMLを書きます。

HTMLの

</div><!–footer widget end–>

<div class=”clear”></div>

という記述の下に、

<div class=”profile”>からはじまる記述があります。こちらを書き込んでいきます。

これが、CSSのclass/IDと呼ばれるものです。

 
※Class/IDがどういうものかについては、PDFにまとめました。

http://hoxai.com/others/CSS/CSSjoukyu.pdf

で説明しています。参考にしてください。

 

 

02.何も考えずにお手本に沿って、CSSを書きます。

footer部分に profile / oshashin / onamae という3つの要素が追加されています。

これをお手本通りに書き込んで行きましょう。これらが

ClassとIDについてのCSSです。

 

※Class/IDがどういうものかについては、PDFにまとめました。

http://hoxai.com/others/CSS/CSSjoukyu.pdf

で説明しています。参考にしてください。

 

これらを使って、要素を細かく分けることで、特定のものだけにCSSを指定する事ができるようになります。

特に、補足で説明している、h2要素が回りこまない部分についてはよく読んでみてください。

 

03.overflow : hidden ; とは何か

CSSのprofileの部分にあるoverflow : hidden ;という記述。

何に使うものなのか、試しに外してみましょう。

 

スクリーンショット 2014-06-05 16.55.02

 

こうなるはずです。厄介ですが、

この部分を深く理解しようとするとかなり大変です。

ここはおまじないとして追加して置いてください。

 

 

 

 

便利なフリーフォントの世界

フリーフォントを使えば、デザインの経験がなくてもガラリと

Webの雰囲気を変えることができます。ただし、アクが強すぎるフォントは

サイトの格を下げてしまうこともあるので注意が必要。

そして、かならず商用利用が可能なフォントを使うようにしましょう。

 

フリーフォントの中で、優良で使い勝手のいい物を集めてみました。

 

基本のフォント、AXIS

とりあえずこれは基本です。

これだけでも最低限インストールすることをおすすめします。

http://webgaku.hateblo.jp/entry/20120630/1340987012

appleのサイトで使われていることでも有名な美しい日本語のフォント。

さらに日本語フォントであるのに、英文の美しさも定評があります。

 

 

フリーフォントダウンロードサイト

おすすめのフリーフォント配布サイトを絞って紹介します。

たくさんこの手のサイトはありますがまずはこれを使ってみてください。

 

英文フォント

FontSquirrel

http://www.fontsquirrel.com/

ビジネスで使いたい人にとっては必須なフォントの権利関係。

商用利用可能なフォントだけを集めているので安心して使うことができます。

 

 

日本語フォント

【商用利用可】漢字対応日本語フリーフォントまとめ

http://matome.naver.jp/odai/2133156027737352701

 

日本語のフリーフォントの中でもスタンダードで使いやすい物がまとまっています。

アンチックや、美し明朝などは非常に使いやすいと思います。

 

 

おすすめの定番書体たち

いざPCやMacを使ってデザインをしようと思っても、

書体で何を選んだらいいかわからない!という声をよく聞きます。

書体は適材適所が基本ですが、どういうシチュエーションでどんな書体を選べばいいのかというのは

結構経験と知識が必要だったりします。

 

そこで、最初から購入せずともPCやMacにインストールされているものの中で

使いやすく、由緒も正しい、おすすめの定番書体を紹介します。

 

 

Windowsでデザインする場合

windowsでは最初からインストールされているフォントでデザインの現場で通用するものは

Macと比べるとどうしても少なくなります。ですが、以下の3つは自信を持っておすすめできます。

 

Palatino

 

有名書体デザイナーヘルマン・ツァップの作品です。

16世紀イタリアの書家ジャンバッティスタ・パラティーノの名前にちなんでパラティーノと名付けられました。

この書体の特徴は、古風で優雅な雰囲気ですが、どことなくモダン。

50年近くたったいまでも定番書体として愛され、高級ブランドや化粧品の広告によく使われています。

 

 

Georgia

これも迷ったら是非使いたいフォント。視認性が高く、PCやスマホの画面でみても見えにくくなることがありません。

また、この書体で美しいのは数字。オールドスタイルといわれる独特の形状をしているので、本文と数字が混じった時に独特の美しさを発揮します。アトランタオリンピックのポスターなどで使用されました。

 

Times

1932年にイギリスのタイムズ紙が新聞用書体として開発した書体です。

新聞に使われるということは汎用性があるということ。

本文に、しかも長文を作るときにぜひ使いたい視認性の高いフォント。

 

Macでデザインする場合

故・スティーブ・ジョブズ氏が大学時代はカリグラフィー(西洋書道)を勉強していたのは有名な話ですね。

その時の書体に対するこだわりや美意識が、iPodやiPhoneを始めとするアップル製品のOSの美しさの原点になっています。

自然とappleのコンピュータであるMacにインストールされている書体は素晴らしいものばかりになっています。

デザイナーなら、なんて太っ腹なんだろうとため息を漏らすほど効果な書体が盛りだくさん。

 

これは、お金をかけて良い書体を最初からOSにバンドル(同封)させているからですね。

デザインをするならMacがよい、というのはこの書体の優劣によるところもあります。

※ちなみに先ほど紹介したwindowsバンドルの3つの書体はすべてMacに入っています。

 

Gill sans

BBCのタイトル、PEUGEOTのロゴ などで使われている書体。有名な彫刻家、ギル・サンズの作品です。

格調高く、そしてどことなく可愛らしい。

 

Copper plate

世界的な企業であるディーンアンドデルーカのロゴとしてあまりにも有名な書体。カッパープレートとは、銅板という意味です。昔、銅板に彫っていた書体の雰囲気を活字で再現したわけですね。手帳にこだわる人には、モレスキンのロゴで使われている書体、と言えばわかりやすいでしょうか。

 

Futura

フォルクスワーゲンやルイヴィトンのロゴで使われているドイツ生まれの書体です。分類としては非常にモダンなサンセリフ体で、幾何学的なフォルムが特徴。以前、Futuraはナチスで使われていたから使うときには配慮が必要という謎の都市伝説がありました。実際はそんなことありません。皆普通に使います。

 

Optima

GUCCIのロゴやゴディバのロゴでお馴染みの書体。どちらも高級感と大人の色気を感じさせますよね。

講師も大好きなフォントです。

 

Avenir

スターバックス・コーヒーや、JALのロゴで使われています。伝説の書体作家Adrian Frutiger氏の作品。

Futuraと同じく洗練されたモダンな印象。

 

Didot

これも美しい。線が細く、メリハリがありインパクトは弱いですが女性的な優しさを持っています。

ジョルジオ・アルマーニなどのブランドで使われています。

 

Myriad

いまや世界で一番使われているメールサービスのGmailやロールスロイス社のロゴに採用されている定番書体。

良くも悪くも癖がありません。

 

Helvetica

世に書体ブームを巻き起こした定番中の定番。ヘルベチカとは、”スイス”を表す言葉。Panasonicやエビアン、FENDIのロゴと言えばわかるでしょうか。一時期は迷ったらこの書体を使えばイイという風潮がありました。今は逆に定番過ぎて使わない人が増えてますね。

 

 

BBT学生さん向けコンテンツまとめ

url

 

BBT学生さん向け、

マイサイトを更にグレードアップしたい人のためにコンテンツをまとめていきます。

※現在コンテンツ準備中です。随時更新していきます。

 

00CSS上級編

本編で紹介しているCSS講座の上級編。おもにフッターをより本格的なデザインにすることが出来るようになります。

このフッターを作るだけで、新しい要素をかなり覚えることができます。

 

 

01 おすすめの定番書体たち

最初からWindowsやMacに入っている書体の中には

有名デザイナーが手がけた素晴らしい作品が混ざっています。

それらを上手に使うだけでマイサイトはぐっとグレードアップします。

 

02 便利なフリーフォントの世界

デザインの専門家なら有料のフォントを購入しなければ仕事になりません。

人によってはそれこそ数十万も書体にお金をかけたりします。ですが、経営者がマイサイトを作るなら

便利なフリーフォントを上手に使うだけで十分。ここでは便利な無料の書体を

どうやったらプロっぽく使うことができるかを記していきます。

 

03  一歩進んだロゴデザインの作り方まとめ。

丸や三角、四角などの図形やアイコンなど簡単なアイテムを組み合わせて

難しい専門スキルがなくてもロゴデザインをそれなりのレベルで作れるようにする方法です。

 

04 写真加工に便利なPhotoshopアクション集。

Photoshopには、一連の写真加工の手順をひとまとめにして

同じ作業をワンタッチで再現できるようにする機能があります。

それらのPhotoshopアクションの中から定番をご紹介。

 

05  web制作に使える便利なツール達

HTMLを自動生成するツールや、CSSを編集するときに便利なソフトなど

様々なツールやサービスを紹介していきます。