スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
CSS Nite Vol.15
今年最後のCSS Niteに行ってきました!

第一部 鷹野雅弘さんによる『CSSがCascadingたる“ゆえん”』

cascade…(階段状の)分かれ滝、滝状のもの

●CSSにはスタイルの適用に関する優先順位がある

1.!important
2.制作者の作ったスタイル
3.ユーザー(閲覧者)のスタイル
4.ブラウザのスタイル

●スタイルが重複した時の優先順位

益子貴寛さんの著書『Web標準の教科書』に詳しく書かれています。書籍をご覧ください。

●優先順位の値をDreamWeaverで確認できる

CSSパネル>CSSスタイル>現在>(選択範囲のサマリーの下のパネル)ルールの右側のボタン「選択したタグのルールを重ねて表示」をクリック

するとこのルールはファイル~に特異性●,▲,■で定義されていますと表示される

これを参考にすると良い

第二部 インフォアクシアの植木 真さんによる『義理と人情と男気のアクセシビリティ~サイト診断ココだけの裏話~』

内容を非公開でお願いしますとのことなので、今回はレポートをアップできません
スポンサーサイト
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ハックを使わないことを考える

こもりさんのセッションのレポート終了です!
CSS Nite LP Part5
次のセッションはこもりまさあきさんの『これならいける? DreamWeaverで始めるCSSレイアウト』です。

id、class、セレクタをしっかり理解する

id…一意(唯一のもの)でなければならない

class…ページ内にいくつあっても良い。共通している箇所に使うといい

セレクタ…HTMLの中の要素にスタイルを割り当てるもの

idの場合…#id名

classの場合….(ドット)class名

HTMLタグの場合…そのまま記述(body、h1など)

セレクタの種類

ユニバーサルセレクタ*(アスタリスク)を使用する
グループセレクタ…h1,h2,h3のように,(カンマ)で区切って使用する
子孫セレクタ…contents pのように半角スペースで区切って使用する

DreamWeaverでのセレクタ自動補完機能
DreamWeaverでは、自動的に子孫セレクタでセレクタを記述してくれる

例)#containerの#globalnaviのulのliにカーソルを立て、新規CSSルールのボタンをクリックすると、セレクタの位置に自動的に#container #globalnavi ul liと記述される

ただしモノによっては記述が長くなり、分かり辛くなってしまうので、そういう場合は省略して記述する。
省略する場合には、どこから記述するのかを、チーム内でルールを決めておく。

例)#globalnavi liなど

同じ名前のセレクタは作らない

同じ名前のセレクタは作らない方がいい。
後に書いたもので上書きされてしまう。
それを逆手にとってしまうという手もある。

ブラウザの初期値のリセット

HTMLでマークアップしたものをブラウザプレビューをすると、ブラウザ毎に違って表示されてしまう。
これは要素ごとに、ブラウザが持つ初期値で表示されてしまうためである。
どのブラウザでも同じに表示させたい場合は、まずブラウザの初期値をリセットする必要がある。

●スタイルの初期化

1.ユニバーサルセレクタ…*(アスタリスク)を使って、全ての値を初期化してしまうやり方

* {
margin : 0;
padding : 0;
}


2.グループセレクタ…使用している要素のみを初期化してしまうやり方

h1,h2,h3,p{
margin : 0;
padding : 0;
}
CSS Nite LP Part4
消えてしまった、五十嵐さんのセッションの続きです。

●DreamWeaverを使うメリットは以下の通り

1.コードビューで入力していく時に、HTMLやCSSの時と同様に、コードヒントが表示される。

2.データベースパネルからデータベースへの参照が出来る。

3.JavaScriptの時のビヘイビア機能と似たような、サーバービヘイビア機能がある。

4.デバッグ機能

●他の言語と比べて
ColdFusionは他の言語(PHP、Java、Perlなど)に比べ、とっつき易い。それはWEBの制作(HTML、JavaScriptなど)と似たところが多くあるからだろう。
そういう意味でも、プログラミングの入門としてはいいのではないだろうか。

でも、欠点もある。
それは、ColdFusionを使っている人の数が、少ないということ。
資料となる書籍なども他の言語に比べて、少ない。
そういう意味では、多少苦労するかもしれない。

何事も最初が大事だ。
最初に「つまらない」と思ってしまったら、後に続かない。
プログラミングの知識がそれほどなくても、かなりのものが作れてしまうColdFusionは凄い!
やる価値は十分にあります、これは!

これで五十嵐さんのセッション、終了です。
記事が消えた!
昨日書いた記事が消えていた。
昨夜FC2がサーバーのメンテナンスをしたみたいで、そのせいで消えたのだろうか…
はてなアンテナの方で、今日の午前2時46分にこのブログが更新されていたのを記録している。

それを見てみると、10月に書かれたコメントだとか、12月6日に書かれた記事を拾っている。
メチャクチャだ。

メンテナンス終了後、再構築をかけた。それで変な箇所を拾ったのだろうか…
そして最新の記事はなくなって…

他のブログに移行しようかなぁ…

●上記の件に関して…

朝方FC2に上記の件でメールを送ったら、返信がありました。
やはりメンテナンスを行った際に、データが飛んでしまったらしい…
そういう現象の方が、他にも何人もいらっしゃるみたいです。

バックアップを取って、それで復旧を試みたみたいなんですが…
復旧できたのが14日の昼くらいまでに書いた記事まで。
それ以降に書いた記事・コメントは消失してしまったみたいです。

