【コピペOK】HTML&CSSサンプルコード16選!サイトの参考などに

2022.10.24
HTML&CSSサンプルコードおすすめ16選

現代には、コピペで使用できるHTMLやCSSのサンプルコードが無数に存在しています。

プログラミングの学習で、HTMLやCSSの基礎を学んだ後は、この便利なサンプルコードを利用して、さらに効率的に学習を進めていくのがおすすめです。

また、Web制作者にとっても、コピペで利用できるサンプルコードは作業効率アップに欠かせないもの。

特に、見出しやボックスなどのパーツコードは、すぐに実装してアレンジしたい時に便利です。

そこで今回は、コピペで利用できるHTML・CSSのサンプルコードとテンプレートおすすめ18選を紹介します!

この記事を読んでわかる内容は、以下の通りです。

  • HTML&CSSのおすすめサンプルコード13選
  • 無料で使えるおすすめテンプレート3選

サンプルコードは、具体的な実装方法を知りたい時の学習や、参考にしたい時の制作過程で役に立ちます。

一部をコピペして利用したり、アレンジしたりして、プログラミングの学習やWeb制作を加速させましょう!

【部品別】HTML&CSSコードサンプル13選

Webサイト制作におすすめのパーツコードサンプル13選を紹介!

ラインナップは、以下の通りです。

  • 見出しデザインのサンプルコード3選
  • ボックスデザインのサンプルコード3選
  • ボタンデザインのサンプルコード3選
  • 箇条書きリストデザインのサンプルコード3選
  • テーブルデザインのサンプルコード1選

見出しデザインのサンプルコード3選

ここでは、見出しデザインのサンプルコードを3選紹介します。

1.シンプルなラインの見出し

<!-- HTMLコード -->
<h2>見出しデザイン</h2>
/* CSSコード */
h2 {
 border-bottom: 3px solid #aaa; 
 color: #aaa;
}

▼ブラウザ表示▼

見出しデザインの画像

2.おしゃれなタグ風見出し

<!-- HTMLコード -->
<h2>見出しデザイン</h2>
/* CSSコード */
h2 {
  display: inline-block;
  color: #fff;
  background: #ffaf58;
  padding: 0.5em;
  line-height: 1.5;
  vertical-align: middle;
  border-radius: 30px 0px 0px 30px;
}

h2::before {
  content: '●';
  color: #fff;
  margin-right: 8px;
}

▼ブラウザ表示▼

見出しデザインの画像

3.先端が尖った個性的な見出し

<!-- HTMLコード -->
<h2>見出しデザイン</h2>
/* CSSコード */
h2 {
  position: relative;
  padding: 5px 5px 5px 42px;
  background: #ffaf58;
  font-size: 20px;
  color: white;
  margin-left: -33px;
  line-height: 1.3;
  z-index:-1;
}

h2::before {
  position: absolute;
  content: '';
  left: -2px;
  top: -2px;
  border: none;
  border-left: solid 40px white;
  border-bottom: solid 79px transparent;
  z-index:-2
}

▼ブラウザ表示▼

見出しデザインの画像

ボックスデザインのサンプルコード3選

ここでは、ボックスデザインのサンプルコードを3選紹介します。

1.シンプルな角丸のボックス

<!-- HTMLコード -->
<div class="box">ボックスデザイン</div>
/* CSSコード */
.box {
  border: 2px solid #aaa;
  border-radius: 10px;
  background-color: #eee;
  padding: 2em;
}

▼ブラウザ表示▼

シンプルな角丸のボックス画像

2.少し浮いているようなボックス

<!-- HTMLコード -->
<div class="box">ボックスデザイン</div>
/* CSSコード */
.box {
  border-top: 8px solid #aaa;
  background-color: #eee;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);
  padding: 2em;
}

▼ブラウザ表示▼

少し浮いているようなボックス画像

3.左右に二重線の入ったボックス

<!-- HTMLコード -->
<div class="box">ボックスデザイン</div>
/* CSSコード */
.box {
  border-left: 5px double skyblue;
  border-right: 5px double skyblue;
  background-color: #eee;
  padding: 2em;
}

▼ブラウザ表示▼

左右に二本線が入ったボックス画像

ボタンデザインのサンプルコード3選

ここでは、ボタンデザインのサンプルコードを3選紹介します。

1.立体的なボタン

<!-- HTMLコード -->
<a href="#">ボタンデザイン</a>
/* CSSコード */
a {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  background: #aaa;
  color: #FFF;
  border-bottom: solid 4px rgb(134, 132, 132);
  border-radius: 3px;
}

a:active {
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
  border-bottom: none;
}

▼ブラウザ表示▼

