Page Top

Firefox 画面が縦に長すぎると背景画像が切れる

August 22, 2014

今、ウェブページを利用してサイトの部分表示を行うエリアのテキストや画像の表示チェックをしているのですが、テストとして長~~~いコンテンツを入れてみたところ、Firefoxでだけで何故か背景画像(パターン指定)が切れます。その他のモダンブラウザや、ましてやIE6でも大丈夫ですのに、Firefoxでだけでこのようなバグが生じています。しかもFirefoxは最新版の分です。

調べた所、BLUE COMPLETE様の記事で「【Firefox】縦長のページで背景画像が切れてしまう件」を読ませていただき、どうやら要素の長さが32,000px以上になると背景画像が切れてしまうことがわかりました(32,000pxというのが微妙な数字です。)

その対処法としてJQueryを使用して要素の高さを取得し、その高さをJQueryでcss指定すれば良いはず?という風に書かれていましたので、確かめてみようと思い、色々JQueryで似たような動作のものを探してチャレンジしていましたが、ボックスは長くなっても背景画像はやはり切れたままで、もしかしてJQueryのcssが効いてないのではなくて、cssファイル自体の背景画像パターンボックスにheightを40000pxなど指定をしても、もしかすると駄目なのかも?と思い、ダイレクトにcssファイルの該当箇所にheight: 40000px;などと入れてみましたところ、背景画像はやはり切れていました。

ということで、現実的に、32000px以上の長さのコンテンツを1つの要素に入れるのは普通あまり無い事なので、これまで通りにしておきたいと思います。。

ちなみに、JQueryで似たような動作をするお手本として、Web Design Leavesさまの「jQuery を使って要素の高さを揃える」という記事がとても参考になりました。ありがとうございました。

宇宙から見た美しい地球

August 16, 2014

オーロラが神秘的で、美しすぎます。あと、雷も花火のようでとっても綺麗です。地球には様々な色が沢山あって、ほんとに美しい星ですね。

順列を求めなくても良かった話

August 13, 2014

日が空いてしまいましたが、前回ulとolの順列を求めて三千里でしたが、あの後、列が1列のものに対してulとolの順列を6階層、列が2列のものに対してulとolの順列を6階層、~~、列が5列のものに対してulとolの順列を6階層、と指定しなければならないことに気が付き・・、う~んこれは面倒だな・・何かもっと簡単な方法があるはずだ・・と、閃いたのが%指定でした。

ulもolもブロック要素で、デフォルトでposition:relativeですので、親要素に指定されたスタイルは子要素に継承されます。なので、親要素に%指定すれば、その親要素の中での%、その親要素の中の子要素の中での%、その子要素の中の子要素の中での%、と言う風に勝手にスタイルが継承されていき、詳細な指定は不要なのでした。

なぜ始めにこれを思いつかなかったのか・・。長いcssを書かずに済みました。

【追記】
と、思っていたのですが、liに対するスタイルがulとolとでそれぞれ異なるので、やはり順列を求めなければならないようです・・。親要素しか継承しないため、ulとolが交互入り混じった階層でのスタイルはやはり1つ1つ指定しなければなりません。。

CSSで文字列の折り返し

August 13, 2014

つい忘れてしまうcssのプロパティにword-breakがあります(以前はIEが独自採用したものですが、今はCSS3で各モダンブラウザに標準サポートされているようです)。これを使って、アルファベットなどの長い文字列(リンクなど)をレイアウトの幅に合わせて折り返すことが出来ます。

word-breakに対する値として、break-allを使用すると、単語の途中でも改行され、keep-allを使用すると、単語の途中では改行されず、単語の切れ目で改行されます。

自分用覚書でした。

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

August 7, 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