そういうことでしたか、一応納得。
CSS Nite LP Part3
続いて受けたセッションは、五十嵐学さんの『DreamWeaverを使ったColdFusion体験』。

●ColdFusionとは?
Adobe(旧マクロメディア)が販売しているプログラム言語。各自のマシンではなく、サーバーにインストールして使用するもの。
レンタルサーバーでColdFusionがインストールされているところであれば、個人でインストールする必要はない。
Adobeの製品ということもあり、FlashやDreamWeaverとの連携が優れている

●ColdFusionで何が出来るの?
他のプログラム言語であるPHPやPerlと同じことが出来る。
(例)
・データベースとの連携
・メールの送受信
・データベースのデータをPDFに
・データベースのデータをグラフにして表示
・Flashのフォーム

●じゃあPHPやPerlでいいんじゃない?
プログラム初心者にとって、PHPやPerlはとても敷居が高い。
その点、ColdFusionはHTMLと同じような記述方法でプログラムを書いていくので、割とすんなり入りこみやすい。
加えてDreamWeaverを使うことで、作業の効率化を図れる。
ただしPHPやPerlに比べ、ColdFusionを使用している人の数が少ない

続く
CSS Nite LP Part2
明日に続くといっておきながら… 明後日になってしまいました。

●コンポーネントベースの設計

コンテンツ内でよくある組み合わせを、あらかじめパーツとして作成しておく。

それにより、パーツを組み合わせていくことで、コンテンツを作っていける。

●コンポーネントベースの設計の進め方

1.意識の共有
2.コンポーネントの制作
 ・コンポーネントリスト
 ・デザイン
 ・実装
 ・コンポーネントコレクション
3.コンテンツ仕様書をもとに、ページを展開していく

1.意識の共有
これがないと、複数人による同時作業が不可能になる。
後々の作業工程で、修正が多くなってしまう。
そのために、事前の詳細なサイト設計がなにより重要!
そのサイトの設計には、リストを作成するとよい。

リストの作成

1.HTMLに元々ある要素
2.過去の経験から必要だと思われる要素
3.既存のサイトから洗い出される要素

この3つをベースに、リストを作成していく。

●コンポーネントに定義するもの

・名前
・外観
・説明
・分類
・ソース

定義してコンポーネントは一箇所に集約して、誰もが必要なときに何時でも使えるようにしておくと便利。
形式としては、何でもいい。HTMLベースでもいいし、WordやExcelみたいな形式でもよい。
ただしテキストファイルは止めた方がいい
テキストベースだと、見た目(視覚的)がわからないので…

★必要だと思われる箇所を、テンプレート・ライブラリ・スニペットに登録しておくことで、再利用が可能になる。

コンポーネントベースのメリット
・手順(工数)が減る
・複数人による同時並行作業ができる
・コンポーネント単位での検証ができる

コンポーネントベースのデメリット
・コンポーネントベースに縛られてしまう
・慣れてしまうことによる不安感


これにて最初のセッションのレポート終了です。
CSS Nite LP Part.1
参加してきました、CSS Nite LP。
今回はDreamWeaverに特化したイベントでした。

最初のセッションは、ビジネスアーキテクツの小久保浩大郎さんの「コンポートベースのWebサイト設計と開発」でした。

この考えは、大規模サイト開発の経験から生まれたものみたいなのですが、何も大規模サイトに限った話ではありません。
色んなサイト制作に当てはめることが出来る話でした。

●何のためにCSSを使うのでしょう?
よく聞くフレーズとしては、「情報とデザインの分離」ではないでしょうか?

ブラウザでページを開いた状態で、CSSをオフにします。
でもこれってデザインされていないのでしょうか?

マークアップもデザイン
1.マークアップはただの文字列に意味づけをする行為
2.意味づけ→一定で普遍的でない
3.誰に、何を、どういう風に伝えるかを考えたもの

これってデザインなんじゃないでしょうか?

CSSとは、情報構造とデザイン(外観)の分離である!

HTML→Information Design(情報構造)
CSS→Visual Design(外観構造)

HTMLとCSSを分けることで、修正や管理がしやすくなり、セレクタを追加するだけで、再利用が可能になる。

●情報構造の抽象化
HTMLには情報の抽象化の仕組みがないので、コピー&ペーストをするしかない。
要素は「名前」がついていて「定義」されている(h1、h2など)
カスタムの名前の定義には、class属性を使う。

明日に続く…
CSS Nite LP
CSS Nite LP

いよいよ明日ですね。

Dreamweaver使いによる、Dreamweaver使いのための、Dreamweaverに特化したセミナーイベント


このイベントの詳細は、CSS Nite公式ブログをご覧ください。
PDF
●PDFとは?
Portable Document Formatの略。

●PDFの種類
Distiller PDF、Illustrator PDF、InDesign PDF、Mac OSX PDF、Extreme PDFなどの種類がある。
インターネット
今日のデザインワークスの授業でも出たお話。
インターネットはあまり使われていないんだよなぁ…

自分の場合は調べモノをするときに、ネットを使うことが多い。
友人のライターもネットで検索をすることが多いと言っていた。

でも普通の人は、あまりネットで調べ物をしないみたいだ。
それ以前にパソコンの電源を入れない人も多い。

前にコミュニティを作って運営していたんですが、毎日書き続けているのは自分とフリーライターの友人の二人だけだった。
それでコミュニティは閉鎖したんですけど…
パソコンで何かを書く(ブログなど)ということも、生活の一部に入っていない人がほとんど。
友人の中には、ネットに繋げていないとか、パソコン自体がないという人もいる。

自分には考えられない。
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。