●2016/04/07：即時関数で囲んで、グローバル変数を消しました。
JavaScriptとCSSを利用して、背景を作成します。
ページを開くたびに、背景の泡のような文字の配置が変わります。更新ボタンを押してみて下さい。→
泡は文字使用です。見本は「●」使用ですが、他の文字を使用しても、複数の文字を使用しても可です。
虹色のグラデーション背景は、CSSだけでの作成で、
ほんっとにはじめてのHTML5 から。
この
グラデーション背景自体はJavaScriptとは無関係なので使用しなくてもいいのですが、使用するうえでの注意点を解説。
私も悩んだので（笑）
グラデ背景は、divで作った領域内の背景で使用するには問題ありません。
しかしbody背景に使用する時、HTML5（ブラウザFirefoxではHTML4でも）では上記のサイトをそのままコピーすると、横のボーダーのような表示になります。
横に細長いグラデーションが連続して表示されるのです。これはbodyの中に、何も要素が無いからです。
空っぽのbodyに、divやimg等の要素が入ればグラデーションが表示されます。要素がスクロールしなければ全部見れないほどの量ならば、これで大丈夫です。
しかし！！
要素の量が全画面の縦幅に届かない量の時、グラデーションは要素の縦幅で終了してまた開始するという連続表示になって、とてもみっともないことになります。
それを回避するにはCSSで、body{height:100%;}指定ではなく、html{height:100%;}指定を入れること。
その説明は、
せかいや から。
ただこれにも欠点があります。訪問者のPCによって要素の縦幅が、画面内で全部見られるのかスクロールが必要なのか微妙な時。100%指定では、100%ごとにグラデーションが連続表示になるのです。
その解決策は、偶然発見しました。
CSSに背景画像固定指定の body{background-attachment:fixed;}を入れることです。これはbody内の要素の量に関係なく使用できます。
使いやすい方を使用して下さい。
ランダム配置の原本は
HIMAJINから。
文字サイズ変更の参考サイトは、
危ないとこ逝き隊の「星空」から。なお、このサイトはすでに閉鎖済みで、閉鎖してしまったサイトや、リニューアル前のサイトの状態を見る事が可能なウェブアーカイブサービスを利用して表示しています。