WEBサイト制作で調べたことのメモ

CSS★画像を右寄せにする

投稿日：2018年12月14日

このページのもくじ

デフォルトは左寄せになっています。

（１）画像をブロック要素として囲む。
　　　ブロック要素= div・p・ul・li・dl など

ブロック要素に幅（width）を指定して画像に「margin-left: auto;」を指定

<HTML>

<div class="box"><img src="../jpg" alt="test" class="img-right"></div>

1	<div class="box"><img src="../jpg" alt="test" class="img-right"></div>

<CSS>

.box {width: 700px;}
.right {margin-left: auto;}

1 2	.box {width: 700px;} .right {margin-left: auto;}

＜デモ＞

◎右寄せのCSS設定

執筆者：kobato

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

: CSSでテーブルの背景色を交互に変える方法

今さらですが… CSSだけで表の背景色を交互に変える方法の覚え書き。 ※IE8以下のブラウザには対応していません。でも、マイクロソフトはIE8のサポートを終了したので、これからはどんどん使えそうです …

: リストマーカや番号の左側の隙間について

<ol>や<ul>といった箇条書きを指定した場合、リストマーカや番号の左側に大きな隙間ができてしまう。ここは、CSSで何も指定していなくても、ブラウザが気を利かせてある程度の …

リンク文字のホバーエフェクトでつまずいたときのメモ。 <HTML>

&lt;a href=“#" class="demo1"&gt;
リンクテキストのマウスオーバー
リンクテキストとマウスーバーの色を変更したいとき、
CSSで設定する方法は、よく使います。
&lt;/a&gt;

リンクテキストのマウスオーバー

リンクテキストとマウスーバーの色を変更したいとき、

CSSで設定する方法は、よく使います。

</a>

<CSS> [crayon-5d14a43 …

フロート解除の指定方法＜ＣＳＳ＞

.clearfix:after {
content:" ";
display:block;
clear:both;
}

.clearfix:after {

content:" ";

display:block;

clear:both;

}

＜ＨＴＭＬ＞

&lt;div class=“clarifix”&gt; &lt;/div&gt;

1	<div class=“clarifix”> </div>

cl …

: 二重の打ち消し線にする方法

あるサイトの更新で、日付を打ち消し線で消して、次の行に新しく正しい日付を掲載するよう修正してほしいとの要望がありました。打ち消し線は、cssでスタイルをもたせてやればスグにできます。 …