webアレコレ http://web.netkatuyou.com/ ja Copyright 2008 Tue, 11 Nov 2008 00:42:51 +0900 http://www.sixapart.com/movabletype/ http://www.rssboard.org/rss-specification リストを使った横型メニュー リストを使った横型メニューに続き、今回は横型メニューをご紹介。
ではまずサンプルを。



基本的にはリストを使った横型メニューと同じで、違う点といえばfloatを使用している点です。
ではソースのご紹介。
<ul class="yokomenu">
  <li><a href="">メニュー1</a></li>
  <li><a href="">メニュー2</a></li>
  <li><a href="">メニュー3</a></li>
  <li><a href="">メニュー4</a></li>
  <li class="right"><a href="">メニュー5</a></li>
</ul>


.yokomenu{
list-style:none;
}

.yokomenu li{
	float:left;
}

.yokomenu a:link,.yokomenu a:visited{
width:100px;
display:block;
background-color: #CCCCCC;
text-decoration: none;
border-left:solid 1px #333333;
border-bottom:solid 1px #333333;
border-top:solid 1px #333333;
color:#222222;
padding:5px;
}

.yokomenu a:hover{
display:block;
color: #FFFFFF;
background-color: #333333;
text-decoration: none;
padding-left:5px;
}

.right a:link,.right a:visited{
border-right:solid 1px #333333;
}
]]> http://web.netkatuyou.com/2008/11/11-004251.php http://web.netkatuyou.com/2008/11/11-004251.php css小技 CSS リストタグ Tue, 11 Nov 2008 00:42:51 +0900 web creators 12月号
Web creators (ウェブクリエイターズ) 2008年 12月号 [雑誌]
Web creators (ウェブクリエイターズ) 2008年 12月号 [雑誌]
posted with amazlet at 08.11.05

インプレスコミュニケーションズ
Amazon.co.jp で詳細を見る
今月号の特集は 「WEBサイトのアクセス数を向上させる9つの方法」 Google Analyticsについての情報もあり、 興味はあるけど使った事がない、といった方も目を通しておいて損はないかと思います。 そして今月号には写真素材の付録が付いていつもよりお得感が。 樹木や花など、自然に関する写真が収録されています。 ]]> http://web.netkatuyou.com/2008/11/03-004349.php http://web.netkatuyou.com/2008/11/03-004349.php 参考書籍 Google Analytics web creators Mon, 03 Nov 2008 00:43:49 +0900 写真補正・加工　逆引きデザイン事典
写真補正・加工 逆引きデザイン事典 Photoshop CS3/CS2/CS/7.0対応
写真補正・加工 逆引きデザイン事典 Photoshop CS3/CS2/CS/7.0対応
posted with amazlet at 08.11.01
上原 ゼンジ 高橋 としゆき 田中 クミコ ハヤシ アキコ 吉田 浩章
翔泳社
売り上げランキング: 61842
Amazon.co.jp で詳細を見る
私自身Photoshopは所有していますが、なかなか使いこなすまでには至らず。 Photoshopの本は多数出ていますが、機能についての説明やロゴの作成法だったり、 加工等にしぼった書籍は案外少ないような気がします。 この本では、商品画像や人物写真の写真補正や加工テクニックに重点が置かれていて、 「こういう表現をするには、こうすればいいのかあ。」 ということが分かる1冊かと思います。 ]]> http://web.netkatuyou.com/2008/11/01-095101.php http://web.netkatuyou.com/2008/11/01-095101.php 参考書籍 Photp Shop 写真補正・加工 Sat, 01 Nov 2008 09:51:01 +0900 positionプロパティの使い方 自分自身あまり使い方を知らなかったので、ちょっと簡単にご紹介。
positionプロパティを使うことによって、自由なレイアウトが可能になります。
まずpositionプロパティには4つの指定の仕方があります。

static
デフォルトの指定
relative
相対配置
absolute
絶対配置
fixed
固定配置

sataticはデフォルト指定、fixedはサポート外の場合が多いので、
基本的にはrelative、absoluteを使った手法が一般的かと思います。
では具体例で説明を。
position3.png

