Security.GS Magazine » デザイン

Webデザインに使えそうなフォント

fukuchi — Fri, 02 Jul 2010 15:55:56 +0000

Dekar Free Font
Code Free Font
St Marie
LACONIC
CANDELA
おまけ★日本語文字

#4 LACONIC

Download : LACONIC

#5 CANDELAt

Download : CANDELA

#6 おまけ★日本語文字

全文字フリーフォント
 Holiday-MDJP03 / 2byte True Type
ほにゃ。

利用規約等きちんと読んで使ってください。
フォントは見ているだけで楽しいですが、いれすぎるとソフトが重くなったりするので注意しましょう。

リセットCSS(※ただし自分用)

fukuchi — Thu, 17 Jun 2010 12:25:50 +0000

リセットCSS(※ただし自分用)

サイトを作る時、いちいちbody{ margin: 0 }などを指定せずに一気に設定できる自分得のCSSです。

リセット前リセット後

CSS

body,div,p,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
	margin:0;
	padding:0;
	background: none;
	border: 0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img {
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}
hr {
    display: none;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}
 header, nav, article, section, aside, footer {
	display: block
}

をCSSに書き込むか、

をhead内に書き込んでください。

あくまでもいつも自分が使っているものなので、加えたり消したりしてください。

デザインフェスタ2010に行って来た！（5月15日）

na-toi — Mon, 24 May 2010 14:57:39 +0000

ご無沙汰しております、暫くの間、記事を書いていませんでしたが
少し前にデザインフェスタと言うイベントにPRESSとして参加して来ましたので、
簡単に取材報告を致します。大した記事ではありませんが、是非ご覧下さい！

では、早速本題へ

デザインフェスタは毎年、東京ビッグサイト（以下：ビッグサイト）にて行われるので
ビッグサイトの最寄り駅である「国際展示場駅」にて下車し、ロータリー方面を
真っ直ぐ進みます。

暫く道なりに進んで行くと、ヘンテコリンなピラミッドを二個逆さまに
した様な建物が見えて来ますが、それがビッグサイトです。

そして、入り口がコチラです。
みなさんデザフェスに集ってるんですね、いやぁ熱い！

丁度この辺りから入場者の列がズラーッとあり、
みなさんのデザフェスへの熱い気持ちがジミジミ伝わって来ました。たぶん。

Webfonts が簡単につかえる Google Font directory を使ってみた。

fukuchi — Thu, 20 May 2010 08:58:34 +0000

Google Font directory

最近Head内にJavascriptなどの記述をするだけで、簡単にWebfontsが利用できるというサービスがでてきましたが、Googleでも始まりました。

Cantarell
Cardo
Crimson Text
Droid Sans
Droid Sans Mono
Droid Serif
IM Fell by Igino Marini
Inconsolata
Josefin Sans Std Light
Lobster
Molengo
Nobile
OFL Sorts Mill Goudy TT
Old Standard TT
Reenie Beanie
Tangerine
Vollkorn
Yanone Kaffeesatz

が利用できます。
また対応ブラウザは、

Google Chrome: version 4.249.4+
Mozilla Firefox: version: 3.5+
Apple Safari: version 3.1+
Microsoft Internet Explorer: version 6+

です。
iPhone, iPad, iPod, Androidには非対応です。

使い方

使いたいフォントをクリックします。

プレビューがでてきます。Get the codeをクリックします。

2つの表示されているものをHEAD内に入力します。

●● { font-family: 'Cantarell', arial, serif; }

●●の部分を変えたい部分に変更します。
以上です！
簡単にしかも表示速度も早く表示できるので便利だと思います。
使ってみてはどうでしょうか。
ただしパフォーマンスが悪くなってしまうので、使いすぎには注意です
—
Google Font Dictionaryと成っていたのでGoogle Font directoryとタイトルを修正しました。

”色の組み合わせ”を決めるとき、自分がすることを書いてみる

seagull — Sat, 08 May 2010 01:07:43 +0000

