忍者ブログ

World of granshe.

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

[PR]

×

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

IE6でタブブラウズ

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

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

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

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


1.IE Developer Toolbar

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


2.DebugBar

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


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

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

PR

齟齬

Web制作の現場に入って4ヶ月半が過ぎました。

1年くらい仕事をしていたような気がするし、
あっという間に10月か、という感想でもあるけれど、
期間にしてみるとまだ4ヶ月ちょっとしか経ってないんだなとも思う。

その間に、たくさんの経験をさせてもらった。
自分が仕事の上ですべきことは、確実に、早く作業をすることなのだと思う。
それでもいまだにミスが減らなくて、仕事が早くなったという実感もほとんどないけど。

毎日遅くまで働いているけれど、働くことは楽しいし、周りは本当にいい人ばかりだ。

だけどときおり、
このままどこまでゆくのだろう、と思うことがある。


毎日、同じディレクターから違う更新が入り、
毎週、定期的に更新作業をこなし、
毎月、同じ箇所のHTMLをまるごと入れ替える仕事。

会社のための仕事。

でも、そこから得られることが全くないわけじゃない。
毎月同じ更新作業なのに、不思議なことに毎月新しい発見がある。
それでも、いつか終わりが来るんだろうとは思う。


たくさんのマークアップをしたい。
デザインを見た瞬間に、マークアップが一瞬にしてひらめくような、そんな体験をしたい。
それには、仕事以外でマークアップを学ばなければ。


新しい技術を学んでも、使える場所がなければ意味がない。
今の自分には、新しい技術より、新しいマークアップが必要だ。

説得力のあるマークアップを。
デザインを犠牲にしないマークアップを。
HTMLを汚さないマークアップを。

意識はしていても、仕事の中ではどうしても忘れてしまう。
今のマークアップのスピードだと、忘れざるをえない。
もっと早くマークアップして、もっと早くコーディングができたら、
もう一回り成長できるだろうと思う。

仕事に自分の趣味を合わせるんじゃなくて、
自分の趣味を会社の仕事に生かしていきたい。

jQueryでつくるアコーディオンメニューCookie機能付き

繁忙期真っ只中です。

シルバーウィークやらプラチナウィークやらが9月にあるそうですが、
仕事をするものからすれば嬉しくもあり、煩わしくもあり。

この5連休のために、連休前にどかっと仕事を終わらせなければならない、という反面、
連休明けのお仕事を連休中に(出勤して)終わらせてしまえる(笑)、という考え方もできるし。

どうなることやら。


ということで、(全然関係ない前置きでしたが、)
jQueryでつくるアコーディオンメニュー(Cookie機能付き)
のご紹介です。
デモを見る

参考にさせてもらったサイトは下記です。
jQueryを使用したCookie開閉保持メニューをよりjQueryっぽく書き直す


「アコーディオンメニュー」とは書いていますが、
実際にはメニューではなく、開閉式のコンテンツとして実装しました。
デフォルトでは詳細が隠れていて、ボタンを押すと詳細情報が表示される仕組みです。

あまり汎用性を考えず、
「このページにだけ組み込むためのスクリプト」として書いたため、(しかもそれを汎用的にする気力がないため、)
ちょっと扱いづらいかもしれません。

ブラウザを閉じた時点でcookieは消えるようにしています。
また、最初のアクセス時に一番上の項目が開いている状態になるようにしています。


JSルールとしては、

「ひらく」ボタン⇒ファイル名が○○_cl.拡張子
「ひらく」ボタンロールオーバー後⇒○○_cl_o.拡張子
「とじる」ボタン⇒○○_op.拡張子
「とじる」ボタンロールオーバー後⇒○○_op_o.拡張子

全部ひらく・とじるボタン⇒命名ルールは上に同じ。imgのidにallviewを指定。

開閉コンテンツ⇒div.detailの中に入れる

cookieの配列は現状ではa,b,c,d,e,f,gまではいっています。
aが最初の.section、bが2番目の.section。という感じで、cookieと同期しています。
項目を増やしたい場合は、アルファベットを増やせばOK。

※ただし、エクセルの列表示みたいにBa、Bbとかはできないハズ。なので、26項目が限界かなと思います。
※1と9は別のトリガーに使っているので、cookie配列の中に入れないで下さい。


本当はjQuery以外のライブラリは使いたくなかったけれど、
JSの技量が足りないために導入いたしました。
何度かもう実装できんかもと思ったけれど、無事できてよかったです。

マンガで分かるHTML5

1ヶ月ぶりの更新になってしまいました!

面白い記事を見つけたのでご紹介。

“Misunderstanding Markup” 日本語訳

HTML5の背景を知ってれば特に引っかかる部分はないのですが、
やっぱりちょっと技術者よりで分かりにくいなーってとこがあるので、
一連の流れを解釈してみたいと思います。