この図にあるようにロゴをコンテンツエリアと重なるように配置したいとき、
positionプロパティを使用することで実現できます。
ではHTML、CSSを考えていきたいと思います。
<div id="all">
<h1>ロゴ</h1>
<div  id="contents">ここに内容が入ります。・・・</div>
</div>
</div>

#all{
	width:400px;
	position:relative;
	background-color: #009900;
	padding: 30px;
}
h1{
	position:absolute;
	top: 10px;
	left: 10px;
	margin: 0;
	padding: 0;
}
#contents{
	margin:0px 0px 0px 0px;
	background-color: #CCCCCC;
	padding: 80px 0px 0px 20px;
}
position2.png
ポイントとなるのが基準にするブロックにrelativeを設定し、その基準点を軸にして動かしたいブロックにabsoluteを指定していく。位置の指定はtop、bottom、left、rightで。
この例の場合ではID all　を基準点とし、h1にabsoluteを指定して、位置を決めています。 ]]> http://web.netkatuyou.com/2008/10/12-203339.php http://web.netkatuyou.com/2008/10/12-203339.php css小技 absolute CSS position relative Sun, 12 Oct 2008 20:33:39 +0900 web creators 11月号
Web creators (ウェブクリエイターズ) 2008年 11月号 [雑誌]
Web creators (ウェブクリエイターズ) 2008年 11月号 [雑誌]
posted with amazlet at 08.10.02

インプレスコミュニケーションズ
Amazon.co.jp で詳細を見る
今月号の特集は、 「サイトのメッセージを正しく伝えるWEBデザインの鉄則」 デザインというと一見外見だけに目にいきそうなところですが、 ユーザー目線に立ったデザイン、 主ににユーザビリティ等に関する内容でした。 webサイトは当然ユーザーあってのものだと思うので、 おろそかにしてはいけないな、と感じました。 ]]> http://web.netkatuyou.com/2008/10/02-230329.php http://web.netkatuyou.com/2008/10/02-230329.php 参考書籍 web creators ユーザビリティ Thu, 02 Oct 2008 23:03:29 +0900 firefoxのアドオンで効率アップ（2） IE Tab firefox上てIEでの表示ができます。 IEでしか表示できないサイトを表示したい、といったときに便利です。 Screen grab! webサイトのスクリーンショットを簡単に撮れます。 windows標準のスクリーンショットだと、 画面に表示してる範囲でしかできず縦長のサイトは途中で切れてしまいますが、 Screen grabだと丸ごとスクリーンショットが撮れます。 Speed Dial Operaの機能「スピードダイアル」を再現したモノ。 お気に入りのページをサムネイルで登録し、 サムネイルをクリックすることですぐページにアクセスできます。 FireGestures こちらもOperaなどで定番「マウスジェスチャー」を再現したモノ。 右クリックを押しながらマウスを操作して、 簡単に一つ前のページに戻る、など様々なことができます。 Fire Gesturesでは自分で機能を追加することもできます。 ]]> http://web.netkatuyou.com/2008/09/20-121059.php http://web.netkatuyou.com/2008/09/20-121059.php お役立ちツール・ソフト firefox3 アドオン スクリーンショット マウスジェスチャー Sat, 20 Sep 2008 12:10:59 +0900 Googleが独自ブラウザ「Google Chrome」を公開。 Google Chrome」を公開しました。 高速でシンプルさを追求したブラウザだそうで、 特に表示の速さが話題になっているようです。 それで個人的に気になるのがCSSの対応状況。 CSS3対応ということですが、 現状では各ブラウザによって対応状況がまちまちなので、 CSSハック等の使用の仕方次第では、表示が崩れたりするケースが出てくるのかも。 今後の動向に注目していきたいなあと思います。 なおGoogle ChromeはGoogoleのサイトよりダウンロードできます。]]> http://web.netkatuyou.com/2008/09/06-123720.php http://web.netkatuyou.com/2008/09/06-123720.php お役立ちツール・ソフト CSS3 Google Chrome ブラウザ Sat, 06 Sep 2008 12:37:20 +0900 web creators 10月号
Web creators (ウェブクリエイターズ) 2008年 10月号 [雑誌]
Web creators (ウェブクリエイターズ) 2008年 10月号 [雑誌]
posted with amazlet at 08.09.03

