【CSS】transformを使用してページ下部に英字のテキストを傾けて固定表示する方法

1 コーディングテクニックの実装内容
2 コーディングテクニックの使いどころ
3 実装難易度・必要なスキル
4 CSS,JavaScriptの記述内容
5 実装のポイント

コーディングテクニックの実装内容

今回はWeb制作におけるテキストのテクニックに関する内容です。transformを使用してページ下部に英字のテキストを傾けて固定表示するテクニックを紹介します。デモページではGoogle Fontsを使用しています。JavaScriptは不使用なので簡単に実装できます。

コーディングテクニックの使いどころ

手軽に実装できる割にはインパクトのあるページに見せることができます。TOPページなら「TOP」、「INDEX」などと表示させることでページのナビゲーション的な役割を持たせることもできます。

実装難易度・必要なスキル

コーディングとjQueryの基礎的な知識があれば実務未経験のコーダー、マークアップエンジニア、Webデザイナー、エンジニア、副業の初心者など誰でも実装可能です。

実装所要時間は10分程度

>> DEMOはこちらから！（View Demo）

>> View Demo(English Page)

>> ページの読み込みが遅い場合はこちら

CSS,JavaScriptの記述内容

body {
  min-height: 1500px;
}

.wrap {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index:-1;
  user-select: none;
  pointer-events: none;
}

.title {
  font-size: 60vw;
  color: #03262f;
  font-family: 'Playfair Display';
  font-weight: 700;
  transform: rotate(-6deg) translateX(-10vw);
  letter-spacing: -45px;
}

@media screen and (max-width:640px){
  .title {
    font-size: 450px;
    letter-spacing: -15px;
    transform: rotate(-7deg) translateX(-120px) translateY(calc(100% - 99px));
  }
}