スポンサーサイト
上記の広告は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タグ毎に、テキストを打ち、マークアップし、スタイルを割り当てる

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

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

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

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

※全く対照的な方法で取り組んでおられたお二人。それぞれ、自分なりの作業パターンを確立されていらっしゃいました。
私も自分なりの方法を確立したいと思ったセッションでした。
CSS Nite LP Part7
CSS Nite LP2の最後のセッションは、境祐司さんの『アセット管理で実現するフルCSS』です。

アセットとは?

アセット(asset)…辞書で調べると「資産」、「財産」と書かれている。
主に金融業界で使われる用語。
最近ではWebサイトを構成する要素、素材のことも「アセット」と呼ばれるようになってきた。

リニューアル案件の場合

1.現状のサイトを分析する(これに時間をかける)
2.サイトをアセットに分けていく(headerとか)
3.それをパーツとして登録していく(テンプレート、ライブラリなど…)
4.ガイドラインの作成(DOCTYPEは? CSSハックは? など)
5.ガイドラインに沿ってサイトを構築

アセットに分ける&ガイドラインの作成

図式化した方がいい。
図式化すると、誰が見ても理解しやすくなる。
これにより、チーム内の意識の統一が図れる。

構築していく上で重要なこと

1.コーディング
2.検証(バリデート)
3.ブラウザプレビュー


この繰り返し! 検証作業の時間を必ず取る!

アセット管理のメリット

1.同じ作業を何度もしなくてもいい
2.単純なミスが減る
3.限られた時間を有効に使える
4.過去の経験をもとに、独自のノウハウを生み出せる

これにてCSS Nite LP2のレポート終了です。

本日、今年最後のCSS Niteです!
CSS Nite LP Part6
floatの使い方

floatを使うことによって、ブロックレベル要素を右や左へと自由に配置できるようになる。
ただし、後に続く要素はfloatを解除しない限り、ずっと回り込んでしまうので要注意!

floatを使ったら、かならずclaerを設定する!

positionの使い方
自分で基準点(0、0)を設定できる。何もしない状態では基準点(0、0)はページ左上になっている。
positionを使うことにより、文章構造の順番を変えて配置することができるようになる。

基準点を設定したい箇所で、position: relative;を設定してあげると、そこが基準点(0、0)になる。

floatとpositionを上手く使い分けてあげると、メンテナンスがしやすい

CSSハック

何でもかんでもCSSハックを使えばいいということではない。
まずはCSSハックを使わないことを考える

こもりさんのセッションのレポート終了です!
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。