HTML/CSSロゴ

JavaScript不要、HTML/CSSコピペで実現するスタイル10個まとめ

JavaScriptはとても便利で、Webページを構成する機能的なUIコンポーネントを自由に作成できます。ほんの数行のコードを加えることで、ブラウザにさまざまな機能を追加できます。
今回は、JavaScript を使わずにHTMLとCSSのみで実現できる、ウェブサイトでもよく利用するコンポーネントを10個まとめてご紹介します。

参照元@ : YOU MIGHT NOT NEED JAVASCRIPT - youmightnotneedjs.com

切り抜きテクニックをえらぶ

※ 左上のナビメニューより各ツールの詳細へ移動することもできます。

方法1 イメージスライダー

方法2 モーダルウィンドウ

方法3 ナビゲーション付カルーセル

方法4 カラーピッカー

方法5 ファイルアップロード

方法6 フォームバリデーション

方法7 スクロール・インディケーター

方法8 アコーディオン

方法9 タブ

方法10 ライトボックス

Component コンポーネント

Image Slider イメージスライダー

関連記事:

See the Pen CSS-Only Slider: youmightnotneedjs.com by Una Kravets (@una) on CodePen.

HTML

<div id="slider">
  <div id="slide-holder">
    <div class="slide">content1</div>
    <div class="slide">content2</div>
    <div class="slide">content3</div>
  </div>
</div>

SCSS

#slider {
    width: $slide-width;
    height: $slide-height;
    overflow: hidden;
}
.slide {
    width: $slide-width;
    height: $slide-height;
    float: left;
    position: relative;
}
#slide-holder {
  // すべてのスライドの幅がフィットするように調整
    width: 400%;
    position: relative;
    left: 0;
    will-change: transform;
    animation: scroller 10s infinite;
}
// 各スライド毎にステップが必要
@keyframes scroller {
  0% { transform: translateX(0); }
  33% { transform: translateX(-$slide-width); }
  66% { transform: translateX(-$slide-width*2); }
  100% { transform: translateX(0); }
}

対応ブラウザを確認:

Modal モーダルウィンドウ

関連記事:

See the Pen CSS-Only Modal: youmightnotneedjs.com by Una Kravets (@una) on CodePen.

HTML

<button>Click Me</button>
<div class="modal">
  <p>Hello Beautiful!</p>
</div>

SCSS

// 子要素がフォーカスされるまでモーダルは非表示
.modal {
  opacity: 0;
  visibility: hidden;
}
// modal fades in when button
// is in focus (i.e. clicked on)
button:focus + .modal {
  opacity: 1;
  visibility: visible;
}

View Switcher ナビゲーション付カルーセル

関連記事:

See the Pen CSS-Only Image Switcher: youmightnotneedjs.com by Una Kravets (@una) on CodePen.

HTML

<div id="slider">
    <!-- Slide Images -->
    <img id="slide-1" src="img1.jpg" alt="img description"/>
    <img id="slide-2" src="img2.jpg" alt="img description"/>
    <img id="slide-3" src="img3.jpg" alt="img description"/>
    <img id="slide-4" src="img4.jpg" alt="img description"/>
    <!-- Navigation for the slides -->
    <ul>
        <li><a href="#slide-1">1</a></li>
        <li><a href="#slide-2">2</a></li>
        <li><a href="#slide-3">3</a></li>
        <li><a href="#slide-4">4</a></li>
    </ul>
</div>

SCSS

#slider {
  img {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 200px;
    &:target {
      transition: all .5s ease-in-out;
    }
    &:not(:target),
    &:target ~ img#slide-4  {
      position: relative;
      opacity: 0;
    }
    // 初期設定で表示する
    &#slide-4 {
      position: absolute;
      opacity: 1;
     }
  }
}

対応ブラウザを確認:

Form フォーム

Color Picker カラーピッカー

関連記事:

See the Pen HTML Color Picker: youmightnotneedjs.com by Una Kravets (@una) on CodePen.

HTML

<form>
  <input type="color" aria-label="Select a color" />
</form>

対応ブラウザを確認:

File Upload ファイルアップロード

See the Pen HTML File Upload: youmightnotneedjs.com by Una Kravets (@una) on CodePen.

HTML

<form>
  <input type="file" accept="image/*" aria-label="select file to upload">
  <input type="submit">
</form>

Form Validation フォームバリデーション

関連記事:

See the Pen HTML Form Validation: youmightnotneedjs.com by Una Kravets (@una) on CodePen.

HTML

<!-- A few examples from links above -->
<form>
  <!-- Case insensitive binary choice -->
  <label for="item1">Would you prefer a banana or a cherry?</label>
  <input id="item1" pattern="[Bb]anana|[Cc]herry">
  <!-- Email validation -->
  <label for="item2">What's your e-mail?</label>
  <input id="item2" type="email" name="email">
  <!-- Max length validation -->
  <label for="item3">Leave a short message</label>
  <textarea id="item3" name="msg" maxlength="140" rows="5"></textarea>
  <!-- Numeric + Symbol pattern as required field -->
  <label for="item4">Phone Number (format: xxxx-xxx-xxxx):</label><br/>
  <input id="item4" type="tel" pattern="^\d{4}-\d{3}-\d{4}$" required >
  <button>Submit</button>
