KIMUSON BLOG

きむそんの雑記ブログ

【開発日記】フロントエンド技術の総復習#6 「CSSで文字の装飾をやってみる」

この記事をシェアする

今日やったこと

今日でCSSの基礎は最後になります。

文字の装飾の一覧

今日は文字の装飾の一覧なるものを作ってみました。

今後自分が文字の装飾をしていく際の参考になればと思い頑張りました。

<!DOCTYPE html>
<html>
<head>
<title>デモページ</title>
<style>
body {
font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'MS Pゴシック','MS PGothic'  
}

.px {
  font-size: 15px
}
.em {
  font-size: 1.5em
}

#example1 {color: green}
#example2 {color: #FFC778}
#example3 {color: #f89174}

#aa {font-weight: bold}

#bb {font-style: italic}

#cc {text-decoration: underline}

#dd {text-decoration: line-through}

#ee {border: solid 2px skyblue;}

#ff {border: solid 2px skyblue;
  padding: 10px;}
  
.dotted_line {
  border: dotted 2px skyblue;
  }
.dashed_line {
  border: dashed 2px skyblue;}
#gg {padding: 10px}

.solid_line {
  border-top: solid 1px gray;
  border-bottom: solid 1px gray;
  /*上と下にグレイの1pxの線を引きます*/
  }
.dashed_line {
  border-top: dashed 1px skyblue;
  border-bottom: dashed 1px skyblue;
  /*上と下に水色の1pxの破線を引きます*/
}

#gg { border-left :solid 5px orange;
  border-bottom: solid 1px gray;
  padding: 10px
  /*余白をつけておきます*/}

#hh {
  /*以下縦書きの設定*/
  -webkit-writing-mode:vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  /*高さを指定*/
  width: 100%;
  height: 150px;
  }

.shadow {text-shadow: 1px 1px 2px silver;
    font-weight: bold;/*文字を太字にするとよりそれらしくなります*/}

</style>
</head>
<body>
<h1>文字の装飾一覧</h1>
<h2>フォントサイズ</h2>
<p>初期設定のフォントサイズ</p>
<p class="px">15pxにした場合</p>
<p class="em">1.5emにした場合</p>

<h2>文字色</h2>
<p>通常の場合</p>
<p id="example1">greenの場合</p>
<p id="example2">redの場合</p>
<p id="example3">blueの場合</p>

<h2>太字</h2>
<p id=aa>これは太字です</p>

<h2>斜体</h2>
<p id=bb>これは斜体です</p>

<h2>文字に下線を引く</h2>
<p id= cc>下線を引いてみました</p>

<h2>文字に取り消し線を引く</h2>
<p id= dd>これは取り消し線です。/p>

<h2>文字を枠で囲む</h2>
<p id= ee>この例文を枠で囲む</p>

<p id= ff>余白を付けて囲ってみる</p>

<h2>文字を点線・破線の枠で囲む</h2>
<p class="dotted_line">これは点線です</p>
<p class="dashed_line">これは破線です</p>

<h2>文字の上下に線を引く</h2>
<p class="solid_line">これは上下に線を引いてみる</p>
<p class="dashed_line">破線にした場合</p>

<h2>文字の左と下に線を引く</h2>
<p id= gg>見出しっぽくなった</p>

<h2>文字の縦書き</h2>
<p id= hh>縦書きは和風な雰囲気がする</p>

<h2>文字に影を付ける</h2>
<p class="shadow">影を付けてかっこよくする</p>

</body>
</html>

出力

f:id:samuraikid520:20180129213741p:plainf:id:samuraikid520:20180129213749p:plainf:id:samuraikid520:20180129213821p:plainf:id:samuraikid520:20180129213817p:plain

まとめ

ようやくCSSの基礎勉強が終わりました。
これからはいよいよJavaScriptなどの動的なアニメーションなどの実装をやっていこうと思います。