新米デザイナーの日報|design tracks » コーディング

IE7、8でリストに隙間ができる

ts — Sat, 18 Jul 2009 03:05:12 +0000

先日サイドナビゲーションの部分でつまずいたので、備忘録程度に書いておきます。
デザインとしては、各都道府県が書かれた画像をサイドバーに、縦にずらーっと並べる形なんですが、
IE7、8以外だとこんな感じでも問題ないです↓

■html

■CSS

ul {
list-style:none;
}

li {
margin-bottom:2px;
}

まあすごい簡単な感じにCSSも書いてありますが。サイトによってリセットCSSが入っている場合が多いので諸々の部分は省いております。

この際IE7で見ちゃうと大変なことに画像間の余白が予定より広くなることがありますので、
そのときの解決策はliに大してfont-size:1%;のようにするとなおります。

しかし、このままでは、IE8でリスト4個置きぐらいに3px程度余計に余白が付くことがありますので、さらにliとその中のaに追記します。

li {
line-height:0;
font-size:1%;
margin-bottom:2px;
}

li a {
line-height:normal;
}

これでオッケーです。
まだまだIE問題は大変そうです。

資生堂やソフトバンクの広告に関する歴史がわかる「宣伝部物語」

ts — Thu, 09 Jul 2009 14:34:24 +0000

通勤時間を使って読んだのですが、内容が面白くあっという間に読み終えてしまいました。

簡単な内容は、資生堂、サントリー、ソフトバンクがどのような広告を作り、どのように広めていったのかが書かれていました。改めて感じたのは、自分は今までありとあらゆるデザインされたもの（webサイトはもちろん、日常使っているトイレなど）を、表面的にしか見れていなかったなと。それと、売りたいモノや、伝えたいことを考えてデザインするとなると、ターゲットや価値、用途やその商品の特徴をしっかりと理解することが大事だと感じました。
本を読んだ後は、資生堂、サントリー、ソフトバンクに対する見え方が変わりました。将来関わることができればなと思います。

昨日からモバイルサイトのコーディングをしているのですが、PCとは別物で正直頭で考えながらHTMLを書いて、CSSを…という流れがないので、物足りないです。ただテキストや絵文字を有効に使うという概念はPCにはないので、面白いのは若干あります。早いとこ終わらせないと明日のイベントに行けなくなるのでがむしゃらに頑張ります。
iPhone、いやiPod touchがすごく欲しい！

コーディングDay終了！！

ts — Fri, 26 Jun 2009 03:21:20 +0000

長かったコーディングの日々も一先ず終わった感じがします。
なにかとつまずくことが多かったですが、その分得たものも多かったです！
ただ完全燃焼してしまったといいますか、将来こういうことをやりたいと具体的になってきて…それに伴って今年中や今月中にやりたい小さな目標も出てきて、まあ環境を変える時期がきたのかなと。
まだ考えが浅いので来月も使って考えていきたいと思います。

そんなこんなで、平日の今日は代休を頂いています。なので、ブログの更新、デザイン変更、aboutとworksページの改修ができればいいかなと思っていますので、本日ちょいちょいレイアウト崩れ等が発生する可能性大です。（テスト環境持っていないもんですみません）
ただデザイン改修などをする前に、Gmailの整理やら部屋の掃除などなどをやってからなのでできるのか不安ですが。。。

とりあえずこの何日か分の情報を吐き出していきたいと思います。

about、worksページ追加

ts — Tue, 23 Jun 2009 14:33:50 +0000

昨日の深夜にページを追加しました。
簡単な自己紹介ページの「about」と、作品を掲載する「works」です。まだページ内は内容がほぼない状態ですが、
aboutページはちょっとしたイラストと今後、今年の目標なんかを自由に書いて、
worksページはとりあえず学生時代の作品と、今度コーディングの仕事が入るのでそれを、あとはコンペに参加したりして、掲載可能なものは掲載できればと思っております。

星形のキャラメルコーンを発見しました。一袋に一つは入っていそうな感じですが、こんな些細なことでも嬉しいです。

ブログランキングの勧誘ですが初コメント頂きました。2週間前まではスパムの嵐で1日に100件ほど来ており、特定（たぶん海外）のIPアドレスをアクセス拒否にしてやっと0になりました。そんな矢先のことだったのでまたスパムな日々が始まったと思っていたので勧誘でも一安心しました。

ulにネガティブマージン

ts — Sun, 21 Jun 2009 19:52:49 +0000

ほとんどナビなんかではul要素を使用していて、記述はこんな感じになるのですが、
■html

ホーム

ページ１

ページ２

ページ３

■css
#nav {
width:495px;
}

#nav li {
float:left;
width:120px;
margin-right:5px;
}

#nav li.lastNav {
margin-right:;
}

いままでこのように、幅が決まっている場合には最後のliにclass=”lastNav”で余白を消していたのですが、
ul属性に
#nav {
width:495px;
margin-right:-5px;/*←追記*/
}

margin-rightに大してネガティブマージンをいれることで、最後のli属性にわざわざclassを指定する必要がないみたいです。
たぶんこれは初歩的な技だと思われるので、今後使用したいと思います。今まで技術さんに苦労させてきたなと思うとちょっと情けないです。
備忘録までに。。。

RIP SLYMEに久々はまりました。

ts — Sun, 21 Jun 2009 09:25:42 +0000

先週パソコンに向かうことが多かったため音楽を聞く機会が多かったのですが、RIP SLYMEの新アルバム「JOURNEY」に助けられました。ノリがいいのでコーディングがはかどることはかどること！！キーボードを変えたせいもあるのですが、いい感じに集中できて作業に取り組めたなと思いました。