</form>

対応ブラウザを確認:

Interaction インタラクション

Scroll Indicator スクロール・インディケーター

関連記事:

See the Pen CSS Only Scroll Indicator: youmightnotneedjs.com by Una Kravets (@una) on CodePen.

HTML

<header class="scroller"></header>
<main>
    content must be longer than 100vh
</main>

SCSS

body {
    background: linear-gradient(to right top,
    $scroller-color 50%,
    $scroller-background 50%);
    background-size: 100% calc(100% - 100vh + #{$scroller-height});
    background-repeat: no-repeat;
}
body:before {
    content:'';
    position: fixed;
    top: $scroller-height;
    bottom: 0;
    width: 100%;
    z-index: -1;
    background: $body-background;
}

対応ブラウザを確認:

Navigation ナビゲーション

Accordion アコーディオン

関連記事:

See the Pen CSS Only Accordion: youmightnotneedjs.com by Una Kravets (@una) on CodePen.

HTML

<div class="togglebox">
  <input id="toggle1" type="radio" name="toggle" />
  <label for="toggle1">Label 1</label>
  <section id="content1">
    <p>Content for the first accordion</p>
  </section>
  <input id="toggle2" type="radio" name="toggle" />
  <label for="toggle2">Label 2</label>
  <section id="content2">
    <p>Content for the second accordion</p>
  </section>
  <input id="toggle3" type="radio" name="toggle" />
  <label for="toggle3">Label 3</label>
  <section id="content3">
    <p>Content for the third accordion</p>
  </section>
</div>

SCSS

// ラジオボタンを非表示にする
input[type="radio"] {
  position: absolute;
  opacity: 0;
  &:focus + label {
    color: black;
    background-color: wheat;
  }
}
// アコーディオン用のラベルをスタイリング
label {
  position: relative;
  display: block;
  cursor: pointer;
}
// アコーディオン用コンテンツをスタイリング
section {
  height: 0;
  transition: .3s all;
  overflow: hidden;
}
// ラベルをクリックしたらコンテンツを開く
#toggle1:checked ~ #content1,
#toggle2:checked ~ #content2,
#toggle3:checked ~ #content3,
#toggle4:checked ~ #content4 {
  // Transition Duration が適用されるように高さを調整
  // （Transition なしでは autoに適用できます。）
  height: 200px;
}

対応ブラウザを確認:

Tabs タブ

関連記事:

See the Pen CSS-Only Tabs: youmightnotneedjs.com by Una Kravets (@una) on CodePen.

HTML

<div class="tabs">
   <div class="tab">
       <input type="radio" name="tabgroup" id="tab-1" checked>
       <label for="tab-1">Label One</label>
       <div class="content">
          <p>Tab One Content</p>
       </div>
   </div>
   <div class="tab">
       <input type="radio" name="tabgroup" id="tab-2">
       <label for="tab-2">Label Two</label>
       <div class="content">
           <p>Tab Two Content</p>
       </div>
   </div>
    <div class="tab">
       <input type="radio" name="tabgroup" id="tab-3">
       <label for="tab-3">Label Three</label>
       <div class="content">
           <p>Tab Three Content</p>
       </div>
   </div>
</div>

SCSS

.tabs {
  position: relative;
  // すべてのタブグループの高さが揃う用に調整
  min-height: 200px;
}
.tab {
  float: left;
}
.tab label {
  // set label height
  top: 1em;
}
// ラジオボタンを視覚的に隠す
.tab [type=radio] {
  position: absolute;
  height: 0;
  width: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  &:focus + label {
    outline: 2px dotted black;
  }
}
.content {
  position: absolute;
  top: 1em; left: 0; right: 0; bottom: 0;
  opacity: 0;
}
[type=radio]:checked ~ label {
  z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
  z-index: 1;
  opacity: 1;
}

Lightbox ライトボックス

関連記事:

See the Pen CSS Only Lightbox: youmightnotneedjs.com by Una Kravets (@una) on CodePen.

HTML

<!-- thumbnail image wrapped in a link -->
<a href="#img1">
  <img src="img.jpg" class="thumbnail">
</a>
<!-- lightbox container hidden with CSS -->
<a href="#" class="lightbox" id="img1">
  <img src="img.jpg">
</a>

SCSS

$thumbnail-size: 40px;
$background-color: black;
.thumbnail {
  max-width: $thumbnail-size;
}
.lightbox {
  // Lightbox用イメージを隠す
    display: none;
    // Lightboxの位置とスタイル
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100%;
    text-align: center;
    top: 0;
    left: 0;
    background: $background-color;
}
.lightbox img {
    /// Pad the lightbox image
    max-width: 90%;
    max-height: 80%;
    margin-top: 2%;
}
.lightbox:target {
    // 初期設定のアウトラインを削除し、Lightboxを隠さないようにする。
    outline: none;
    display: block;
}
SPREAD THE LOVE