[フリー素材] iTunes(というより缶バッチ?)テイストの国旗素材2 – 商用利用可

とりあえず追記しまくるのもあれなんで再エントリーという形で。

欧州5,オセアニア2,南米6カ国足しました。

イージーミスで本ファイルを書き換えるという事故がおきまして、新たに足した分は一から作りました。よって新旧で処理がちょっと違います。まぁうんドンマイドンマイ。

今後もちょっと足すたびに記事を作るのも馬鹿らしいし他のモノも配布していきたいので、素材用のページを作りたいと思います。

[フリー素材] 追記 – iTunesテイストの国旗素材 – 商用利用可

最近ハイクで遊んでてご無沙汰してました。
ネタを書き込むと瞬時に反応があるので楽しいです。

で、ですね。ハイクの流れというか局地的アイコン祭りになっちゃってノリでアイコンを作ってみました。

silvetjude's icon

なんか危ない感じなのは別に僕がそういう思想に傾倒しているわけではなく、流れ上のことですのであしからずw

続きを読む [フリー素材] 追記 – iTunesテイストの国旗素材 – 商用利用可

[Webデザイン] 企業サイトの横幅はどれくらい?~住宅メーカー編~

企業サイトの横幅は何px?

Webサイトを作るときにまず悩む事といえば「サイト全体の横幅」がありますよね。

ちょっと前までは企業サイトといえば760~800前後が多かったのですが、最近は液晶モニタの普及・高解像度化とともに一般家庭のPCでもなかなか大きい画面を使用されている方も多くなってきました。

皆さん感じられてる事だとは思うんですが、去年あたりから標準とされていたモニタが1サイズ大きくなる変換期にあるんじゃないかと思います。(今更おせーよという突っ込みは無しで)

そんななかで「そろそろ900pxオーバーで提案したい…」や「でもなぁ・・・まだまだ解像度が低い人もたくさんいるしなぁ・・・」と葛藤したりする人も多いのではないでしょうか。(しかしYahooが960pxのエラスティックレイアウトに変わって、900オーバーを提案しやすくなりましたよね。)

理想を言えば、どんな画面に左右されない作り方が一番良いんですが、やはり色々問題もありますよね。
続きを読む [Webデザイン] 企業サイトの横幅はどれくらい?~住宅メーカー編~

リキッドレイアウトの最大横幅を固定する-minmax.js

まずリキッドレイアウトの説明からですが、横幅100%で2カラムのリキッドレイアウトを作ります。3カラムはその応用になるので割愛。また現実問題としてサイドバーは固定の方が使いやすいので200pxで固定します。今回の肝はリキッドさせながらサイドバーを固定させる所でしょうか。投稿記事の表示される部分はwidth:100%;を指定してサイドバーは200pxを指定します。

全然目新しいことでもなんでもないのですが、とりあえず忘れないようにメモっときます。

CSS

#container {
float: left;
width: 100%;
margin-right: -200px;
}

#content { margin-right: 200px;}

.post {
width: 90%;
margin: 0 auto;
}

#sidebar {
float: right;
width: 200px;
}

XHTML

<div id="container">
<div id="content">
<div class="post">テスト</div>
</div>
</div>
<div id="sidebar">サイドです</div>

これに背景色等を加えるとこうなります
サンプル1

これはこれで良いのですが、最近は解像度が高いディスプレイも増えてきているので、100%だと間延びしてしまいかねません。

ですのでリキッドを生かしながら、サイトの横幅の最小値を従来どおりの760px、最大値を最近増えてきている960pxで固定させてみます。つまりサイトの横幅がユーザーのディスプレイにあわせて、760px~960pxの間で可変するようなります。

今回は簡単に#liquid-fixを作り、上で使ったXHTMLの全体をそれで包み込みます。その為には#liquid-fixに最大幅と最小幅を指定します。
指定にはmax-width / max-height / min-width / min-heightを使います。

対応ブラウザについてはHTMLクイックリファレンス – max-width をどうぞ。それに加えIE7でも正式対応しております。

ではmin&max-widthを利用して#liquid-fixに横幅を指定します。

CSS

#liquid-fix {
min-width: 760px;
max-width: 960px;
}

これを上のCSSに書き足して、あとはHTMLで全体を包むとこうなります。
サンプル2

しかしこのままでは先ほど説明したとおり、IE6ではmin-width等をサポートしていないためサンプル1と変化がありません。ここでdoxdesk.comminmax.js を使います。

利用は簡単で、minmax.jsをサーバーにアップロードしてhead内に
<script type=”text/javascript” src=”○○/minmax.js”></script>
と書くだけです。

するとIE6でもmin-width等を利用することができるようになります。
サンプル3