立体的なボタンデザイン

2.本物の質感のボタン

<!-- HTMLコード -->
<a href="#">ボタンデザイン</a>
/* CSSコード */
a {
  display: inline-block;
  color: rgba(152, 152, 152, 0.43);
  width: 150px;
  height: 150px;
  line-height: 150px;
  font-size: 20px;
  border-radius: 50%;
  text-align: center;
  overflow: hidden;
  font-weight: bold;
  background-image: linear-gradient(#e8e8e8 0%, #d6d6d6 100%);
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(0, 0, 0, 0.19);
  border-bottom: solid 2px #b5b5b5;
}

a:active {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(0, 0, 0, 0.19);
  border-bottom: none;
}

▼ブラウザ表示▼

本物の質感のボタンデザイン

3.シンプルなボーダーのボタン

<!-- HTMLコード -->
<a href="#">ボタンデザイン</a>
/* CSSコード */
a {
  display: inline-block;
  padding: 2em;
  color: skyblue;
  border: solid 2px skyblue;
  border-radius: 5px;
  transition: 0.3s;
}

a:active {
  background: skyblue;
  color: #fff;
}

▼ブラウザ表示▼

シンプルなボーダーのボタン

箇条書きリストデザインのサンプルコード3選

ここでは、箇条書きリストデザインのサンプルコードを3選紹介します。

1.上下ボーダーのリスト

<!-- HTMLコード -->

<ul>
  <li>リスト項目1</li>
  <li>リスト項目2</li>
  <li>リスト項目3</li>
</ul>
/* CSSコード */
ul {
  color: #aaa;
  padding: 1em;
  border-top: #aaa solid 1px;
  border-bottom: #aaa solid 1px;
}

ul li {
  line-height: 1.5;
  padding: 0.5em;
}

▼ブラウザ表示▼

ブラウザ表示

2.シンプルな囲いのリスト

<!-- HTMLコード -->

<ul>
  <li>リスト項目1</li>
  <li>リスト項目2</li>
  <li>リスト項目3</li>
</ul>
/* CSSコード */
ul {
  color: #aaa;
  padding: 0.5em 0.5em 0.5em 2em;
  border: #aaa solid 1px;
}

ul li {
  line-height: 1.5;
  padding: 0.5em;
}

▼ブラウザ表示▼

ブラウザ表示

3.左端が丸いリスト

<!-- HTMLコード -->

<ul>
  <li>リスト項目1</li>
  <li>リスト項目2</li>
  <li>リスト項目3</li>
</ul>
/* CSSコード */
ul {
  padding: 0;
}

ul li {
  position: relative;
  list-style-type: none;
  padding: 0.5em 0.5em 0.5em 0.5em;
  margin-bottom: 5px;
  line-height: 1.5;
  background: #aaa;
  vertical-align: middle;
  color: #fff;
  border-radius: 20px 0px 0px 20px;
}

ul li::before {
  display:inline-block; 
  vertical-align: middle;
  content:'';
  width:1em;
  height: 1em;
  background: #fff;
  border-radius: 50%;
  margin-right: 8px;
}

▼ブラウザ表示▼

ブラウザ表示

テーブルデザインのサンプルコードも紹介!

<!-- HTMLコード -->
<table class="price">
<thead>
 <tr>
  <th class="p1">price1<br></th>
  <th class="p2">price2<br></th>
  <th class="p3">price3<br></th>
 </tr>
</thead>

<tbody>
 <tr>
  <td class="p1">
  1,000円
  </td>
  <td class="p2">
  500円
  </td>
  <td class="p3">
   無料
  </td>
 </tr>

 <tr>
  <td class="p1">
  商品1
  </td>
  <td class="p2">
  商品2
  </td>
  <td class="p3">
  商品3
  </td>
 </tr>

 <tr>
  <td class="p1">
  サービス1
  </td>
  <td class="p2">
  サービス2
  </td>
  <td class="p3">
  サービス3
  </td>
 </tr>
 <tr>
  <td class="p1"><button>お申込</button></td>
  <td class="p2"><button>お申込</button></td>
  <td class="p3"><button>お申込</button></td>
 </tr>
    
 </tbody>
</table>
/* CSSコード */
table.price {
  width: 500px;
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 1px 0;
  font-size: 15px;
}

table.price th,table.price td {
  padding: 10px;
}

table.price th {
  box-shadow: 0px 1px 1px rgba(255,255,255,0.8) inset;
  border-radius: 5px 5px 10px 10px;
  background: #88b7d5;
  vertical-align: middle;
  text-align: center;
  width: 125px;
  height: 50px;
  position: relative;
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
  font-size: 24px;
}

table.price th.p1 {
  background: rgb(162,206,26); 
}

table.price th.p2 {
  background: rgb(237,73,147);
}

table.price th.p3 {
  background: rgb(29,140,233);
}

table.price th:after {
  top: 55px;
  left: 5px;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border: 78px solid transparent;
}


@-moz-document url-prefix() {
table.price th {
  text-indent: 10px;
}

table.price th::after {
  padding: 0;
  top: 30px;
  left: 0;
  content: "";
  height: 0;
  width: 0;
  position: relative;
  pointer-events: none;
  border: 50px solid transparent;
  border-top: rgb(162,206,26) 15px solid;
}

}
table.price th.p1:after {
  border-top: rgb(162,206,26) 15px solid;
}

table.price th.p2:after {
  border-top: rgb(237,73,147) 15px solid;
}
table.price th.p3:after {
border-top: rgb(29,140,233) 15px solid;
}

table.price td {
box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;
text-align: center;
padding-top: 15px;
border: none;
height: 70px;
}

table.price tr:nth-child(2n+1) td.p1 {
background: #f7f9e8;
}
table.price tr:nth-child(2n+0) td.p1 {
background: #e2efbc;
}

table.price tr:nth-child(2n+1) td.p2 {
background: #ffecf5;
}
table.price tr:nth-child(2n+0) td.p2 {
background: #ffdfed;
}

table.price tr:nth-child(2n+1) td.p3 {
background: #fff;
}
table.price tr:nth-child(2n+0) td.p3 {
background: #eee;
}

table.price tr:last-child td {
border-radius: 0 0 5px 5px;
box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
}

table.price tr:last-child td button {
  font-size:12px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
  border:1px solid #ffaa22;
  padding:9px 18px;
  text-decoration:none;
  background-color:#ffec64;
  color:#333333;
  display:inline-block;
}

table.price tr:last-child td button:hover {
  background-color:#ffab23;
}

table.price tr:last-child td button {
  position:relative;
  top:1px;
}

▼ブラウザ表示▼

ブラウザ表示

コピペ&無料で使える!おすすめテンプレート3選

ブログサイトや、HPなど、ある程度の枠組みが作られているテンプレートも無料で配布されています。

WordPressのようなCMSだけでなく、HTMLとCSSだけのテンプレートもあるので、初心者の方でも気軽に利用することが可能です。

ここでは、おすすめテンプレートを3選紹介します。

Template Party

配布しているテンプレートは、なんと1,000点以上!

HTMLとCSSの基本的なテンプレートなので、初心者でも扱いやすい作りになっています。

サポート体制も充実していて、無料のサポート掲示板を完備。

調べてもわからないカ所について相談することも可能です。

いずれも無料で利用可能ですが、著作権表示を外すためには、ライセンスを取得する必要があるので注意しましょう。

飲食店向けテンプレート:tp_kids5

かわいいマカロンが主役のテンプレート。

スイーツなどの飲食店向けですが、ポートフォリオとしても利用できるでしょう。

メニューなどの動きはJavaScriptで実装しています。

レスポンシブデザイン対応なので、スマートフォン向けのWebサイトも簡単に作ることができますよ。

tp_kids5

ポートフォリオ向けテンプレート:tp_simple17

デザイナーやプログラマーのポートフォリオとして使えそうなテンプレート。

淡い色合いの優しいWebサイトに仕上がっています。

TOPの模様の背景色が時間で変わる仕様になっているのもポイント。

自分では面倒なカ所を実装してくれている、痒い所に手が届くようなテンプレートです。

tp_simple17

不動産向けテンプレート:tp_fudosan16

不動産向けのテンプレートですが、企業のHPとしても利用しやすいレイアウトになっています。

シンプルなので、様々な用途に使用できるでしょう。

「今月の注目物件」など、動きがあるカ所をJavaScriptで実装してくれています。

画像やテキストを入れ替えるだけで、商品のラインナップや、ブログ記事、ポートフォリオの実績としても利用できそうです。

tp_fudosan16

サンプルコードやテンプレートを活用して効率良く学習を進めよう!

今回は、コピペで利用できるHTML・CSSのサンプルコードとテンプレートおすすめ18選を紹介しました。

サンプルコードやテンプレートを利用することで、Web制作の作業効率がやプログラミングの学習スピードが向上します。

コピペでコードを利用するのは、決して悪いことではありません。

コピペ利用OKか?著作権表示を外すのに許可が必要か?

など、基本的なルールをしっかり確認した上で、サンプルコードやテンプレートを必要に応じて使っていきましょう!

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2022 WEBCAMP MEDIA Powered by AFFINGER5