Page Top

ulとolの6階層までの確率(組み合わせ)を考える

August 07, 2014

ulとolをウェブページや記事の本文内に記載しても、きちんとcss表示がなされるようにcssを用意しています。当初は第三階層まで準備できていれば大丈夫かな、と思っていましたが、念のため、第六階層まで用意しておく事にしました。

ulとolは各々入れ子にする事が出来るので(以下のように)、第六階層まで確率を考えねばなりません。
(例)
<ul>
 <li>第一階層。ここはul。</li>
 <li>第一階層。ここはul。
  <ol>
   <li>第二階層。ここはol。
    <ul>
     <li>第三階層。ここはul。</li>
     <li>第三階層。ここはul。</li>
    </ul>
   </li>
  </ol>
 </li>
</ul>

初めは第四階層まで自力で確率のパターンを考えていましたが、第三階層までは簡単で、第四階層も15パターンまで作成できたのですが、あと1パターンがどうしても分からず、夫に尋ねたところ、インターネットでそういうパターンを出してくれる計算機を使っては?とネットで検索してくれて、コンビネーションも出してくれるサイトに出会いました。

こちらがそのサイトです「Combinations and Permutations Calculator」。ちなみに、permutationって何でしょう?と意味がわからなかったので調べたところ、「permutation(s) and combination(s) 順列と組み合わせ.」という意味でした。
20140807_combinations.png

早速この計算機を使ってみました。ページの右側に「Short」や「Numbers」とあるので、今回は「Short」を選び、「Types to choose from?」の所でulとol用に「2」を入力し、「Number Chosen?」で第四階層を調べたかったので「4」を入力し、「Is Order Important?」で「Yes」、「Is Repetition allowed?」で「Yes」、すると、Permutationsの所に「16」と出てくるので、16パターンの組み合わせがある事がわかります。そして、組み合わせの具体的なリストを知りたいですので、「List Them」のところに「ul, ol」と入力し、テキストエリアの右側にある「csv」をクリックして、上にある「List」をクリックすると、以下の画像のようなポップアップウィンドウが出てくるので、テキストにカーソルをあて、「Ctrol」+「A」で全てを選択し、自分のエディターにペイスト(貼り付け)、で一件落着となりました。
20140807_combinations2.png

今回は第六階層までの組み合わせパターンを知りたかったので、こちらのサイト様には大変感謝でした。自力ではとても時間が掛かっていたことでしょう・・。と言いますか、無理だったでしょう・・。ありがたいことです。m(_ _)m

コーディングお役立ちサイト

August 07, 2014

リストの入れ子の階層を調べていたところ、「CodingMania」さんというコーディングのお役立ちサイトがあることを知りました。「コーディングマニアは、コーダーやWEBデザイナーが、効率よくコーディング作業が出来ることを目指したサイトです。」と副題にあるように、各項目をクリックすると、コーディング記述例が出てきます。全体的にシンプルにまとめられていて、該当項目にさっと目を通したい場合、とても便利だと思いました。自分用覚書です。

画像を使わないblockquoteのデザイン法

August 02, 2014

これまでblockquoteは、おたまじゃくしテキストを画像にし、cssで背景画像指定にして、引用の場合のデザインを作っていました。しかし、レイアウトの幅が色々可変される事を考えた場合、背景画像よりもテキストでデザイン出来た方がやはり便利だなと思ったので、サーチしてみたところ、「blockquoteタグをCSSだけで格好良いデザインにする【画像不要】」という記事を見つけました。お~!テキストだけのデザインでここまで出来るのだ!と感動しました。ポイントは、position: relative;、:beforeや :afterなどの擬似要素を使うことのようです。

しかし、IEの場合は、IE8からでしか擬似要素はサポートされていないので、IE7以下の場合、何も表示されなくなります(その他のモダンブラウザでは表示できる。)IE7の使用率が低ければ良いですが、そうで無い場合、やはり、せっかくなので引用デザインが適用されたものを見て欲しいと思ってしまいます。

そういうわけで、IE7は一体どれ程の割合で日本国内で使用されているのだろうと、疑問に思ったので調べた所、2014年7月において、2.44%、いらっしゃいました。by「彩雲 マーケットシェアチェックツール」より。また、はてなカウンターに至っては、2014年7月でIE7は5.97%もいらっしゃいました。結構高い割合でまだ使用されているようです。

ですので、モダンブラウザとIE8以上の場合は、擬似要素のテキスト版での表示が良いですが、IE7以下の場合、引用部分の左側だけおたまじゃくし文字画像を使っての表示、という振り分けが良いかなと考えています。

振り分けは、MTを使っているので、以下のように<MTSetVar>を使った振り分けも良いだろうし、
<!--[if IE 7]>
<MTSetVar name="browser_ie7" value="1">
<![endif]-->

CSSだけで振り分け、であれば、coliss様の記事の「IEの異なるバージョンごとにスタイルシートを適用する方法のおさらい」の方法でも良いかなと思いますし、旧来のIE7用ハックを使用という方法もあるかと思います。

相変わらず、自分用覚書でした。

日の入りが早くなりました

July 26, 2014

夏至に至っては、夜の9時過ぎに日の入りをしていた太陽ですが、最近はもう8時45分頃には、私達の場所からは日の入りをしている時間帯になりました。毎年夏至を過ぎると、太陽の沈む位置が次第と南側に移っていくのが、あ~暦の上ではまだ7月だけれども、太陽と言いますか地球と言いますか北半球はもう秋の準備を始めているのだな~と感じます。

夏ですが暖房を・・

July 25, 2014

6月末~7月初旬はもっと暑く、部屋の中の温度も30度になって、バテ気味でいましたが、ここ1週間ほど夏なのに珍しくお天気が悪く、寒い気温が続いています。今日は特に寒く感じ、7月ですが暖房を入れてしまいました・・!太陽の下に居れば暑いと思いますが、空気は冷たいです。バンクーバーエリアの夏は日本と比べて寒いとずっと思っていましたが、こんな寒い夏は初めてです。夜も毛布をかぶって寝ています。。暖房は消しますが。