忍者ブログ

World of granshe.

HTMLやCSS、JavaScriptに関する話題を中心に、Web制作について知ったこと、覚えておきたいことをメモしておく個人的スペースです。
[1] [2] [3] [4] [5] [6] [7] [8] [9

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

今どき、『正しいHTMLを学びたい』と思っている人って、いるんでしょうか?

今、会社の新卒研修の手伝いをしています。
個人的な思惑としては、『HTMLに関することを教えたいんだ!』と思って引き受けたんですが、
結果的にやってることの半分以上が講義内容の調整だったりして、若干自分の意図としてはズレを感じざるを得ませんが(笑)

まぁ、それはおいといて。

私がHTMLに触れ始めたころ(10年位前ですかね)は、『ブログ』という概念はありましたが、
今では当たり前になっているTwitterはもちろん、SNSもありませんでした。
(SNSは当時私が知らなかっただけで、存在自体はあったのかもしれませんが)

昔は、『何か情報を発信したい』とき、
『ホームページを作る』の選択肢が一番、選択として、可能性が高かったように思います。

今は、ブログのように、物理的にHTMLを作る方法ではなく、
TwitterやFacebookなど、『自分はコンテンツを発信するだけ』のサービスがメジャーです。

『何か情報を発信したい』=『ホームページを作る』ということが成り立たなくなっているのです。

その影響もあってか、今、Web制作会社を目指す人が増えていない、という話も聞いたことがあります。


そんな中で、

今どき、『正しいHTMLを学びたい』と思っている人って、いるんでしょうか?

と、先日ふと思ったので、書いてみました。

※一応、ここでいう『正しいHTML』とは、
 デザインに影響されず、Webサイトに見合ったタグ付けが行われているHTML を指します。



私は『正しいHTMLを学びたい』と思っていますし、
これから『正しいHTMLを学びたい』人がいるなら、自分の持っている知識を伝えたい、と思っています。

ただ、その中で『HTMLを正しく書くこと』のメリットを伝えるのが、なかなか難しいと感じています。

『Webサイトが作れる』ことと、『HTMLが正しく書ける』というのはイコールではありません。
極端を言えば、HTMLなんか理解していなくてもWebサイトは作れてしまうのですから。

HTMLのルールは昔からあるにもかかわらず、
そのルールに従わなくても、Webサイトを作ることができてしまう。

ルールはあるが、ルール違反に対する罰則がない。

HTMLというマークアップ言語は、本当に特異な存在だと思います。


私は、HTMLにはじめて触れたときに、
もっと詳しく知りたい、ルールを知りたい、本当の書き方を知りたい。
と、自然と感じました。

自分が何かに対して興味を持ったとき、
それをより深く知りたい、と思うのは、ごく普通の流れだと思うのですが、
普通、はあくまで私にとっての『普通』であって、すべての人がそうであるとは限りません。

それは、あくまで感情論に過ぎなくて、
『なんで知る必要があるの?』と聞かれると、理論的に答えを導き出すのが難しい。



HTMLを知らない人に、HTMLの楽しさを教えることができたら。
マークアップって、本当に楽しいんですよね。

需要があるなら、そういうことをしてみたいと、強く願ってはいるのですが。
PR

いい感じでJQueryを利用しているサイト:トヨタ自動車株式会社

またまた久しぶりの更新に;;

と思っていたけどひと月経っていませんでしたね。
4月~5末にかけて絶望的な案件がひたすら続いていたのですが、、、
ようやく終わりが見えてきたところです。

6月からは新卒さんが入ってくる予定なので、教育係になれたらいいなー。
人に何かを伝える、教えるということにとても興味があるので、できればかかわりたい分野です。



また前置きが長くなりましたが、、、
先日、職場のチームリーダーからトヨタ自動車(本社)のサイトがいい感じだと教えてもらったので分析してみました。



トヨタ自動車株式会社 公式企業サイト

http://www.toyota.co.jp/

JQueryがいい感じで利用されているサイトです。


プラグイン解説:

sweetPages jQuery plugin

ページ内の「おすすめコンテンツ」ページネーションに使用しています。
上記のデモページにはない「戻る」「進む」ボタンと、Lightboxによるコンテンツ全表示の機能を加えていますね。

元のJSを解析する時間がなかったので、
「戻る」「進む」機能を付与できるスクリプトを記載してくださっているサイトを掲載しておきます。

Make jQuery button for Sweetpages(英語)
とりあえず、ページ内に張ってあるスクリプトをJSに入れ込めば動いてくれる模様。
あとはCSSなどの調整ですね。

ついでに、試しに実装してみたデモURLも乗せておきますね。
http://www.granshe.com/ex/jsdemo01/


FancyBox

ライトボックス部分にはFancyBoxを使用。

グローバルナビゲーションの「クルマ情報」「テクノロジー」などをクリックすると、フキダシ形式でリンクバナーが表示されます。
フキダシの画像がメニューごとに変化している箇所は、Lightbox側で出し分けているわけではなく、
コンテンツはインラインに記述しておき、クリック時に表示されるように指定しているようです。


DD_belatedPNG_0.0.8a.js

IEで透過PNGを表示させるためのスクリプト。
Conditional Comments(条件付コメント)を用いてIE6のみに読み込ませています。


<meta http-equiv="X-UA-Compatible" content="IE=8,chrome=1">

今さらかもしれませんが、「Google Chrome Frame」というテクノロジーを駆使して、IEでChromeと同じエンジンを使用できるようにする記載のようです。
(今回はじめて知りました・・・)

「Google Chrome Frame」とは、
オープンソースのプラグインで、Chromeのオープンウェブ技術とJSエンジンをIEに搭載できるようになるもの。
・IEが対応していないHTML5のCanvas機能などに対応できる。
・JSのパフォーマンスがあがって使用感が早くなる。
だとか(ざっと訳したので間違いあればご指摘ください)。

※本家版(英語)は下記です。
http://code.google.com/intl/ja/chrome/chromeframe/

ちなみに、ユーザが「Google Chrome Frame」をインストールしていなければ、上記のmetaを入れても特に何も起きません。




リーダーによると、各ボタン画像がいちいち大きいのは、
スマートフォンで見る際にも押しやすいように配慮されているのでは。とのことでした。

案件がぐだぐだで新しい技術を調べることもほとんどできなかったので、
こうやってサイトを分析すると勉強になることが多いです。


ただ唯一の欠点は、JSを切ると何も表示されなくなるところでしょうか・・・。
SSIのようにJSを用いている部分もありますし、
JSOFFの環境で表示が崩れるくらいなら、何も表示させないほうが良いのでは、という判断でしょうか。


Webサイト構築メモ CSS設計について

2ヶ月ぶりの更新に・・・。

商品としてのWebサイトを構築していく中で、
作業の手戻りや、「ここをこうしておけばよかった!」ということが良く発生するので、
これから使うべく自分ルールをメモ。


CSSは、基本ルール+拡張ルールで作る。

各タグに、基本的なルールをつけます。
h1の見た目、pのマージン・行間など、タグに基本的なルールをつけた後、
同様のルールを別のクラスにもつけます。

制作をしていく中で、マークアップとしてはh2だけれど、見た目としてはh1、大見出しとして見せたいことがあると思います。
そのような時、タグに対してしかスタイルをつけていないと、「見た目」という観点から、本当はh2の箇所をh1としてマークアップしなければなりません。
(現場では、SEO対策だったり、デザインを優先させるためにマークアップを犠牲にしなければならないことがよく起こります。)
それを解消するため、タグのほかに、別個、クラスにも同様のスタイルを適用しておきます。


ソース例:
h2,
.heading02
{ selector:property; }

クラス名のほうにはタグ固有のスタイルを打ち消す記述が必要になります。
多少冗長になるのですが、個人的にあまりクラスやIDをつけたくないので・・・。

また、
#contents .section .heading02
というように、子孫セレクタを使って書かないように心がける。
div.section h2.heading02
タグ名+クラス名という組み合わせでも書かない。
汎用性を持たせるためです。


印刷時、残しておきたいものは画像(imgタグ)で生成

CSSで背景画像として作ったものは、基本的に印刷画面で表示されません。
コンテンツの中で、情報として必要なものは必ず画像化しておくこと。
リストのビュレット(●とか■)を背景画像にしているときは、
印刷用CSSでlist-style-imageで指定をすると、表示してくれるようです。


役に立つdisplay:inline-blockとheight:1%

floatやpositionを使うコンテンツには何かと上記を指定することが多いです。(マイナーかも。うちの会社ではほとんどお目にかかれず。)
以前、慣れないzoomプロパティを使って構築をしたら表示崩れがひどかったので、以後使っていません。(こっちはうちの会社で多発してます。)
高さを固定する必要のないフロートコンテナに関しては、height1%を指定。
positio:relativeに指定したボックスに関しても、幅と高さを固定したくない場合は、height:1%で。
また、display:inline-blockもheight:1%;と同じように色んなところで使います。
IE6系にはさほど影響が出ず、Firefoxには効果てきめんなときが何度かあるので利用してます。


こういう時はどうしますか?の対応

  • 文字サイズが大きくなったら、文字の量が増えたら、この見出しはどうなるんだろう。
  • 画面サイズが大きいと、背景画像どうなるんだろう。

などの疑問を洗い出しておいて、先に聞いておくこと。
後からそういうことだったのか!となると、時間的にも、精神的にも負担がでかいです。

  • 文字が大きくなったらどうするか
  • 画面サイズが大きく(小さく)なったらどうするか
  • コンテンツの高さがウィンドウサイズより短かったらどうするか
  • 画像とテキストが横並びになるとき、テキストは回り込むか否か
  • 印刷CSSは作るか、作るならどこを印刷してどこを消すか

他、ちいさなことですが

  • どこがロールオーバーするか
  • フォントの指定があるか
  • 文字色・リンク色まわり

も大事です。


命名規則を揺らさない

基本的なことですが、CSSまた画像名も、命名規則を揺らさないこと。
構築前に「このルールでいく!」と決めたら、横道にそれないこと。
色んな名前のクラス・画像ファイルが混在して混乱のもとに。


特殊な指定はコメント入りの方がいいかも

私の場合のheight:1%にあたります。
たとえば、自分の書いたCSSで不具合があって、別の人に修正依頼が来るとき、
原因は分かったけれど、それが本当にいらないものなのかどうかは、設計した本人にしかわからないもの。
自分しかわからなさそうなプロパティの指定には、コメントを入れようかと思ってます。


ブラウザバグ関連もろもろ

よく悩まされるのは、背景画像リピート+コンテンツセンタリング。
Firefoxだと、センタリングしたときに絶妙(1pxレベル)な誤差が出るらしく、表示の調整にかなり苦労した覚えがあります。
・ちょっとズレても大丈夫なように、背景画像を余裕を持って指定しておく。
・Firefoxバージョン専用ハックを使ってごまかす。
ことで乗り切りました。

IE6のフロートマージン2倍バグはご周知されてる通りですね。
floatボックスにfloat側と同じmarginを指定する場合は、display:inlineで回避。

あとは、IE6にてマージン相殺のバグがあるので、
マージンは上下、左右のどちらかにしか指定しないようにするとか。

また、「スラッシュハック」なるものが社内でマイナー公開されていました。プロパティの前に『/』をつけることで、そのプロパティがIE6と IE7にしか聞かなくなるというスグレモノ。
でもまだ実践で使ったことないです



今日は時間がないのでここまで・・・。


今まで、『マークアップとデザインの分離』とは、ただ単に、
「太字にするためにstrongを使わない」
「目立たせるためにh1を使わない」
「CSSはHTMLに直書きせず、別ファイルで管理する」
ことだと思っていました(その意味も含まれると思いますが)。

商品としてのWebサイトを構築してきて、気付いたのは、
「マークアップに対してスタイルをつけるんだ」ということ。
スタイルのために、マークアップの妥当性を犠牲にしないということ。

もちろん、今までもそれを意識して作業してはいたけれど、
本当の意味で理解していなかったんだということに気付いたのです。

タグに対して固定のスタイルをつけてしまうと、デザインを見て、タグを入れるという作業になってしまう。
運用作業をこなす中で、『こういう見た目が欲しいから、このマークアップを使うしかないか。』と感じたことが何度もありました。

スタイルのことは考えず、マークアップしていって、相応のクラスをつけてデザインの調整をする。
マークアップしている間は、デザインのことは気にしなくていい。
デザインは後からクラス名をつけることによっていくらでも調整がきくのですから。
『マークアップとデザインの分離』ってこういうことなんだ、と今さらながら初めて理解できました。


今回のメモは、WebDesigning4月号のOOCSSの記事が発端でした。
その記事を見て、自分はこんな方向性でいきたいなと思ったのでメモしてみました。

知らない世界

こんな記事を発見。

クライアントからのムチャぶり迷言集
http://www.webcreatorbox.com/webinfo/clients-funny-requests/



これを見て、同じ会社で働くディレクターの人が言っていたことを思い出した。

「クライアントは、こちらの世界の状態だったり、こちらの仕事の内容を知らないことがある。
それはしょうがないこと。
でも、その溝を埋めようとしないのが許せなくて。」

と。


私は営業やディレクターのように最前線に立ってクライアントと向き合う立場じゃないから、具体的なことは分からないけれど、
その言葉からすると、
認識の違いは、直接会って話して、しっかり説明すれば、分かってもらえるものなのだと思う。
それができない状況っていうのは、ディレクターとしては、ほんとうに、一番苦しかったのかなと。


クライアントが、こちらの業界について無知なことは多々ある。
でも、逆に、Web制作会社のほうが、クライアントの業界に対して無知なことだってあると思う。

業界が違うんだから、考え方に違いがあるのはしょうがない。
普通の人間関係だってそうなんだから仕方ない。
他人の「自分ルール」なんて誰も知るわけがないんだから。


どうも、
「あんたんとこの商品金だして買ってるんだからね!ちゃんとサービスしてよね!」
という感じの、

クライアント>Web制作会社

という力関係になってしまいがちですが、
そんな関係だと、相乗効果は生まれないですよね。きっと。

理想論ではありますが、顔なじみのお得意様みたいな感じで、
互いに大切に思い、尊重しあう関係を気付けたら、長くお付き合いできて幸せになれるのかなと思います。

そうなるためには、まず前提として、
お互いの違いを見てみぬふりせず、意見を言い合って理解する努力が必要なのかな。
互いが一番大事にしていることを、互いに尊重して、守ってきているなら、
関係ってそう壊れることはないと思うのです。

IE6でタブブラウズ

今さら的な話題なんですが、今までIE6でタブブラウズできることを知らなかったのでメモ。

デスクトップサーチが一緒に入ってきてしまうのがちょっと邪魔なんですが、いい感じ。
デフォルトでタブが入っているブラウザに比べると使い勝手は悪いですが、
ないよりはましかなと思います。

MSN サーチ ツールバーのダウンロードページ

他、IEで使えるツールを2つ。


1.IE Developer Toolbar

IE版Firebugと呼ばれているものです。
見た感じ、WebDeveloperと同様の機能も搭載されています。
Firebugを使い慣れている身には、さほど操作性が良くないなあという気もしますが、
慣れてくればそうでもないのかなという感じ。
CSSの新規プロパティを追加できますが、色指定がショートハンドでできないのがちょっと不満。


2.DebugBar

IEエクステンションのひとつ。
日本語版もあるので、英語が苦手な人はこちらを。
「アイコンをドキュメント上にドラッグしてエレメントを指定」機能があるのが魅力。
ただ、「HTMLチェック」に表示される日本語の文字間が狭すぎて読めないのが欠点。


それぞれ長所短所があって、実務でどっちを使うか迷うところです、、、

ちなみに何でこんな記事を書いたかと言うと、
案件でIEを使わなきゃいけないと分かっていながら、
全然遣おうとしない自分がいるので、もうちょっと使いたくなるようにしよう、
と考えたからでございます。

プロフィール
名前: ゆーり
職業: コーダー(模索中
趣味: Web制作
自己紹介: 某Web製作会社の入社5年目のマークアップエンジニア。専門はHTMLとCSSとMT(自称)。
カレンダー
07« 2017/08 »09
S M T W T F S
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
ブログ内検索
忍者ブログ [PR]