インプレスコミュニケーションズ
Amazon.co.jp で詳細を見る
web creatorsの最新号をチェック。 今月号の特集は、[永久保存版]使えるCSSデザインの技152 細かい微調整についての手法なども紹介されていて、 ちょっと困ったときにお役立ちな特集だと思います。 そして巻末特集では、iPhone向けのwebサイト作成について紹介されています。 作成における注意点など詳しく紹介されています。 ]]> http://web.netkatuyou.com/2008/09/03-105936.php http://web.netkatuyou.com/2008/09/03-105936.php 参考書籍 CSS iPhone web creators Wed, 03 Sep 2008 10:59:36 +0900 Picasa2で画像を簡単整理。 Picasa2 googleから無料でダウンロードできるソフトウェアで、 起動するとPC内にある画像などをフォルダごとに整理し、 ワンタッチでそのフォルダ内の画像がサムネイルで確認できます。 また画像編集の機能等、便利な機能もたくさんあるので、 とてもおススメなソフトウェアです。 ダウンロードは今現在は googleのTOPページ→Google サービス一覧→picasa からダウンロードできます。]]> http://web.netkatuyou.com/2008/08/19-220143.php http://web.netkatuyou.com/2008/08/19-220143.php お役立ちツール・ソフト google Picasa2 Tue, 19 Aug 2008 22:01:43 +0900 web creators 9月号
Web creators (ウェブクリエイターズ) 2008年 09月号 [雑誌]
Web creators (ウェブクリエイターズ) 2008年 09月号 [雑誌]
posted with amazlet at 08.08.01

インプレスコミュニケーションズ
Amazon.co.jp で詳細を見る
今回の特集は「表現の制約を乗り越えるWEBデザインの技」。 jqueryなどのライブラリを使用してのテクニックなどなど、 手軽に導入できそうなもの多く、色々試してみると面白そうです。 話は変わりますが、気になる話題が一つ。 連載記事の「WEBトレンドウォッチング」に掲載されたいたんですが、 CSS Sprites　というテクニックが話題になっているそうです。 通常アイコンの画像などは作成するときに個別に書き出していくと思いますが、 このテクニックではそれらを一枚の画像として書き出す、というものだそうです。 ファイルサイズを抑えられるなどのメリットがあり、 アクセス数の多いサイトなどでは効果があるようです。 ただしアクセシビリティ上デメリットもあるようなので、 使いどころをよく考えて使うべきテクニックかと思います。 ]]> http://web.netkatuyou.com/2008/08/01-223028.php http://web.netkatuyou.com/2008/08/01-223028.php 参考書籍 CSS Sprites web creators Fri, 01 Aug 2008 22:30:28 +0900 リストを使った縦型メニュー では以下に簡単なサンプルを。 ロールオーバー時に背景色と文字色が変わるように設定してみました。
では以下にソースをご紹介。 
<ul class="tatemenu">
  <li><a href="">メニュー1</a></li>
  <li><a href="">メニュー2</a></li>
  <li><a href="">メニュー3</a></li>
  <li><a href="">メニュー4</a></li>
  <li class="bottom"><a href="">メニュー5</a></li>
</ul>

.tatemenu li{
width:150px;
text-decoration: none;
}

.tatemenu a:link,.tatemenu a:visited{
width: 150px;
display:block;
background-color: #CCCCCC;
border-left:solid 1px #333333;
border-right:solid 1px #333333;
border-top:solid 1px #333333;
text-decoration: none;
color:#222222;
padding-left:5px;
}

.tatemenu a:hover{
width: 150px;
display:block;
color: #FFFFFF;
background-color: #333333;
text-decoration: none;
padding-left:5px;
}

