些細な日常

サイトのデザインでcssのfloat（浮遊）を使うと複数のコンテンツを両側に配置して一列に表示できる。しかし上手く行かない場合も多くて難しい。陥りがちな失敗を二つ挙げると背景や枠線が付かないのと画像や背景がはみ出すのとで、デザインを崩してしまうんだ。何とかならないかと考えながら対処法が見付かったので、纏めておきたい。floatで背景や枠線が付かなければoverflowのhiddenも使おう一文目
二文目
三文目
四文目 サンプルのソースコードhtml<div class="fbox"> <p>一文目<br>二文目<br>三文目<br>四文目</p> <img src="画像URL"> </div>css.fbox {border:2px #00008b soli…

サイトの表示速度を考えると画像が最も容量が大きくて支障を来し兼ねない。一枚で他の全てを平気で上回ったりもする。影響が非常に大きいので、載せるならば予め軽量化しておくには越さない。大きさを小さくリサイズしたり、データを高く圧縮したりする方法があってそうしたアプリやWebサービスを使うと良いと思う。ただし難しいのは画質だ。写真でも何でも画像は小さくリサイズしたり、高く圧縮したりすればするほどに画質を落とし易くてサイトのデザインが崩れて来てしまう。嘆かざるを得なくなるんだ。目次画像を最大限に軽量化するためにリサイズと圧縮の二つの方法の組み合わせる一回目の編集：アプリのPhotoshop Expressでリサイズする二回目の編集：WebサービスのTinyJPGで圧縮するホームページやブログで画像を載せる際には画質と容量の鬩ぎ合いが避けられなくて絶えず、最高のバランスを模索するように画像を望み通り…

インターネットでジャンプリンク付きの目次を設けたサイトをブログの記事などで良く見かけていた。
僕もブログに長文の記事を載せる際に見出しで細かく区切られているとそれぞれへ向けてジャンプリンク付きの目次を冒頭に設けておくのが素早く移動できて便利だし、訪問者にも好まれそうだとやってみたら気に入ってしまった。
コンテンツが上下に長いほどにジャンプリンク付きの目次がサイトに必要になって来る。

目次
ジャンプリンクのhtml枠線のデザインのcss枠線のcssのサンプルコード角丸のcssのサンプルコード背景色のデザインのcss背景色のCSSのサンプルコード透過のcssのサンプルコード目次の完成版のデザイン

ジャンプリンクのhtml
一つのページ内で移動するのも他のページへのリンクと同じで、リンクのaタグを使う。
リンク元のサンプルコード
<a href="#heading1">ジャンプ…