Web 開発者は、ワークフローを改善し、生活を楽にする方法を常に探しています。この記事では、日常の Web 開発タスクを合理化するのに役立つ 21 の便利な および コード スニペットを紹介します。これらのコード スニペットは実用的で時間を節約でき、ニーズに合わせて簡単にカスタマイズできます。 HTML CSS 実用的なコード スニペットのコレクションを発見する 1.レスポンシブナビゲーションメニュー レスポンシブ ナビゲーション メニューは、さまざまなデバイスでのシームレスなユーザー エクスペリエンスに不可欠です。レスポンシブ ナビゲーション メニューを作成するためのシンプルな HTML と CSS のスニペットを次に示します。   <nav class="navbar"> <a href="#home">Home</a> <a href="#about">About</a> <a href="#services">Services</a> <a href="#contact">Contact</a> </nav> .navbar { display: flex; justify-content: space-around; background-color: #333; padding: 1rem; } .navbar a { color: white; text-decoration: none; padding: 0.5rem; } .navbar a:hover { background-color: #ddd; color: black; }  2.CSSリセット CSS リセットを適用すると、さまざまなブラウザー間で Web サイトの外観に一貫性を持たせることができます。開始するための簡単な CSS リセット スニペットを次に示します。   * { margin: 0; padding: 0; box-sizing: border-box; }  3.要素を垂直方向と水平方向の中央に配置する Flexbox を使用して、コンテナー内で要素を垂直方向と水平方向の両方で簡単に中央揃えにします。   .container { display: flex; justify-content: center; align-items: center; height: 100vh; }  4. CSS ツールチップ HTML と CSS のみを使用して簡単なツールチップを作成します。   <span class="tooltip">Hover over me <span class="tooltiptext">Tooltip text</span> </span> .tooltip { position: relative; display: inline-block; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: #555; color: #fff; text-align: center; padding: 5px; border-radius: 6px; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -60px; opacity: 0; transition: opacity 0.3s; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; }  5.スタイリッシュなボタン 次のシンプルな CSS スニペットを使用して、ボタンにセンスを加えます。   .button { background-color: #4CAF50; border: none; color: white; text-align: center; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; padding: 10px 24px; border-radius: 8px; transition: background-color 0.3s; } .button:hover { background-color: #45a049; }  6. トップへのスムーズスクロール Web ページの上部に移動するためのスムーズ スクロール効果を実装します。   <a href="#top" class="scroll-to-top">Back to Top</a> html { scroll-behavior: smooth; } .scroll-to-top { position: fixed; bottom: 20px; right: 20px; text-decoration: none; background-color: #4CAF50; color: white; padding: 10px 15px; border-radius: 8px; }  7.レスポンシブ画像ギャラリー CSS グリッドを使用してレスポンシブ イメージ ギャラリーを作成します。   <div class="image-gallery"> <img src="image1.jpg" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> <img src="image3.jpg" alt="Image 3"> <img src="image4.jpg" alt="Image 4"> </div> .image-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-gap: 10px; } .image-gallery img { width: 100%; height: auto; }  8. 固定テーブル ヘッダー テーブル コンテンツをスクロールする間、テーブル ヘッダーを固定したままにします。   <table class="fixed-header"> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> </thead> <tbody>  </tbody> </table> .fixed-header { width: 100%; border-collapse: collapse; } .fixed-header thead { position: sticky; top: 0; background-color: #f1f1f1; }  9. フルスクリーンの背景画像 Web ページの全画面背景画像を設定します。   body { background-image: url('background.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; height: 100vh; }  10.スティッキーフッター ビューポートを埋めるのに十分なコンテンツがない場合でも、ページの下部にフッターを維持します。   <div class="page-container"> <div class="content-wrap">  </div> <footer>Footer content</footer> </div> .page-container { display: flex; flex-direction: column; min-height: 100vh; } .content-wrap { flex: 1; } footer { background-color: #f1f1f1; padding: 1rem; }  11.カードレイアウト Flexbox を使用して、コンテンツを紹介するための最新のカード レイアウトを作成します。   <div class="card"> <img src="image.jpg" alt="Card image"> <div class="card-content"> <h3>Card Title</h3> <p>Card description.</p> </div> </div> .card { display: flex; flex-direction: column; width: 300px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); border-radius: 8px; overflow: hidden; } .card img { width: 100%; height: auto; } .card-content { padding: 1rem; }  12.パンくずリスト HTML と CSS を使用して簡単なブレッドクラム ナビゲーションを作成します。   <nav class="breadcrumbs"> <a href="#home">Home</a> > <a href="#section1">Section 1</a> > <a href="#section2">Section 2</a> </nav> .breadcrumbs { padding: 1rem; } .breadcrumbs a { text-decoration: none; color: #3498db; } .breadcrumbs a:hover { text-decoration: underline; }  13.シンプルアコーディオン HTML と CSS を使用して簡単なアコーディオンを作成します。   <button class="accordion">Section 1</button> <div class="panel"> <p>Section 1 content.</p> </div> <button class="accordion">Section 2</button> <div class="panel"> <p>Section 2 content.</p> </div> .accordion { cursor: pointer; width: 100%; text-align: left; outline: none; transition: 0.4s; } .panel { display: none; overflow: hidden; transition: max-height 0.2s; }  14. シンプルなページネーション HTML と CSS を使用して簡単なページネーション ナビゲーションを作成します。   <nav class="pagination"><a href="#prev">« Prev</a> <a href="#1">1</a> <a href="#2">2</a> <a href="#3">3</a> <a href="#4">4</a> <a href="#next">Next »</a> </nav> .pagination { display: inline-block; padding: 1rem; } .pagination a { color: #3498db; float: left; padding: 8px 16px; text-decoration: none; transition: background-color .3s; border: 1px solid #ddd; } .pagination a:hover { background-color: #f1f1f1; } .pagination a.active { background-color: #3498db; color: white; border: 1px solid #3498db; }  15.レスポンシブビデオ埋め込み HTML と CSS を使用して、レスポンシブ ビデオ埋め込みを作成します。   <div class="video-container"> <iframe src="https://www.youtube.com/embed/your_video_id" frameborder="0" allowfullscreen></iframe> </div> .video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }  16.CSSローダー Web サイト用の単純な CSS ローダーを作成します。   <div class="loader"></div> .loader { border: 8px solid #f3f3f3; border-radius: 50%; border-top: 8px solid #3498db; width: 60px; height: 60px; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }  17.視差スクロール効果 シンプルなパララックス スクロール効果を Web ページに追加します。   <div class="parallax"></div> .parallax { background-image: url("your-image.jpg"); min-height: 500px; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; }  18. フレックスボックス グリッド システム Web サイト用の単純な Flexbox グリッド システムを作成します。   <div class="row"> <div class="col">Column 1</div> <div class="col">Column 2</div><div class="col">Column 3</div> </div> .row { display: flex; flex-wrap: wrap; margin-left: -15px; margin-right: -15px; } .col { flex: 1; padding-left: 15px; padding-right: 15px; }  19.アニメーションスクロールインジケーター アニメーション化されたスクロール インジケーターを作成して、ユーザーがどれだけスクロールしたかを示します。   <div class="progress-container"> <div class="progress-bar"></div> </div> .progress-container { width: 100%; height: 8px; background-color: #f3f3f3; position: fixed; top: 0; } .progress-bar { height: 8px; background-color: #3498db; width: 0%; }  20. CSS フィルター効果 画像に CSS フィルター効果を適用します。   <img src="your-image.jpg" alt="Your Image" class="filter"> .filter { filter: grayscale(100%); }  21. Google フォントの統合 Google フォントをウェブサイトに統合する:   <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet"> body { font-family: 'Roboto', sans-serif; } これらの 21 の便利な HTML および CSS コード スニペットは、Web 開発プロジェクトを強化し、ワークフローを合理化するのに役立ちます。簡単に参照できるように手元に置いておき、特定のニーズに合わせて変更したり適応させたりすることを躊躇しないでください。   にも掲載されています。 ここ

This story contains new, firsthand information uncovered by the writer.

Read My Stories

このオーディオは、ストーリーの元の言語で制作されています。

長すぎる; 読むには

Make resilience your competitive advantage

Web 開発者向けの 21 の貴重な HTML および CSS コードスニペット

About Author

コメント

ラベル

この記事は

Related Stories

18 種類の開発者ツールで生産性を向上しましょう 🚀🔥

AI の力を解き放つ。最先端技術の体系的レビュー: 概要と序論

フォーラムからフィードへ: ソーシャルメディアアルゴリズムがデジタルインタラクションを形作る仕組み

クラウド移行を成功させるための完全ガイド: 戦略とベストプラクティス

18 種類の開発者ツールで生産性を向上しましょう 🚀🔥

AI の力を解き放つ。最先端技術の体系的レビュー: 概要と序論

フォーラムからフィードへ: ソーシャルメディアアルゴリズムがデジタルインタラクションを形作る仕組み

クラウド移行を成功させるための完全ガイド: 戦略とベストプラクティス

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps

Web 開発者向けの 21 の貴重な HTML および CSS コード スニペット