REDLINE MAGAZINE | スペースは嫌、class付けるのも嫌な時用(追記有)REDLINE MAGAZINEトップページへ

すべてのエントリを見る

スペースは嫌、class付けるのも嫌な時用(追記有)

>>081210:追記 コメント欄にてもっといい書き方教えて頂きました!

タイトル、なんのこっちゃ?って感じなんですが、そういう時があるんです。例えば会社概要なんかをマークアップした時、定義リストとして書く際にdtに社名、所在地、電話番号・・・って入れるじゃないですか。そういう部分の元原稿って「社 名」みたいな感じで2文字の部分に予めスペースが入ってて見た目を整えてあるものが多いんですね。なんちゃって均等割り付けみたいな感じ。

ところがwebの場合、そういうのってhtmlに直接スペース入れられないじゃないですか。アクセシビリティ的にも文書的にも。もちろんデザイナ目線でのその部分の見た目を整えたい気持ちも分かるんですね。なのでCSSのletter-spacingで左右揃ってなくてもとりあえずなんとなく全部間隔あけとくか、チマチマと例外部分だけclass付けて左右がそれなりに揃うようにコントロールしてたんですけど、どうも要領悪い気がして・・・。

自分の場合、だいたいそういう部分は2文字、3文字、4文字が混在してるパターンが多いので、とりあえずそういうケースを想定してjQueryでやってみような発想に至りました。

んじゃjQueryでやってみよう

まず元のhtmlソース

<dl>
<dt>社名</dt>
<dd>ああああああああ</dd>
<dt>所在地</dt>
<dd>いいいいいいいい</dd>
<dt>電話番号</dt>
<dd>うううううううう</dd>
<dt>定休日</dt>
<dd>ええええええええ</dd>
<dt>地図</dt>
<dd>ええええええええ</dd>
</dl>

なんの変哲もない普通のマークアップ。続いてjavascript部分。

<script src="jquery.js" type="text/javascript"></script>
<script language="javascript"><!--
$(document).ready(function() {
$("dt").each(function(){
	if($(this).text().length == 2){
		$(this).css({"letter-spacing":"2em"});
	}else if($(this).text().length == 3){
		$(this).css({"letter-spacing":"0.5em"});
	}else{
		$(this).css({"letter-spacing":"0"});
	}	
  });	
});
--></script>

forとか使わなくてもjQueryにはeachというのがあるという事実を知ったのでそれを利用してdtを繰り返し処理。dtに入ってる文字数を数えて2文字ならletter-spacingを2emに、3文字ならletter-spacingを0.5em、4文字ならletter-spacingはなしにしましょうという作戦。

>>サンプルページ・その1(スタイルデフォなので分かりにくいかも)

>>サンプルページ・その2(それっぽく簡単なスタイルつけてみた)

で、うまくいったーって喜んでみたけど、IEさんだとなんか変。予定どおりじゃない。javascriptの事は勉強不足で分からないんド素人なので事情がよくわからんのだけど、これってIEに当たってるCSSスタイルから考えると$(this).text().lengthで取得予定のカウントが1多いの?それともこういう場合に$(this).text().lengthとかいう書き方で文字数カウントしようとする私の頭が沸いてるってことなんだろうか。他のやつ使わないとダメ?

んじゃ次、ブラウザを判別して頑張ってみる

ここまで来ると意地でもなんとかしたくなったのでjQueryでブラウザを判別する方法を探してみました。

>>jQueryで簡単UserAgent判別 - Webtech Walker

ブラウザのバージョンやOSは判別できないみたいとのことですが、IEかどうかだけ分かればいいのでこれを使ってみることに。

>>サンプルページ・その3

上のサンプル1.2に加えて上記サイトのブラウザ判別の部分をくっつけてみたんですね。

$(document).ready(function() {
$("dt").each(function(){
	if($(this).text().length == 2){
			$(this).css({"letter-spacing":"2em"});
		}else if($(this).text().length == 3){
			$(this).css({"letter-spacing":"0.5em"});
		}else{
			$(this).css({"letter-spacing":"0"});
		}
	
	if($.browser.msie)
		if($(this).text().length == 3){
			$(this).css({"letter-spacing":"2em"});
		}else if($(this).text().length == 4){
			$(this).css({"letter-spacing":"0.5em"});
		}else{
			$(this).css({"letter-spacing":"0"});
		}
  });	
});

