CSS Niteビギナーズ(大阪版)に行ってきました

CSS Niteビギナーズ(大阪版)に行ってきました

記事一覧CSS Niteビギナーズ(大阪版)に行ってきました

今日は CSS Nite が主催する CSS Niteビギナーズ(大阪版)に参加してきました。私はシステム開発者よりなので、あまりフロント周りを触る機会はないと思っていましたが、モバイル中心の生活から脱却し、ここ 2 年ほどは PC Web をメインに触り始めたので基本だけでも抑えておく必要があります。

そこで、世の中の Web デザイナーや Web ディレクターと呼ばれる、クリエーターの人のビギナーレベルってどんなもんだろうと思って参加してきました。実際に、外部の会社にデザイン部分のみを依頼するときの参考にしたいと思ったからです。css のアンチパターンやテクニックなど、普段聞けない情報も聞けると好都合ですが。

セミナーは「現場のプロから学ぶXHTML+CSS」の本に沿って進められました。主に XHTML や CSS の基本的な部分の解説でしたが、章ごとにセッションも分かれていたので、後から復習はしやすそうです。簡単にポイントだけまとめたので、そこだけ書き残しておきます。

マークアップは、IE 以外のブラウザに合わせてから IE 調整をするのがベターなようです。一般的には IE 以外だと FireFox や Opera、Google Chrome、Safari など、CSS を素直に解釈するブラウザに合わせて作成し、その後に IE7 や IE6 の対応をしていくと効率がいいそうです。この辺は要件定義でどのブラウザまで対応するかをエンドユーザーに確認しておく必要がありますね。IE8 は私の中では無視でしたが、デザイナーの方々は既に意識しているそうです。

あとは、FireFox でマークアップするときは便利なアドオンを使おうということ。私はシステム開発者よりなので、「Live HTTP Headers」や「User Agent Switcher」も必須なのですが、マークアップの場合は「Web Developer」や「Firebug」が最低限あるといいようです。

Live HTTP Headers
User Agent Switcher
Web Developer
Firebug

全体的には、本当に XHTML や CSS の基本的な部分の説明でしたので、Web デザイナーだけでなく SE やプログラマーなど開発よりの人も最低限知っておくといい内容ってところでした。1 つだけ知らなかったことがあったのですが、div タグはボックス要素的な使い方をするものであって、div の中に直接文書などは定義してはいけないとのこと。このサイトも div タグのみで文章を挟んでいる箇所があるハズ・・・orz

ブラウザ依存については、モバイルの話も出ましたが、PC 向けのブラウザと同じく CSS をブラウザ別にしておけばいいようなことを言っていたような気がします。ドコモ(DoCoMo)は外部 CSS を読み込めないし、文章定義や種類が SoftBank や au と異なるのと、使えるタグも違うのでもっと大きな範囲の問題のような気もしますが。

セッションの中では、第 7 章の「山田あかね」さんの内容が私の実務に直結している部分があって良かったかな。プロジェクターの説明も、ブラウザとエディタを横並びにしていて見やすかったです。デスクトップの使い方は個性が出るので仕方ないところですが、自分に合っているとよりわかりやすくなりますね。あとは、第 8 章の「西畑一馬」さんの JavaScript のライブラリ紹介の中で、jQuery の ImageBox はポップウインドウよりいいなぁっと感じました。早速、導入したいと思います。

今回のセミナーを振り返ると、各セッションとも講演者の方の説明がうまいと感じました。プレゼン用の資料ももちろんキレイでわかりやすいですが、人に伝えるしゃべりの部分に惹きこまれました。あと、クリエイティヴ(クリエイティブ)の人たちだけあって、Mac でプレゼンされている方が多かったです。UNIX(FreeBSD)ベースだし、システム開発やサーバ構築する技術者も Mac が流行りつつあるもんなぁ。次は Mac ノート買ってみようかな。

最後に、今回のセミナーでも Dreamweaver についての話がいくつか出ていましたが、確かに Dreamweaver を使うことでマークアップの効率はかなり上がりそうな気がします。私みたいに秀丸エディタや Eclipse をメインに使っていると、マークアップに対してはそりゃ非効率ですね・・・。ただ、セミナーでも、ある講演者の方が言われていましたが、Dreamweaver のツールだけが使える人は困るということ。XHTML のタグや CSS の定義や構造を理解した上で使うべきツールだと思います。


参考カテゴリ

オススメ記事

最新の投稿やよく見られているのオススメ記事一覧です。

AmazonLinuxでEC2起動時にスワップ領域の割り当てに失敗

EC2 起動時のスワップ領域割り当てですが、これまでは以下の記事を参考に、/etc/rc.local を使って行っていました。 ・ Amazon EC2(Linux)のswap領域ベストプラクティス しかし、最近になって、EC2 イン...

>>記事を確認する

【5分でできる】Laravel5.4から5.5へバージョンアップ

Laravel5.5 がついにリリースされたので、5.4 ベースで作っていたものをバージョンアップしてみました。 composer.json の以下の部分を 5.5.* に変更するだけですが、依存関係のパッケージも問題なくアップデ...

>>記事を確認する

【30分でできる】AWSのEC2にgoofysを入れてS3をマウント

過去に携わったプロジェクトで、S3FS の通信状態が悪い時があるので、アプリ側のプログラムを AWS SDK を使ったものに置き換えていこうという施策がありました。 S3FS の導入には関わっていなかったので、導...

>>記事を確認する

【30分でできる】ぐるなびAPIで飲食店の店舗情報取得

過去に作成した「ぐるなびAPI」のプログラムや、ぐるなびの Web Service が新しくなったこともあり、API からの情報取得プログラムを書き換えてみました。 以前の記事は下記になります。 ・ ぐるなびAPIで...

>>記事を確認する

NginxのFastCGIキャッシュで白い画面がキャッシュされる

以前から、トップページにアクセスすると、レスポンスステータスは 200 で返ってくるのに、画面に何も表示されない現象が稀に見受けられたので調査してみました。 さすがに機会損失にも繋がるということで、...

>>記事を確認する

Laravel5.4の認証ユーザーのパスワードハッシュについて

Laravel で用意されている認証モジュールを利用する際、ユーザーモデル(User.php)経由で登録されるパスワードのハッシュ方法について調べてみました。 Laravel 上ではパスワード文字列を bcrypt() のヘルパー...

>>記事を確認する

Laravel5.4のコントローラコンストラクタでAuth::user()が取得できない

Laravel5.4 で認証を通したアクセスに対して、コントローラのコンストラクタでユーザモデルの値を取得しようと思ったら、なぜか Auth::user() の値が取得できなくて悩みました。 public function __construc...

>>記事を確認する

NginxのHSTS(HTTP Strict-Transport-Security)の設定

「Let's Encrypt」のおかげで、全サイト SSL 化していますが、これまで nginx の設定では、http のアクセスがあった場合に https に 301 リダイレクトさせていました。 この場合、Googlebot に http のアク...

>>記事を確認する

GoogleMapのAPIキーの認証情報にリファラURL設定

昔は API キーを指定することで、JavaScript で GoogleMap が表示できていましたが、何年か前に、そのキーに対して認証情報の追加が推奨されました。 新規で発行する場合は必須になっているかもしれませんが...

>>記事を確認する

【30分でできる】AmazonLinuxでApache2.4+php7.1+Laravel5.5

先日、「 VagrantでCentOS6.9のイメージを使う 」の通り、CentOS6.9 には Apache2.4 と PHP7.1 で Laravel のフレームワークが使える環境を構築しました。 ただ、将来的には AWS かつ Amazon Linux 上で動か...

>>記事を確認する