5月2012
きゃぁー。またまたあこがれの勉強会CSS Nite行きました。今回は、シズオカで！
【2012年5月26日（土）静岡県コンベンションアーツセンター「グランシップ」にて】
CSS Nite in SHIZUOKA, Vol.3
ずばり、テーマはアクセシビリティ。「アクセシビリティ・アクセシビリティって10回言ってみて」って言われたらら、どきまぎしてしまいそうな舌かみワードですが、ユーザエクスペリエンスとか、ユーザビリティとか、横文字いっぱいで、ひえー、どえー、くぇー、とがんばって勉強してきました。
お休みには、視覚障害の方のパソコン講座のボランティアしている見習。LANケーブルを担いで走り回る一方で、たまーにですが、受講者の方の目の代わりで、パソコンの状態を読み上げたりします。「いま、画面、どうなってます？カーソルどこです？次、どこ押せばいいです」って聞かれても、「えぇぇぇ～と、あ、すみません、ブラウザ閉じてやり直させてくらさい…」と悲しい迷サポート力を発揮してしまうこと、しばしばしばしば。だれでも見やすいサイトって、重要だよねって、休日こそ痛感してました。
CSS Nite in Shizuoka Vol.3
そんなこんなで、アクセシビリティには、とくーに、関心があったので、どきどきと参加です。
いつものボランティアでも、かなりの方が、ぽちっとネットでお買い物とか、有料・無料のサービスをばりばり使っていたので、「アクセシビリティって、福祉ってだけの側面じゃないよね、うひひ。」と心の中の電卓がぱたぱたと繰り上がってました。今日の公演を聴いて、でも、ほんと、アクセシビリティって、「障害のある方のための」っていう形容詞がつくものじゃないのねと、メモとりまくりでした。
登壇者の方々のお話を聞いて「ふぅむ」って思ったのは、福祉とか、障害者のためって、カタヒジ張らないで、するーりとやっていかないとダメだよってこと。やっぱりお金もかかることだし、自分の利益に直結しないことは、「やりましょう！」といっても、なかなか…。オモシロがってやるくらいが丁度いいのかも。ゲームで、アイテムゲッ～トっっ!!!みたいなノリで。それに、ムツカシイ理論だけじゃなくて、作った張本人、このワタシが、使いやすいか、使いにくいかっていう、超個人的な感覚も大切かも。一日中、パスきり練習してて、マウスのドラックしすぎで、肘がしびれたよー、手が感覚ないよーってとき、使いにくいサイトじゃ、困るですし。
いいわけタイム
でも、ひとつだけ。ヨコモジ見ると、なぜーか、急に文字がかすんで見えちゃう見習にとって、アクセシビリティとか、英単語そのままっていうのは、アクセシビリティがあんまり…。ユーザビリティがちょっとイマイチかも。キモチが直帰しちゃいます。アクセシビリティのコンバージョンのためにも、「英語を目の前にすると、一時的な障害を持つ人」にとっても、もっと、使いやすい、分かりやすいコトバがあればなぁと、心底思っちゃいました。（って、ヒトのせいにしないで、もっと、おべんきょしなきゃダメってことだわね、反省、反省。）
そんなこんなで、土曜日の午後一日かけてのアクセシビリティ勉強会は、アクセシビリティ・スピリットがあふれる、楽しく（そしてとってもタメになる）時間でした。
まずは、自分にやれることから、できることから。今日のブログも、がんばって、キレイなコードで書くことからはじめます。（ここんとはstrongで囲っておかなきゃね。）
ということで、ガムばっていこー！
2012年5月27日11:04 AM|
カテゴリー：
勉強会,見習い奮闘記|
コメント
(0)
たくさんの階層があるサイトにかかわることになった、見習。どきどき、わくわくとコーディング開始。
と、最初にぶち当たった難題とは、何だい？ととぼける暇なく出くわしました。何題もの難題。その第一弾ですぅ。
つまーりは、たくさんのページがあるから、ナビゲーションも、多段階に…。ということで、マウスオーバーすると、その子カテゴリーが、ぱたぱたと出現するナビゲーションを作ってね、との指令です。
なんとなく、JQueryでできそう。ということで、必死で調べてみました。
で、あとはCSSですが、本日の指令は、上の階層は、キレイ目にみせたいので、画像を背景に置いて、置換したボタン。でも、下の階層は、どんどん内容が変更になるから、いちいち画像なんか作ってるヒマないし、テキストで対応ね、ってことになってます。
ということで、CSSをこねくり回して、なんとかできあがり。
コードはこんなのです。今日は、HTMLも、CSSも、Java Script（JQuery)もHTMLファイルの中に書いちゃいました。テヌキダァ。
HTML CSS JavaScript(JQuery)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-script-type" content="text/javascript" />
<script type="text/javascript" src="jstest/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">//<![CDATA[
$(function(){
$("ul.sub").hide();
$("ul.navi li").hover(function(){
$("ul:not(:animated)",this).slideDown("fast");
},
function(){
$("ul",this).slideUp("fast");
});
});
//]]>
</script>
<title>J Queryでぱたぱたメニュー</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
div#wrap {
width:600px;
margin:0 auto;
}
ul.navi li {
float:left;
width:150px;
height:49px;
list-style-type:none;
text-indent:-9999px;
}
a{
display:block;
width:100%;
height:100%;
border:none;
}
ul.navi {
zoom:1;
}
ul.navi:after{
height:0;
visibility:hidden;
content:".";
display:block;
clear:both;
}
#b01 a {
background-image:url(img/btn01.jpg);
background-position:0 0;
}
#b02 a {
background-image:url(img/btn02.jpg);
background-position:0 0;
}
#b03 a {
background-image:url(img/btn03.jpg);
background-position:0 0;
}
#b04 a {
background-image:url(img/btn04.jpg);
background-position:0 0;;
}
#b01 a:hover {
background-position:0 -50px;
}
#b02 a:hover {
background-position:0 -50px;
}
#b03 a:hover {
background-position:0 -50px;
}
#b04 a:hover {
background-position:0 -50px;
}
ul.navi li ul.sub{
position:absolute;
}
ul li ul.sub li{
height:30px;
float:none;
}
ul li#b01 ul li a{
background-image:none;
background-color:#eee;
text-indent:0;
text-align:center;
text-decoration:none;
line-height:30px;
border:1px solid #999;
width:148px;
color:#666;
}
ul li#b02 ul li a{
background-image:none;
background-color:#eee;
text-indent:0;
text-align:center;
text-decoration:none;
line-height:30px;
border:1px solid #999;
width:148px;
color:#666;
}
ul li#b03 ul li a{
background-image:none;
background-color:#eee;
text-indent:0;
text-align:center;
text-decoration:none;
line-height:30px;
border:1px solid #999;
width:148px;
color:#666;
}
ul li#b04 ul li a{
background-image:none;
background-color:#eee;
text-indent:0;
text-align:center;
text-decoration:none;
line-height:30px;
border:1px solid #999;
width:148px;
color:#666;
}
ul li#b01 ul li a:hover{
background-color:#999;
color:#fff;
}
ul li#b02 ul li a:hover{
background-color:#999;
color:#fff;
}
ul li#b03 ul li a:hover{
background-color:#999;
color:#fff;
}
ul li#b04 ul li a:hover{
background-color:#999;
color:#fff;
}
</style>
</head>
<body>
<div id="wrap">
<ul class="navi">
<li id="b01"><a href="#">ぱたぱた1号</a>
<ul class="sub"><li><a href="#">ぱたぱた1号の1号</a></li>
<li><a href="#">ぱたぱた1号の2号</a></li>
<li><a href="#">ぱたぱた1号の3号</a></li>
</ul>
</li>
<li id="b02"><a href="#">ぱたぱた2号</a>
<ul class="sub"><li><a href="#">ぱたぱた2号の1号</a></li>
<li><a href="#">ぱたぱた2号の2号</a></li>
<li><a href="#">ぱたぱた2号の3号</a></li>
</ul>
</li>
<li id="b03"><a href="#">ぱたぱた3号</a>
<ul class="sub"><li><a href="#">ぱたぱた3号の1号</a></li>
<li><a href="#">ぱたぱた3号の2号</a></li>
<li><a href="#">ぱたぱた3号の3号</a></li>
</ul>
</li>
<li id="b04"><a href="#">ぱたぱた4号</a>
<ul class="sub"><li><a href="#">ぱたぱた4号の1号</a></li>
<li><a href="#">ぱたぱた4号の2号</a></li>
<li><a href="#">ぱたぱた4号の3号</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
サンプルはこちら
どうかしらん。どきどき。
2012年5月26日12:10 AM|
カテゴリー：
HTMLとCSSのコード,Java ScriptとJ Query,見習い奮闘記|
コメント
(0)
ふだん、Dreamweaverで、かりかりとコーディングしてる見習。怪しい英語能力を持っているので、タグの入力とかでは、スペルミスが起こりがちです。できるだけ、ドリ様のコードヒントを使って、ミスを減らしてラクしようと、日々、カクサクしてます。
ちょっとでも、入力する文字を減らせば、ミスも減る。そう、単純に考える見習は、閉じタグを自動で入力してくれる機能には、感謝感謝です。
たとえば、<p>と入力したあとに、</とまで、入力すると、自動で</p>と補完してくれます。ここで、いきなり、思ったのと違う閉じタグが自動入力されると、だいたい、入力ミス。どっかで、入れ子になったタグが閉じ忘れてたり、なんかあるので、ミスにも気づけます。
さあ、</p>と入力されるだろう、と勢いよく、</と入力したら、</div>なんて、自動入力されて、「あいやー、どっか間違えてる！がびーん」となること、しばしばしばしば…。気づきたくなかったといえば、それまでだけど、傷口が早いうちに気づけるので、まあ、OKです。
そんなこんなで、心の中では、いつも、感謝しているドリ様の、もっとラクラク機能を発見です。（って、今頃？）
コレ、設定すると、<p>と入力するとき、最後の>を入力した瞬間に、</p>まで、一発入力です。<p></p>というように、セットで閉じタグまで、入力済みになります。まあ、使い方によっては、閉じタグを、自分でカットアンドペーストしてあげなければならないので、どっちがベンリかは、場合によるかもです。
でも、とくに、あらたにショートカット設定するとか、プラグイン入れるとかしないで、環境設定で変更するだけで、タグを入力するときの、キーストローク数が減るので、すごーい。メモメモですぅ。教えてくれた方、ありがとうございます（職場に向かって、お辞儀中）。
設定方法は、ごく簡単。「編集」→「環境設定」を選びます。
すると、環境設定の画面がでます。
環境設定画面
コードヒントのところを選ぶと、初期設定では、終了タグのところが、一番上の、「"</"を入力後」になっていますが、ここを上から2つ目、開始タグの">"の入力後に変更して、OKするだけ。たった、これだけ、わずか、10秒で、完了です。ぉぉぉぉおおお、こりゃ、ベンリですぅ。
これで、最速コーディングができるかしらん、とうれしくなる見習です。
「早くコーディングしてよ、見習さん。」と催促されないように、がんばりまっす。
2012年5月25日9:37 PM|
カテゴリー：
スクリーンショット,見習い奮闘記|
コメント
(0)
新しい記事 »
森歩き日記
自称パソプロ化計画