結果としてはIEでもうまくいってるように見えるんだけど書き方とか合ってるかどうかは不明。if($.browser.msie)って{}で括らなくていいの・・・?謎。でもなんか動いてる。

もうちょっとまとめたい

上のソースだとなんか同じ記述が2回出てきてどうよと思ったのでもう少しだけまとめてみるように頑張る。

>>サンプルページ・その4

$(document).ready(function() {
$("dt").each(function(){
	if($(this).text().length == 2){
			$(this).css({"letter-spacing":"2em"});
		}else if($(this).text().length == 3){
			$(this).css({"letter-spacing":"0.5em"});
				if($.browser.msie)
				$(this).css({"letter-spacing":"2em"});
		}else if($(this).text().length == 4){
			$(this).css({"letter-spacing":"0"});
				if($.browser.msie)
				$(this).css({"letter-spacing":"0.5em"});
		}else{
			$(this).css({"letter-spacing":"0"});
		}
  });	
});

私の頭では、ここがわからんという部分

JS脳がない私から見てここがわからんかったっていう部分メモ。

「1減らす」ってしたかったけどやり方わからんかった

ブラウザ判別できるんだったら予めIEの時は数を1減らすっていう風にしておけばif($.browser.msie)の部分を何回も出現させなくて済むんじゃないの?と思ったけど書き方と入れる場所がよくわからんかった。

考えたのは、
if($.browser.msie)
$(this).text().length = $(this).text().length--;

とか
if($.browser.msie)
$(this).text().length = $(this).text().length - 1;

ってすればいいんかなって思ったんだけど、うまくいかなかった。1減らした値を代入したいっていう意味だったんだけど書き方が間違ってるのか入れる場所がおかしいのかうまくいかない。

if($.browser.msie)の部分

ここってなんで{ }いらんの?と思った。{ }で括っても動いたけど括らなくても動いた。どこまでがif($.browser.msie)の適応範囲だってどうやって決まってるんかよく分からない。よくわからんまま結果が先に出た感じ。次のifが出てくるまでって感じ?とか勝手に思ってる。

あ。適応範囲で思い出した。関係ないけど、変数の有効な範囲(スコープっていうの?)っていうのもいまいちよく分かってないん。リファレンス見た → そこに書いてあるソースの意味は分かった(ような気がした) → で?っていう所で思考停止。どんな時にその考え方が必要になってくるんかがよく分からん。

もっと根本的にここがわからんという部分

プログラミング全般って、まず最初に作りたいものをイメージして、そこから逆にどんな処理が必要になってくるのか辿っていくっていう考え方で合ってます?処理する方法を知るためにリファレンスでどんな事できるかある程度把握しておいて、あとはそれを組み合わせる、みたいなイメージなんだけど、なんかイマイチ自分の脳みそが進化しないのはその根底の考え方が間違ってるんじゃないだろうかと思う今日この頃。実務で何かそういう系の仕事があればもっと素早くレベル上がるんだろうな。必要に迫られてないから遅いわ・・・。

あーあと、私の場合、どうしてもCSSが好きだから自分がCSSを勉強してた時と比較して考えてしまうんだけど、HTMLにしろCSSにしろ、よく使うものって限られててとりあえずそれだけザックリ理解できたら細かいものとかはその都度調べながらとか、極論言うと分からない部分飛ばして自分ができる代替方法でなんとかしてしまえー効率悪いけど!みたいな考え方でも全然いけるんだけど、javascriptもそんな感じなんでしょうか。

今「なんかこんなんできた!スゲーー!」

半年後「もっといい書き方見つけたわ。私随分効率悪い書き方してたな」


CSSの時はそうだったんだけど、javascriptもこういう発想の流れになるのでしょうか。全然その域に達する気配がないんですけど。

081210:追記 更にまとまった最終版

またもやありがたいアドバイスをコメント頂きました。上で書いた「「1減らす」ってしたかったけどやり方わからんかった」についての解決方法。

>>サンプルページ・その5(これが決定版だ!バージョン)

$(document).ready(function() {
$("dt").each(function(){
	var strLength;
	if($.browser.msie)
		strtLength = $(this).text().length -1;
	else strtLength = $(this).text().length;
	if(strtLength == 2){
		$(this).css({"letter-spacing":"2em"});
	}else if(strtLength == 3){
		$(this).css({"letter-spacing":"0.5em"});
	}else{
		$(this).css({"letter-spacing":"0"});
	}
  });	
});

