CALENDAR
S M T W T F S
   1234
567891011
12131415161718
19202122232425
262728293031 
<< July 2020 >>
ARCHIVES
CATEGORIES
MOBILE
qrcode
SPONSORED LINKS
ボートフォリオ更新中
zackginies.com
http://www.zackginies.com/



今月に入ってからポートフォリオをちょろちょろと更新しております。いまのデザインがもうずいぶん長いこと経つし、2007年の仕事の実績なども載せたいので、今月中には形にしてアップしたいと思ってます^^



ポートフォリオを更新しているからなのか、最近は人のポートフォリオをよく見ています。今日きになったのは上記のサイトです。顔がインパクトありますねw でもぼくの好きなテイストですっきりシンプルなんですがインパクトもあってかっこいいポートフォリオだと思いました。
| CSS | 23:24 | comments(0) | trackbacks(0) | pookmark |
たかの友梨のサイト <fav. css>
たかの友梨 エステティックアカデミー

たかの友梨 エステティックアカデミー



今制作中のサイトのデザインにとっても参考になるので、メモ。。。



ボックスの背景の影やグラデーションの感じがいいですね!女性に好かれそうなサイトデザインです。

| CSS | 23:18 | comments(0) | trackbacks(0) | pookmark |
Evolving Media <fav. css>
Evolving Media

www.evolvingmedia.co.uk



これからは気に入ったサイトをで、メモっていこうと思いましてん!!



こういうテキストと画像をうんまい具合に使ったサイトってかなり大好きです^^ ブルーカラーも個人的に好きなので!
| CSS | 22:54 | comments(0) | trackbacks(0) | pookmark |
CSSの奥深さ

IE6 + CSS 『border-leftとpadding-bottom』の謎

どこがおかしいかお分かりになりますでしょうか。2項目目の赤と青で囲まれたテキストが、左に飛び出ていますね。その下にあるテキストまで、左にずれてます。

これは、多くのデザイナーの悩みの種である、「IE」の代表的なバグのひとつです。


この症状は、ぼくもぶち当たりました^^; ちょっと前にMTでBlogを構築したとき、コメントのところで、ウノウラボさんのところで紹介されているように、徐々に下にいくにつれて左にずれていくという症状です。



そのときは、いろいろ試してなんとか解消できましたが、このようにまとめられていると助かりますね^^いまもCSSのコーディングの作業をしていますが、改めてCSSの奥深さにもっと勉強せねばーっと思う日々です。。



近くにCSSマスターがいて、いろいろ聞けるので助かりますが、そのスキルを身につけるまでにはもっともっとコーディングして勉強しないとならないみたいです!



さてと、作業にもどりまーすw
続きを読む >>
| CSS | 18:57 | comments(0) | trackbacks(0) | pookmark |
子孫セレクタの指定ミス
CSSでWebサイトのデザインをしていると、CSSの書き方っていうものが、みんなそれぞれあると思います。コメントタグにしても、書き方がいろいろあるし、セレクタの書き方も人それぞれあると思います。



昨日もCSSでWebサイト制作をしていて、ナビゲーションもなんとか思うように表示されて動くようになって、下層ページのデザインに取り掛かっていました。



すると途中でデザインが崩れて、その影響がトップページにも出てしまいました。CSSの文法チェックをしてみてもエラーがなかったので、原因がつかめず、一日明けてしまいました。



そして、今日もその原因を調べるため、CSSの本を読み漁っていると、どうやら僕の子孫セレクタの書き方がまずかったみたいです。



子孫セレクタとは、「ある要素Aのなかにある要素Bに対して指定」するときに使うCSSの書き方で、その複数の要素であるセレクタを半角スペースで指定します。その子孫セレクタの擬似クラスの書き方が原因だったみたいで、ぼくは、以下のような書き方をしていました。



  #menu a, a:visited, a:hover{ 〜 }



これが原因で、他の擬似クラスにも影響が起きていたようです。つまり、上の書き方だと子孫セレクタの指定が、a:visitedとa:hoverにされないため、ほかのa:visitedとa:hoverにここの指定が上書きされてしまい、表示崩れが起きてしまったということみたいです。正しくは、



  #menu a, #menu a:visited, #menu a:hover { 〜 }



と書けばいいみたいです。また一つ勉強!CSSってオフクカ^^;
| CSS | 23:50 | comments(0) | trackbacks(0) | pookmark |
CSSのナビゲーション
GWも今日で終わり。。学校のみんなは卒制の進行状況どーなんだろう??

俺は、やっぱりCSSに悪戦苦闘しています^^;



CSSでのナビゲーションは、このポートフォリオでも作ったので、今回もいけるかなーと思って作ってみると…うまくいきません。今回は<ul>にbackgroundで背景画像も指定しているので、各リストの位置の指定がポイントになってます。