.bottom a:link,.bottom a:visited{
border-bottom: solid 1px #333333;
display:block;
width:150px;
}
ポイントとしてはリストをブロックレベル要素化する、 borderの使い方をちょっと工夫する、といった所かなあと思います。 他にも色々な作成法があると思うので、今後も何パターンか紹介していきたいなあと思います。
]]> http://web.netkatuyou.com/2008/07/25-153845.php http://web.netkatuyou.com/2008/07/25-153845.php css小技 CSS メニュー リスト Fri, 25 Jul 2008 15:38:45 +0900 ワイヤーフレームを作成する。 wire.gif ちょっと手抜き感のある画像ですがご勘弁。 ワイヤーフレームとは元々、 ワイヤーフレーム (en:wire frame) とは、3次元コンピュータグラフィックスにおけるレンダリング手法の1つ。3次元オブジェクトを竹ひご細工のような線形状のみで表現する。(ウィキぺディア) と言うもので、webサイトにおいては「骨組み」に当たるものと考えられているようです。 まずはワイヤーフレームを作成し、画面構成をはっきりさせる。 そうすることでデザインの修正をしたい、といったときにも効率よく作業できるかと思います。 ]]> http://web.netkatuyou.com/2008/07/23-192136.php http://web.netkatuyou.com/2008/07/23-192136.php webデザイン ワイヤーフレーム Wed, 23 Jul 2008 19:21:36 +0900 web creators 8月号
Web creators (ウェブクリエイターズ) 2008年 08月号 [雑誌]
Web creators (ウェブクリエイターズ) 2008年 08月号 [雑誌]
posted with amazlet at 08.07.08

インプレスコミュニケーションズ
Amazon.co.jp で詳細を見る
特集は「WEBの完成度をもっと高める76の正攻法」。 一見目新しい内容ではなかったのですが 一つ一つweb制作において大切なことだなあ、と思いました。 また、連載の一つにSilverlight関連のものが新しく始まりました。 今後更に広まっていく技術かと思われるので、 是非チェックしておくべき連載かと思います。 ]]> http://web.netkatuyou.com/2008/07/08-231806.php http://web.netkatuyou.com/2008/07/08-231806.php 参考書籍 Tue, 08 Jul 2008 23:18:06 +0900 CSS適用の優先順位
  • htmlタグに直接記述する
  • head内に記述する
  • 外部ファイルに設定する
    • これらの3つの方法があります。 適用される優先順位としては1>2>3の順番で、htmlタグに直接記述したものが最優先されます。 おおまかな優先順位はこのようになるのですが、気を付けておきたいことがもう一つ。 例えば以下のようにスタイルを設定します。 
    <div id="soto">
    <p class="naka">何色かなあ？</p>
    </div>
#soto p{color:red;}
    .naka{color:blue;}
    #soto .naka{color:green;}
    このように設定したときどのスタイルが適用されるかというと、 #soto.naka{color:green;}が適用されます。 id、classにも優先順位が決まっており、点数で表すと、
    • id＝100点
    • class=10点
    • h1・div等のタグ＝1点
    このようになります。 この決まりに従って計算すると、 #soto p＝101点 .naka=10点 #soto.naka＝110点 となり、一番点数の高い#soto.nakaのスタイルが適用されます。 なお、! importantを加えることで順位を最優先にすることができます。 例えば上記例で 
    .naka{color:blue ! important;}
    と記述すると、 .nakaのスタイルが再優先されます。 ただし、あまり! importantを多様すると後々困ることもあるので、 使い方には気をつけたほうがいいかと思います。 ]]>     http://web.netkatuyou.com/2008/06/28-143036.php http://web.netkatuyou.com/2008/06/28-143036.php css小技 css 優先順位 Sat, 28 Jun 2008 14:30:36 +0900     IETesterでブラウザチェック。 IETesterというソフト。 IE6のみならず、IE5.5, IE6, IE7, IE8beta1でのブラウザチェックができます。 またsourcelabさんで日本語パッチ配布をしているそうです。]]> http://web.netkatuyou.com/2008/06/14-101950.php http://web.netkatuyou.com/2008/06/14-101950.php お役立ちツール・ソフト IETester ブラウザチェック Sat, 14 Jun 2008 10:19:50 +0900