Life is Tech! Lesson

オリジナル制作サンプル集

文字を縦書きにする
難易度：
プロパティ：writing-mode:verticle-rl
関連レッスン：Chapter 1 レッスン 1

できあがりイメージ

つくりかた

Step1
縦書きにする要素をHTMLから探す

HTML

<header>
  <h1>Mom's Bakery</h1>
</header>

このHTMLのheaderタグで囲まれているところに対し、CSSを反映させていきます。

Step2
文字をカタカナに変更する

縦書きにするので文字をカタカナに変更しましょう。

HTML

<header>
  <h1>マムズ<br>ベーカリー</h1>
</header>

横に並べるために<br>で改行もさせましょう。
アルファベットを縦書きにすると横向きの表示になります。

Step3
縦書きにする要素のCSSセレクタを探す

CSSのセレクタで h1 を探しましょう。

CSS

h1 {
  color: #ffffee;/* フォントの色 */
  font-size: 60px;/* フォントの大きさ */
  font-family: lobster;/* フォントの種類 */
  border-style: solid;/* 線の種類 */
  border-color: orange;/* 線の色 */
  border-width: 10px;/* 線の太さ */
  text-align: center;/* 文字・画像を中央にそろえる */
  border-radius: 90px;/* 枠線の角丸 */
  padding: 20px;/* 内側の余白 */
  margin: 30px;/* 外側の余白 */
}

サンプルでは h1 に指定しています。
カタカナはアルファベットより大きく見えるので、font-size を60px と小さくしています。

Step4
文章を縦書きにする

writing-mode プロパティを追加して縦書きの設定にします。

CSS

h1 {
  color: #ffffee;/* フォントの色 */
  font-size: 60px;/* フォントの大きさ */
  font-family: lobster;/* フォントの種類 */
  border-style: solid;/* 線の種類 */
  border-color: orange;/* 線の色 */
  border-width: 10px;/* 線の太さ */
  border-radius: 90px;/* 枠線の角丸 */
  padding: 20px;/* 内側の余白 */
  margin: 30px;/* 外側の余白 */
  writing-mode: vertical-rl;
}

writing-mode:vertical-rl;を追加して文章を縦書きにします。
サンプルでは縦書きにしたときに文頭がそろうようにしたいので、文字を中央にそろえる設定をしている textialign:center を削除します。

Step5
コードを書くかコピー＆ペーストする

CSS

writing-mode: vertical-rl;

コピーしたコードを目的の箇所にペースト（貼り付け）するか、直接書いてみましょう。

Step6
レイアウトを整える

margin プロパティを変更してレイアウトを整えます。

CSS

h1 {
  color: #ffffee;/* フォントの色 */
  font-size: 60px;/* フォントの大きさ */
  font-family: lobster;/* フォントの種類 */
  border-style: solid;/* 線の種類 */
  border-color: orange;/* 線の色 */
  border-width: 10px;/* 線の太さ */
  border-radius: 90px;/* 枠線の角丸 */
  padding: 20px;/* 内側の余白 */
  margin: auto;/* 外側の余白 */
  writing-mode: vertical-rl;
}

サンプルではh1が画面の中央にくるようにmargin を auto に指定します。
auto は要素（今回はh1）を自動で中央に配置してくれる設定です。

Step7
コードを書き換えるかコピー＆ペーストする

CSS

margin: auto;/* 外側の余白 */

コピーしたコードを目的の箇所にペースト（上書き貼り付け）するか、直接書き換えてみましょう。

Step8
今の見え方を確認する

文章が縦書きに変わっていたら次のステップに進みましょう。

Step9
枠を円形にする

枠を円形にするために padding と border-radius プロパティを変更します。

CSS

h1 {
  color: #ffffee;/* フォントの色 */
  font-size: 60px;/* フォントの大きさ */
  font-family: lobster;/* フォントの種類 */
  border-style: solid;/* 線の種類 */
  border-color: #ffffee;/* 線の色 */
  border-width: 10px;/* 線の太さ */
  border-radius: 50%;/* 枠線の角丸 */
  padding-top: 40px;
  padding-bottom: 40px;
  padding-left: 110px;
  padding-right: 110px;/* 内側の余白 */
  margin: auto;/* 外側の余白 */
  writing-mode: vertical-rl;
}

padding の値を変更して枠がだいたい正方形になるように調整します。
サンプルでは上下のpaddingを40pxに、左右を110pxに指定しています。
border-radiusを50%に指定すると全ての角が滑らかに丸まります。
値はpx以外にも%で指定することができます。

Step10
コードを書き換えるかコピー＆ペーストする

CSS

border-radius: 50%;/* 枠線の角丸 */
padding-top: 40px;
padding-bottom: 40px;
padding-left: 110px;
padding-right: 110px;/* 内側の余白 */

コピーしたコードを目的の箇所にペースト（上書き貼り付け）するか、直接書き換えてみましょう。

Step11
実際の見え方を確認する

文章が縦書きに変わっていたら完成です。

ページの先頭へ