まず、
XHTML2.0のワーキンググループが終了になったけど、
それでXHTMLがなくなるわけじゃない
ということ。

XHTMLはHTMLをXML化したもので、その2つには共通点があります。
マンガ上では、HTMLをミルクXHTMLをチーズと表現して、
原料は同じ牛乳ですよ、と示唆してるんだと思います。

でも、XHTML2(マンガ上では豆乳)は牛乳ではなく大豆からできていて、
牛乳とよく似ているけれど、その構成要素、成分は全く異なります。
(記事上では、HTMLとXHTML2に共通点はない、としか言及していませんが、
おそらく、XHTMLとXHTML2も違うものなんだと言いたいのだと思います。)

だから、XHTML2がなくなるとしても、XHTML自体がなくなるわけではないと。


ここからどうHTML5につながるのかと言うと、
今まで、DOCTYPE宣言というものがありました。

HTMLだと
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTMLだと
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

というように、DOCTYPE宣言をつけていました。
これが、HTML5では
<!DOCTYPE html>
(たったこれだけ!)に統一。

つまり、HTML文法で書こうが、XHTML文法で書こうが、DOCTYPE宣言としては「<!DOCTYPE html>」だけ、
ということになります。HTML5は、HTMLの文法はもちろん、XHTMLの文法でも記述できるのです。




ということで、とっても自由度があがりそうですね。

ただ気になるのは、1枚のHTMLの中にHTML構文とXHTML構文が混ざっていた場合どうなるんだろう?
ということ。DOCTYPEではHTMLなのかXHTMLなのか判別できないから、
今まで記述エラーとされてきたものたちはスルーされていくようになるんだろうか?
α版のHTML5バリデータではふたつの文法が混在していても記述エラーとして出てきませんでした。)

といった疑問が。まあまだ草案だし、こんなこと考える段階じゃないか。


ちなみに、マンガ中に
「HTML5はサポートされてないじゃないか!」
という言葉が出てきますが、

たしかにHTML5から出現する新しいタグたち(<header><footer>等)はサポートされていません(IEでは)。
が、今まで作ってきたHTMLやXHTMLのDOCTYPEをHTML5のもの(<!DOCTYPE html>)にかえても、表示は全く問題ありません。

たぶんそういった意味合いで、「サポートってどんな意味だい?ちゃんと定義しようよ」
というフレーズが続いているのではないかと推測。
文法エラーは出ますけどね!


ということで、小難しい話でもマンガにすると少しはとっつきやすくなるなーと思いました。

現場2ヶ月目

これまた久しぶりの更新になってしまった・・・。

と言うのも、ここで書くようなうんちくネタが少ない、と言うのもありますが、
「ここで書ける」ネタがない、と言うのも少なからずあるわけで。

土曜日は案件で使えそうなJqueryアコーディオンメニュー+cookie機能の実装をがりがりとやってました。
あんまり熱中してたら午前3時を回ってしまい、起きたら13時でした(笑)

ついにプレ完成したので、あわよくばここで公開したい気持ちもあるんですが、
似たような機能を実案件で使うわけだし、案件はまだリリースされていないものなので、
ここに載せるのってあんまり良くないよなーとか考えると。

なんか趣味と仕事の両立ってむずかしいですね。

ページが公開されたらコードが公開されたも同然なので、
そのときはインタフェースを変えて、こっそりここに載せたいと思います。



配属2ヶ月目になって、
周りの同期が結構会社の暗部に目を向けはじめていて、
なんだか複雑な気分です。

そんなことでイライラするくらいなら、今の仕事を楽しめばいいのに・・・。と思います。

会社の仕組みには全然興味がない。
どこで働いたって、自分のやりたいことが出来るか否かは自分次第なので。


どんな仕事をしても、「自分に原因が起因している」と考えられるのは本当にトクだなと思ってます。
失敗したときに誰かのせいにしたって、反省点が見えなくて伸びしろが見つけられないですし。

別に、「失敗したら自分のせいだ!」って思い込むのがいいってワケではなくて、
そう思うことで「何が悪かったのか」「次はどうすればいいのか」考えられるのが大切だと思います。



HTML5の新しい草案が公開されるとかで、なんだか周りが盛り上がってますね。
XHTML2のワーキンググループも終了するようですし、CSS3も出てきています。

新しい流れに乗りながら、実務もこなしていければと思います。
プロフィール
名前: ゆーり
職業: コーダー(模索中
趣味: Web制作
自己紹介: 某Web製作会社の入社5年目のマークアップエンジニア。専門はHTMLとCSSとMT(自称)。
カレンダー
03« 2024/04 »05
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
ブログ内検索
忍者ブログ [PR]