スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
CSS Nite LP Disc3 Part.3
『ザ・コーディングの美学』
サイバーガーデンの益子貴寛さんのセッションのレポート

コーディングの「真・善・美」

真→論理
善→倫理
美→芸術

ではコーダーにとっての真善美とは何だろう?

1.コーディングの「真」

仕様に準拠することが、論理的な「真」である。
仕様はイロイロあるが、W3Cに準拠するのが一般的。

でもただ準拠すればいいのではない。
どの文章型を使うのか? id、classの命名、要素や見出しのマークアップ、クロスブラウザ対策などのマークアップ実務と組合わせることが重要!

真を実現するために必要なこと


仕様に準拠する
マークアップ実務

マークアップ実務の段階で出てくる問題点、改善点などをフィードバックした形で、新しい仕様というものは生まれる。
だから我々一人一人の実務が、「真」の発展に貢献している!

2.コーディングの「善」

コーディングは極力シンプルに!

そうすれば、CSSが効率的に適用でき、他のプログラムとも連携しやすくなる。
誰に(制作者・開発者やユーザー)でも扱いやすいコードが、Webサイトの共用性や運用性を上げる。

3.コーディングの「美」

誰が見ても見やすく、美しいコードを!

そのためには…

1.インデントの処理
2.コメントの挿入
3.スペースと改行を入れる
4.省略できることも、省略しない!

例)
<body>
<div id="header">
<h1>会社名</h1>
</div>
<div id="gNavi">
<ul>
<li>TOP</li><li>製品一覧</li><li>お問い合わせ</li>
</ul>

↓上記のようではなく、インデントや改行を入れると美しい!

<body>
 <div id="header">
  <h1>会社名</h1>
 </div>
 <div id="gNavi">
  <ul>
   <li>TOP</li>
   <li>製品一覧</li>
   <li>お問い合わせ</li>
  </ul>

コーディング作業が一通り終わっても…

これで終わりではない。
idやclassを少なくしたり、CSSハックをなるべく使わないようにしてみたり、ターゲットブラウザを広げてみたり、MicroformatsやAjaxを実装してみたり、アクセシビリティに配慮してみたり…
やるべきことはまだまだ沢山…

与えられた時間の中で、一つでも多くクリアできるように、努力する!
スポンサーサイト
CSS Nite LP Disc3 Part.2
LIVEコーディングの感想

普段、他の人がどのようにコーディング作業をしているのかが見れてとても良かった。
他人の作業を見ていて気がついたことがあったので、メモしておく。

1.画像ファイルの名前の付け方
2.ユニバーサルセレクタは使わない?
3.idやclassの名前の付け方
4.事前の設計が大事!

1.画像ファイルの名前の付け方

他の人がそのファイルを見た場合にも、分かるようにファイル名をつける。
headerに使用する画像ならば、「header_●●.jpg」などとする。

2.ユニバーサルセレクタは使わない?

ブラウザのスタイルを初期化する時には、ユニバーサルセレクタは使わない方向に進んでいる。

3.idやclassの名前の付け方

idやclassに付ける名前も、意味のあるものにする。ワンパターンになりがちな場合は、いろんなサイトを参照し、どのようなタグが付けられているのかを、メモしておくことも大事。

4.事前の設計が大事!

これは昨日も書いたことだが、パソコンでの作業の前に、構造化をどのようにするか? どんなタグを使うのか? サイト内で共通している箇所はあるのか? 文字が増えた場合にはどんなレイアウトになるのか? などといったことを、事前に決めておくことが大事。
そうしておくことで、コーディングの作業がスムーズに進む。
CSS Nite LP Disc3 Part.1
昨日、CSS Nite LP,Disc3 -Coder's High-に出席してきました。
今回の目玉は何といっても、LIVEコーディング!
まずはそのレポートから…

LIVEコーディングを行ったのは、アンカーテクノロジーの神森勉さんと、ロクナナの河内正紀さん。
全く対照的な方法でコーディングを実演されたのが、とても面白かったです。

●神森勉さんの場合

ほぼDreamweaverのデザインビューのみでの作業。
それにキーボードをあまり使わず、マウス操作のみで…
マウス操作を極めていらっしゃるので、操作に全く淀みがない!

簡単な作業の流れ

1.用意されたテキストを、デザインビューにコピペ。
2.次に、マークアップ作業に入る。
3.見出し、段落などの作業を終わったら、divタグを挿入
4.そして、CSSの記述に入っていく

印象に残ったのは、神森さんの「私は、極度の面倒くさがり屋」というお言葉。
こことここのアキの数値は幾つというのを、紙などには書かないということでした。
紙に書く作業が面倒なので、デザインカンプ(PNGファイル)にガイドラインを引き、その数値をもとにコーディング作業をなさっていました。

神森さんでも苦労なさっているのが、命名とマークアップの仕方だそうです。
どういった名前をつけるのか? ここは見出しにするのか、リストにするのか?

いろいろなサイトを見て、「こういった名前の付け方いいなぁ」とかを常に参考になさっているみたいです。

●河内正紀さんの場合

突然の提案で、bAの小久保さんと太田さんに挟まれる形でステージでコーディング作業をすることになった河内さん。
かなり緊張なさっていました。

神森さんとは対照的に、ほぼコードビューのみでの作業。
そして、パーツ毎に作業を行うといった形式でした。

簡単な作業の流れ

1.必要なフォルダ、ファイル(中身は空)を作成する
2.CSSファイルなどをリンクさせる
3.最初にdivタグを作成
4.divタグ毎に、テキストを打ち、マークアップし、スタイルを割り当てる

河内さんの場合は、カンプにガイドを引いて、そこから数値を割り出すのではなく、その都度ものさしツールや選択範囲ツールを使って、数値を出しコーディングをしていくといったものでした。

河内さんのセッションで印象に残ったのは、デザイン(カンプ)を見て、規則性を見出すというものでした。

ここは何故こういうデザインなのか? 文章が増えた場合はどうなるのだろう?

こういったことを事前に考えた上で、コーディングの作業に入っているということでした。

※全く対照的な方法で取り組んでおられたお二人。それぞれ、自分なりの作業パターンを確立されていらっしゃいました。
私も自分なりの方法を確立したいと思ったセッションでした。
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。