コメント欄で最初の書き方だとプロパティを書き換えようとしてしまっているのでうまくいかないのかも…とアドバイスもらってハッとしました。最初に考えてた$(this).text().length = $(this).text().length--;って確かによく考えればその通りだなーと。変な事してた。プロパティと値がごっちゃになってたんですね。つーか、言われてみれば気づく初歩的な事なんだよ。でも私にはそんな事すらササっと分からないんだよ。これが弱点なんだな・・・。もっと勉強しまつ。slowbirdsさん、ありがとうございました!

<< jQueryでボックスを上下左右中央に簡単配置 | jQueryのスルスルスクロールを指定1つでバシバシ使う >>

トラックバック

このエントリーのトラックバックURL:
http://redline.hippy.jp/cgi/mt/mt-tb.cgi/204

スペースは嫌、class付けるのも嫌な時用(追記有) へのトラックバック一覧

» 文字の均等割り付けを行うjQueryプラグイン jQuery.justify.js 送信元 php-tips
日本人は表組が大好きです。 クリスマスのチキンより表組みが好きなんです。(嘘 そんな表組の中で時折見かけるのが下表のようなデザイン。 jQuery(d...
Trackback time : 2009.12.05

コメント (6)

はじめまして、いつも読んで参考にさせていただいています。
>「1減らす」ってしたかったけどやり方わからんかった
>>
if($.browser.msie)
$(this).text().length = $(this).text().length--;
<<
に関しては、
eachの一番初めに
>>
var strLength;
if($.browser.msie) strtLength = $(this).text().length -1;
else strtLength = $(this).text().length;
<<
という形にしておいてその後の文字列の長さ判別は変数"strtLength"を使用して判別すればいいんではないでしょうか。
最初の書き方だとプロパティを書き換えようとしてしまっているのでうまくいかないのかも…

>slowbirdsさん、ありがとうございましたーー!
>最初の書き方だとプロパティを書き換えようとしてしまっているのでうまくいかないのかも…
この一文すごく納得でした。めっちゃありがとうございます。全然気づいてなかったというか、分かってなかったんだと思います。そうかそうかと目から鱗状態でした。お教え頂いた内容、追記しました。合ってるかな・・・。

今年もお世話になりっぱなしなのに、年の瀬にまたまた勉強になりました。使いこなせるかどうかは判りませんが本当に参考になります、ありがとうございます。

>mon-juさん、こんにちわ。
なんか私も最近ブログで他の方に教えていただいてばっかりで・・・記事書くごとにレベルアップさせて頂いてる感じ。。。来年は他の方にご迷惑かけないように頑張ります><

すごいです。
一人でわりとマークアップやデザインをしていることが多いので、この辺は割り切っていましたが、jQueryで可能!

もっと1デザイナーとしてjsにも踏み込んでいかないといけないですね(^^;

>Dancing Cloudさん
>この辺は割り切っていましたが
その割り切る気持ち、すごい分かりますww
私も自分だけで完結するパターンだと結構無難な方へ流れていく事多いですね。
javascript、全然分かってないけど楽しいです(n' ω 'n)
お互い頑張りましょう~!




※コメント欄に「<」「>」等を含むソースを記載する場合は実体参照に変換してください。

このページの一番上へ

その他の情報など

最近のコメント

PHP オブジェクト指向の勉強
  • Red - 2010.01.08
  • hogepage - 2010.01.21
  • Red - 2010.01.22
  • - 2011.11.27
  • houseiii - 2011.11.27
Fireworks トリミング画像を一括書出 CS4編
  • Iper - 2009.06.27
  • Red - 2009.06.27
  • mala - 2011.11.17
  • Red - 2011.11.18
jQueryでボックスを上下左右中央に簡単配置
overflow を使用したボックス背景のこと
  • - 2007.12.13
  • Red - 2007.12.13
  • - 2007.12.13
  • Red - 2007.12.13
  • hj - 2011.09.23
IE6 → 透過PNG+overflow=混ぜるな危険(追記有)

メッセージを送る

こちらのメッセージ送信フォームは閉鎖させて頂きました。
御用の方は新しい方のブログ にコメント頂くか、 連絡用のフォーム もありますので、そちらからご連絡ください。