要素を右寄せ

CSSで要素を右寄せ

• CSSで右に寄せることができるプロパティ5選
  • text-align
  • margin
  • float
  • flex
  • position

text-alignプロパティで文章を右寄せ

• text-alignは、ブロック要素などの水平方向に対して配置を決めることができます
  1. text-align: right;を指定する
  2. inline要素の場合はdisplay: block;でブロックレベル要素に変更する

<p>text-alignで右寄せします！</p>
<span>インライン要素を、text-alignで右寄せします！</span>

/* text-alignで右寄せします。 */
p {
  text-align: right;
}

/* インラインの場合 */
span {
  text-align: right;
  display: block;
}

margin-left、margin-rightプロパティで文章を右寄せ

• margin-leftは、要素の左側に余白を指定します。対してmargin-rightは要素の右側に余白を指定します
  1. margin-right: 0;を指定する
  2. margin-left: auto;を指定する
  3. widthの値を設定する
  4. inline要素の場合はdisplay: block;でブロックレベル要素に変更する

<p>marginで右寄せします！</p>
<span>インライン要素を、marginで右寄せします！</span>

/* margin で右寄せします。 */
p {
 margin-right: 0;
 margin-left: auto;
 width: 30%;
}
span {
 margin-right: 0;
 margin-left: auto;
 width: 30%;
 display: block;
}

floatプロパティで文章を右寄せ

• floatプロパティは要素を浮遊させ、本来の場所から移動させることができます
  1. float: right;を指定する

<p>floatで右寄せします！</p>
<span>インライン要素を、floatで右寄せします！</span>

/* float で右寄せします。 */
p {
 float: right;
}
span {
 float: right;
}

flexプロパティで文章を右寄せ

• flexboxのプロパティの一つ、flex-endで右寄せにすることができます
  1. display: flex;を指定する
  2. justify-content: flex-end;を指定する

<p>flex-endで右寄せします！</p>
<span>インライン要素を、flex-endで右寄せします！</span>

/* flex で右寄せします。 */
p {
 display: flex;
 justify-content: flex-end;
}
span {
 display: flex;
 justify-content: flex-end;
}

positionで文章を右寄せ

• positionで要素を右寄せに配置することもできます。position は、top,left,right,bottomで最終的な位置を指定することができます
  1. 右寄せしたい要素の親要素にposition: relative;を指定する
  2. 右寄せしたい要素にposition: absolute;を指定する
  3. 配置したい位置へとtop:とright:の値を指定する

<div>
 <p>positionで右寄せします！</p>
 <span>インライン要素を、positionで右寄せします！</span>
</div>

/* position で右寄せします。 */
div {
 position: relative;
}
p {
 position: absolute;
 right: 0;
}
span {
 position: absolute;
 top: 30px;
 right: 0;
}

画像を右寄せ

• marginプロパティで画像を右に寄せる

 <img src="img/sample.png" alt="サンプル画像">
 <p>上の画像を右に寄せる</p>

/* 画像を右に寄せます */
img {
 width: 100%;
 height: 100%;
 max-width: 200px;
 margin-right: 0;
 margin-left: auto;
 display: block;
}
p {
 text-align: right;
}

flexプロパティで画像を右に寄せる

• 画像に対してもflexやpositionで右に寄せることができます

<div class="imgbox"> 
  <img src="images/sample.png" alt="サンプル画像">
  <p>上の画像を右に寄せる</p>
</div>

/* 画像をflexで右に寄せます */
.imgbox {
 display: flex;
 justify-content: flex-end;
}
img {
 width: 100%;
 height: 100%;
 max-width: 200px;
} {
 text-align: right;
}

positionプロパティで画像を右に寄せる

• positionに対しては、flexのときと同様に、親要素のdivタグに対してposition: relative;、子要素に対してposition:absolute;と位置を指定してあげます

<div class="imgbox"> 
  <img src="images/sample.png" alt="サンプル画像">
  <p>positionで画像を右に寄せる</p>
</div>

/* 画像をflexで右に寄せます */
.imgbox {
　position: relative;
}
img {
 width: 100%;
 height: auto;
 max-width: 200px;
 display: block;
 position: absolute;
 right: 0;
}

p {
 position: absolute;
 right: 0;
 top: 150px;
}

横並び

中央揃えの横並び

• flexプロパティを使って横並び

<div class="box">
 <div class="box__card">
  <div class="box__imgbox">
　　<img src="images/sample.png" alt="サンプル画像">
  </div>
  <p>要素を横並びにします。</p>
 </div>
 <div class="box__card">
  <div class="box__imgbox">
　　<img src="images/sample.png" alt="サンプル画像">
  </div>
  <p>要素を横並びにします。</p>
 </div>
 <div class="box__card">
  <div class="box__imgbox">
　　<img src="images/sample.png" alt="サンプル画像">
  </div>
  <p>要素を横並びにします。</p>
 </div>
</div>

/* 要素を横並びにします。 */
.box {
 display: flex;
 justify-content: center;
}
.box__card {
 margin-right: 20px;
}
.box__card:last-child {
 margin-right: 0;
}
img {
 width: 100%;
 height: 100%;
 max-width: 200px;
 display: block;
}
p {
 text-align: center;
}

右寄せで横並び

• • flexプロパティを使って横並び
• justify-content: flex-end;

.box {
  display: flex;
  justify-content: flex-end;
}
.box__card {
  margin-right: 20px;
}
.box__card:last-child {
  margin-right: 0;
}
img {
  width: 100%;
  height: 100%;
  max-width: 200px;
  display: block;
}
p {
  text-align: center;
}