スキップしてメイン コンテンツに移動

些細な日常

ラベル(枠線)が付いた投稿を表示しています

すべて表示

CSSのfloatを使って背景や枠線が付かないとか画像や文章がはみ出すなんて場合の対処法

イメージ

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

サイトにジャンプリンク付きの目次を角丸の枠線や透過の背景色のデザインで設けるためにはどうするか

イメージ

インターネットでジャンプリンク付きの目次を設けたサイトをブログの記事などで良く見かけていた。 僕もブログに長文の記事を載せる際に見出しで細かく区切られているとそれぞれへ向けてジャンプリンク付きの目次を冒頭に設けておくのが素早く移動できて便利だし、訪問者にも好まれそうだとやってみたら気に入ってしまった。 コンテンツが上下に長いほどにジャンプリンク付きの目次がサイトに必要になって来る。 目次 目次のジャンプリンクのHTML 目次の枠線のデザインのCSS 枠線のCSSのサンプルコード 角丸のCSSのサンプルコード 目次の背景色のデザインのCSS 背景色のCSSのサンプルコード 透過のCSSのサンプルコード 目次の中寄せのデザイン ジャンプリンクのHTML 一つのページ内で移動するのも他のページへのリンクと同じで、リンクのaタグを使う。 リンク元のサンプルコード <a href="#heading1"…