なんとか通常時とマウスオーバーのときの画像の入れ替わりは見れるようになったけど、アクティブなときの画像表示がうまくいきません。指定してもブラウザ上では表示されずにいます。どうしてだろう…



ググってみよっと!



参考サイト:

 → Listamatic

 → CSS Library

 → CSS タブ式メニュー

 → インラインのタブ・メニュー
| CSS | 20:07 | comments(0) | trackbacks(0) | pookmark |
基本レイアウトに悩む
GW一日目ってことで、卒制をやってます。でもちょっとダラダラかなー^^;

というのは、基本のレイアウトでちょっと悩み始めちゃいました。



とある会社のサイトでXHTML+CSSでの制作をしていく予定で、Fireworksで基本デザインを作り、いざHTMLで基本構造を書いていると、「うーんナビがやっぱ上にもってきたほうがいいなー」とか「メニューは左のほうが自然だなー」といった具合に書きながら悩んでしまってます。



製品紹介以外のところはページ数も多くないので、シンプルにわかりやすく見せたいと思ってます。企業サイトの基本レイアウトみたいなものをいくつか見てみて考えたんですが、やっぱ作り始めると駄目ですねー悩みます。



外は晴れ。。。散歩でもしよっかなー
| CSS | 17:34 | comments(0) | trackbacks(0) | pookmark |
フルCSSサイト作り
今作っているサイトやこのBlog、そしてポートフォリオは、フルCSSで制作しています。やはりBlogの普及がイコールCSSの普及につながってると考えられます。



今後もCSSを利用したWeb制作が主流になっていくと思うし、もっとCSSのスキルを上げて行きたい!ポートフォリオを作っていたときにも、CSSの辞典などを参考にしましたが、以下の書籍がとっても参考になりました。



プロとして恥ずかしくないスタイルシートの大原則

プロとして恥ずかしくないスタイルシートの大原則



CSSサイトを作っていく上で、ぶつかるであろう問題やテクニックが載っています。たとえばロールオーバーすると背景の変わるナビゲーション作りや、2カラム・3カラムレイアウト方法、ハック集など、もっておくととても便利だと思います。
| CSS | 23:05 | comments(0) | trackbacks(1) | pookmark |
CSSのナビゲーション
最近はCSSを勉強していて、昨日悩んでいたことが解決したので、そのメモ!

CSSでナビゲーションを表現するときリストタグ(ulやliなど)を使うことが多いと思いますが、そのナビゲーションでマウスオーバーしたとき画像を入れ替える方法もCSSだと結構簡単にできます。

今までは、JavaScriptで制御していたものをCSSで表現できるのです。でも、そこで悩んでいたのが、実際開いてるページのナビゲーションの表示について。今進めている参考書はどうもその教えているページのみのことしか考えていないHTML&CSSの書き方をしています。

CSSのメリットは、多くのHTMLファイルを1つのCSSファイルで修飾を管理できるところなので、そういう風に書いてくとのがベストです。でも、参考書は違う。なので、悩んだー頭ひねったー

参考にしたサイト
Designing with CSS § ウェブスタンダードテンプレート集: CSS Templates: CSS タブ式メニュー

開いてるページ用に新たにidを設けて制御するって方法。僕は●●●_hereみたいにid名を付けました。

他にもっといい方法があると思うけど、いまのところこれでいこうと思います。
| CSS | 23:37 | comments(0) | trackbacks(0) | pookmark |
画像の下に隙間ができたら
Blogを利用していると、だんだんとレイアウトをいじりたくなってくると思います。僕もそうです。MTをはじめた当時(3年くらい前)、HTMLやCSSの知識がほとんどなかったので、ネットでいろいろ調べながらいじっていました。

Blogでまず最初にいじったのがヘッダー部分です。タイトル部分にあたるこのヘッダーをいじることで、そのBlogの印象も変わってきます。

そして、ヘッダーに画像を使ったとき、よく陥ってたのが、「画像下にできる隙間」でした。このjugemもそうでした^^; 

その隙間の原因は、vertical-alignの指定で解消される場合が多い見たいですね。CSSファイルの隙間が出てしまう画像に対して、

 vertcal-align: bottom;

と指定する。

vertical-alignは、インライン要素に対して、縦方向の表示位置を指定するプロバティです。初期値では「baseline」になっているため、この隙間が出てしまうみたいです。

詳しくは以下のサイトが参考になります。テキストでの隙間の原因をわかりやすく説明しています。
table内に画像を隙間無く敷き詰めるには注意が必要です #1

ここの説明にもあるとおり、「ディセンダ」というものが曲者みたいですね^^;
| CSS | 23:34 | comments(0) | trackbacks(0) | pookmark |
| 1/2PAGES | >>