　僕はオフなどで色々と絵の活動をしているのですが、その中で「色」は二番目くらいに悩むところです。
（何が一番かというと構図ですが、今回はあくまで色を説明していきます。）　
　ですので、個人的な”色の決め方”を紹介しようと思います。　これは多分、WEBサイトの色決めにも使えると思います…?

　まず、大体の色を決めます。
　
　こんな感じに。
　あくまで、こんな色をたくさん使いたいな、というくらいのイメージでいいので…

　次はもう少し細かく決めます。
　例えば、背景にどんな感じの色を使うか、人物の服はどうするか、人物を一番活き活きさせるための”眼”はどうするか…、
10分間くらいで決めます。　それを決めるとき、何パターンか色を考えて下絵にイメージを書き加えてみます。
~~(WEBサイト作りだと、文字色と背景色、アクセントの画像の色みたいなものです。　この説明は要りませんでしたね…)~~
　――その下絵に書いたメモが後になって絶大なヒントになったりするので、書いていて損は無いと思います。

　それが終わったら、これまでの色を混ぜて出来るだけ自分が良いと思える色を作ります。
デジタルで絵を描く場合にはぼかし機能で混ぜ、アナログで描く場合は水彩のように少しずつ混ぜていきます。
それがWEBサイトの色であっても、カラーコードで結構出来るので…(自分は此処などを参考にさせていただいています)

　それが出来てしまったら後はその色をどう使うかです。　
薄く薄くただ薄く描いていくか、濃く描くか、それだけで印象はずいぶん変わりますので怖いものなしです。印象を変えるという点では。
　
　大体、自分はそんな風に決めます。

　色々と無駄なことまで書いてきましたが、本当に大切なのは一瞬のインスピレーションだと思います。　
つまり、難しく考えすぎなくていいということです。自分が良いと思ったものをふんだんに使えば、自分が好きなように出来ると思いますから。

(ですが、WEBサイト作りの場合には見やすさが大切になってくるのでそこには気をつけましょう。
(自分はそれで失敗したことが幾度と無く有ります))

Webサイトを作る時に役に立ちそうな事を紹介

fukuchi — Fri, 07 May 2010 15:19:48 +0000

少しまとめておきたかったので紹介します
今回はサンプルはありません。

headに記述するといいもの

サイトの説明文を書きましょう

サイトにまつわるキーワードを入れましょう。区切る場合は、カンマ,で区切ります (例) : Webdesign,CSS

作成者を入力します

コピーライトを入力します

検索のロボットに収集されるかどうかです。NOを付けるとしなくなります。

H*の使い方

は1つだけ使う。何個も付けたい

があるなら、それらを

を使って大タイトルに

を使う。
また、H1,H2,H3,H4,H5,H6とあるが、重要度はH1が一番高いです。

IDとCLASSの使い方

IDは1つのみしか指定できない。複数指定したい場合は、CLASSを使う。
IDは、HeaderやWrapなどに使おう。またページトップのリンクの時にも使える。
1つのDIVなどに複数のCLASSもつけられる。(例)

あああ

　空白を開ける

IE6に困ったときはあるCSSを付け加えてみる

何かが表示されない・ずれているとか

zoom: 1
position: relative

Float時にマージンが多くとられる

display: inline

ややこしいけど便利なPositionプロパティ。

positionとは配置が変えられるプロパティです。
種類は4種類(static,relative,absolute,fixed)ありますが、staticは標準状態（何も起きない状態),absoluteとfixedの構成がほぼ同じなので absoluteとrelativeを紹介します。
position:relativeは、他のものに影響されずにBOXをTop,Right,Bottom,Leftに移動できる様にするプロパティ
position:absoluteは、そこ場所から完璧に別の場所にTop,Right,Bottom,Leftに移動できる様にするプロパティ
position:fixedは、absoluteの効果＋固定（スクロールしても移動しない）というプロパティ。IE6非対応です。