一週間なんとか乗り切りました。

ts — Sun, 21 Jun 2009 09:17:44 +0000

先週はコーディングDayだったのですが、残業・徹夜・持ち帰り（データは持って帰れないので、ノートに軽くコーディングをするレベル）をしてなんとか乗り切りました。
もちろんやりきった感はあるのですが、どうしてもコーディングだけでは達成感がないなと最近まで思っていたのですが、
やっぱり薄いですね。どうしても今のスキルでは上司もコーディングの作業しか渡せないので根本的な問題は自分にあるんですけど。
なので、早いとこ新たなスキルを身につけるために日々頑張りたいです。

先週いろいろやっていて気づいたこと、
■サイト改修
サイト改修といっても全100ページものでデザインは別の方にしていただいたのですが、なんせ初めてて何から手をつけてよいやらで、周りは「お前に任せた」的な無茶ぶりで…、良い経験になったのですが。
流れとしては、cssファイルの影響範囲を調べて各コンテンツ、ページ、目的などに合わせて適正分けて作業に踏み切ったのですがあまかったです。いかんせん無駄なファイルや記述が多すぎて、とりあえずspacer.gifとインラインCSSを取り除きました。
そして共通で使うものとそうでないものを分けて…。ざっと5人日はかかったと思います（←効率が悪かったので、もう一度同じことをすると3.5人日でいけるかなと）

■他、特集系ページ
これが正直スケジュールに入れていなかったのもありきつかった。ケツは決まっているが、まだコーディングに取りかかれるとこまでデザイン、構成が決まっていない。まあそこでリソースを確保しやすいのがコーディングとプログラミングのとこで何かと辛い立場なのかなと理解してきました。どちらも成功（すごい！、さすが！！的な）はなく、失敗するかしないかであるかなと、できて当たり前状態ですね。
まあそんなときはコーダーの方と話をするとそれをつまみにお酒が飲める様になっちゃうんですが（特にIEネタはなかなか終わりません）

そんなこんなでいろいろと収穫があった一週間でした。今週は忙しい雰囲気ですが、再来週ぐらいには一休みできたらいいかなと希望を持っているところです。
ネイバーがかっこ良くて気になる！！

あと先日購入した「デザイン、現場の作法。デザイン力を鍛える仕事術」ですが、読み終わったので簡単にレビューを。
全体的に図や写真が多く読みやすかったです。DTP向けということもあり、あまりwebでは触れないカラープルファイルやフォントの奥深いとこなどが多かったのですが、逆にそれが新鮮で、特にフォントに関しては今まではざっくりと明朝系とゴシック系で頭にいれていたのですが、読み終えた後は選択肢が広がった気がします。
若干残念だった部分は、最後の落としの部分がソフトウェアの紹介になるページが多かったかなと思いました。全然嫌な感じに宣伝していた訳ではないですが。
あとは個人的なとこで通勤時に読む本のサイズではないなと。なので、こんどは小さめのを、しかも広告代理店の企画は…的なものを購入しました。
この本を読んでの一番の収穫は、通勤時に本を読む習慣が付いたことだと思います。読んでよかったです！

最近イベントやセミナーに参加してなかったので、そろそろ…

ts — Mon, 15 Jun 2009 19:48:05 +0000

そろそろ何かイベントかセミナーに参加したい欲求が溜まってたところ、いくつか6/末〜7/初めあたりで良さげなのがあったので参加しようと思います。ちょっと競争率が激しいみたいなんで、是非参加できるように頑張りたいと思います！

まあそんなこんなで明日もコーディングDayなんですが、息抜きをしたいです。
「アドフェスト2009展」
これに行きたい！是非とも仕事を早く終わらせて行ってみたいと思います。といいつつ明日は会社に泊まりっぽいですが。。。

チェックボックスの枠に色を付ける

ts — Sun, 14 Jun 2009 12:55:41 +0000

最近はコーディングばかりしているんですが、一カ所つまずいてしまうところがありました。
現状でもはっきりとうまくいけてないんですが、
とりあえずCSSの方をこんな感じで対処していたと思います。

※多少忘れていますが、間違いがあったら修正します。

input {
border:1px solid #fcc;
outline:1px solid #fcc;
-moz-outline-style:1px solid #ff;
}

*:first-child+html nput {
width:13px;
height:13px;
}

* html input {
width:13px;
height:13px;
}

ただこれだとoperaが…。
一度別の方法で、inline-blockを使用したのですがなんかうまくいなかなったんですよねー
まあこうやって新しいことにチャレンジできるのは嬉しいことです！！それを乗り越えると成長した感が味わえますし。

昨日も今日も、明日も明後日もコーディング

ts — Tue, 09 Jun 2009 14:58:06 +0000

今小ちゃいサイト改修（自分のスキルではなかなか時間がかかりますが…）を行っています。
コーディングは嫌いじゃないですが、二日目にしてちょっとお腹いっぱいになってきたかなというところです。
けど明日もしこたま頑張ります。これを乗り越えれば少しは成長できるかなと思っていたり。

右の本棚にも追加していますが、「デザイン、現場の作法。デザイン力を鍛える仕事術」を購入しました。
今まであまり電車の中で本を読むことはなかったんですが、少しでも時間は有効に使いたいなと最近思ってきて早速買いました！

今から昨日寝てしまった分のActionScriptの勉強をしたいと思います。ちょっと怠けかけているので気合いを入れ直したいと思います。

gremzちょっと大きくなりましたが、スパムも増えました。これからもAkismetに頑張っていただきます。