2008
olをulに
ol
だとリストマーカー周りがコントロールしづらいので。
こいつもjQueryで (JavaScriptの後半とCSSは これ と同じ)。
$(function() { $('ol').each(function() { $('<ul class="order"></ul>').insertAfter(this).append($.each($(this).children(), function(i) { return $(this).prepend('<span class="marker">' + (i + 1) + '.</span>'); })); $(this).remove(); }); $('span.marker').parent().parent().each(function() { var marker = $(this).children().children('span.marker'); var width = 0; marker.each(function() { width = Math.max(width, $(this).css('display', 'inline').width() - parseInt($(this).css('text-indent'))); }); var margin = (parseInt(marker.eq(0).css('margin-right')) + width) + 'px'; $(this).css('margin-left', margin); marker.width(width).css('margin-left', '-' + margin); }); });
2008/05/16 19:36 | code
アイコンとかを入れると狭くなる行間をいい感じに
要するに、height
とmargin
を足したものがline-height
と同じになっていればいい。
というわけで、jQueryでいい感じに (expression
でもいいけど)。
$(function() { if ($.browser.msie && $.browser.version < 7) { $('img.icon').each(function() { var margin = Math.max(0, (parseInt($(this).css('line-height')) - $(this).height()) / 2); $(this).css({ marginBottom: Math.ceil (margin) + 'px', marginTop: Math.floor (margin) + 'px' }); }); } });
img.icon { vertical-align: middle; }
ほげほげほげほげほげ<img class="icon" ... />
2008/05/15 11:22 | code
注釈リストとかのハンギングインデントをいい感じに
あるいは突き出しインデント。
「注1) ~」に合わせてtext-indent
を決め打ちしたはいいが「注10) ~」で破綻したり、「注10) ~」に合わせてmargin-left
やwidth
を決め打ちしたはいいが「※ ~」のときスカスカ、なんていうのはみっともない。
というわけで、jQueryでいい感じに。
$(function() { $('span.marker').parent().parent().each(function() { var marker = $(this).children().children('span.marker'); var width = 0; marker.each(function() { width = Math.max(width, $(this).css('display', 'inline').width() - parseInt($(this).css('text-indent'))); }); var margin = (parseInt(marker.eq(0).css('margin-right')) + width) + 'px'; $(this).css('margin-left', margin); marker.width(width).css('margin-left', '-' + margin); }); });
2008/05/14 22:20 | code
こんにちは、上山根 祐輔 (かみやまね ゆうすけ) です。東京を拠点に活動しているフリーランスのデザイナー、デベロッパー、あと何でも屋です。
というか、Fugue Icons の作者、と言ったら分かりやすいかも。