MENU
ピクニックに行くように気軽に世界を旅しよう！
  1. ホーム
  2. サイト制作
  3. コピペで実装！便利css＆htmlコード一覧

コピペで実装！便利css＆htmlコード一覧

サイト制作

ワードプレスを使用したサイト制作に便利な、
コピペで実装可能なcssとhtmlコードの一覧。

※メモ書きとなりますので、参考程度にご利用ください。

目次

ボックス01

ここにタイトルをいれます　追加メモ

ここに本文を入力します。

コードを表示

HTML

<div class="box03">
<div class="title01">ここにタイトルをいれます　<span class="subtitle">追加メモ</span></div>
<p>ここに本文を入力します。</p>
</div>

CSS

.box03{
	border-radius: 10px;
	border:solid 2px #e56289;
  	max-width:750px;
	width:100%;
	box-sizing: border-box;
	color:#363636;
	font-size:1em;
	line-height:2em;
	margin:auto;
	background-color:#fffafe;
	padding:20px;
	margin:px;
}

.title01 {
 	color: #000;
 	border-bottom: dotted 4px #e56289;
	font-size:1.3em;
	font-weight:bolder;
	padding-bottom:10px;
	margin-bottom:25px;
}

.title01:before {
 	content: '●';
 	color: #e56289;
 	margin-right: 8px;
}


.subtitle {
	font-size: 0.8em;
	font-weight:normal;
}

ボックス02

ここに本文を入力します。
コードを表示

HTML

<div class="backgroundimg01">
<div class="box02">
ここに本文を入力します。
</div></div>

CSS

.backgroundimg01{
	background-image: url("○○.jpg");
	color:#000;
	font-size:1em;
	line-height:2em;
	margin:auto;
	padding:50px;
}

.box02{
	border-radius:30px;
  	max-width:800px;
	width:100%;
	box-sizing: border-box;
	color:#000;
	font-size:1em;
	line-height:2em;
	margin:auto;
	margin-top:30px;
	margin-bottom:30px;
	background-color:#fff;
	padding:20px;
	box-shadow: 0px 0px 0px 10px #fff;
	border: dashed 3px #ffc3c3;
}

ボタン

ボタンにいれたい
文字はこちらに入力します
コードを表示

HTML

<div class="button_shine">
  <a href="#">ボタンにいれたい<br class="sp">文字はこちらに入力します
</a>
</div>

CSS

.button_shine a {
	text-align:center;
	font-size: 1.3em;
	background: #32c1c1;
	border-radius: 30px;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	max-width: 670px;
	padding: 25px 25px;
	color: #FFF;
	transition: 0.3s ease-in-out;
	font-weight: bolder;
	border-radius: 30px;
	border-bottom: 4px solid #655c4a;
	overflow: hidden;
}

@media(max-width:700px){
.button_shine a {
	font-size: 1em;
	padding: 10px 25px;
}
}

.button_shine a:active {
	transform: translateY(4px);
	box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
	border-bottom: none;
}
.button_shine a:before {
	content: '';
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: -100%;
	background-image: linear-gradient( 130deg, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 55%);
	animation: shine 3s infinite;
}

.button_shine a:hover {
 	transform: translateY(5px);
 	box-shadow: 0 0 0 #333;
}
 
@keyframes shine {
  33% {
	left: 100%;
  }
  100% {
	left: 100%;
  }
}

Q ＆ A

これだと画像サイズによって一行目の下の空白がずれてしまうので、新しいコードを追加しました。

質問タイトル

回答をここに記入します。QとAの画像は自作の画像を入れることができます。複数行になった場合でも、QAの画像と同じ大きさだけ右にずれたままテキストが表示されていきます。調整はcssの数値で調整してください。

コードを表示

HTML

<div class="box1">
  <p><img class="qaimg" src="○○.jpg" alt="" width="30px"/>質問タイトル</p>
</div>
<div class="box1">
  <p><img class="qaimg" src="○○.jpg" alt="" width="30px"/>回答をここに記入します。</p>
</div>

CSS

.qaimg{
	margin-right:10px;
	margin-bottom:5px;
	font-size: 1em;
	vertical-align: middle;
}

.box1 p {
	padding-left:3em;
	text-indent: -2.5em;
}

Q ＆ A

質問タイトル

回答をここに記入します。QとAの画像は自作の画像を入れることができます。複数行になった場合でも、QAの画像と同じ大きさだけ右にずらすことができます。調整はcssの数値で調整してください。
コードを表示

HTML

<div class="qabox-q">
<div class="qa-left"><p><img class="qaimg01" src="○○.jpg"  alt=""/></p></div>
 <div class="qa-title">質問タイトル</div>
</div>
<div class="qabox-a">
<div class="qa-left"><p><img class="qaimg01" src="○○.jpg" alt=""/></p></div>
 <div class="qa-answer">回答をここに記入します。QとAの画像は自作の画像を入れることができます。複数行になった場合でも、QAの画像と同じ大きさだけ右にずらすことができます。調整はcssの数値で調整してください。</div>
</div>

CSS

.qabox-q {
    padding-top:1.5em;
    width:100% ;
    margin:  auto;
}

.qabox-q::after {
    content:"";
    display: block;
    clear: both;
}

.qabox-q div {
    float: left;
}

.qabox-a {
    border-bottom:solid 1px		;
    padding:1.5em 0;
    width:100% ;
    margin:  auto; /*上下 左右*/
}

.qabox-a::after {
    content:"";
    display: block;
    clear: both;
}
.qabox-a div {
    float: left;
}


.qaimg01{
    margin-right:10px;
    font-size: 1em;
    vertical-align: middle;
    width:35px;
}

.qa-left{
    width:10%;
    font-size:1.8vw;
    font-weight:bolder;
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:auto;
    margin:auto;
}

.qa-title{
    width:90%;
    display:flex;
    padding:auto;
    margin:auto;
    font-size:1em;		
    font-weight:bolder;
    color:#054786;
}

.qa-answer{
    width:90%;
    display:flex;
    padding:auto;
    margin:auto;
    font-size:1em;			 
}

横並びボックス

flexをつかった横並びボックスです。

タイ
Thailand
カンボジア
Cambodia
マレーシア
Malaysia
ベトナム
Vietnam
フィリピン
Philippines
コードを表示

HTML

<div class="yokobox">
  <div class="yokobox-item"> <div class="yokobox-title">タイ</div><div class="yokobox-contents">Thailand</div></div>
  <div class="yokobox-item"> <div class="yokobox-title">カンボジア</div><div class="yokobox-contents">Cambodia</span></div></div>
  <div class="yokobox-item"> <div class="yokobox-title">マレーシア</div><div class="yokobox-contents">Malaysia</div></div>
  <div class="yokobox-item"> <div class="yokobox-title">ベトナム</div><div class="yokobox-contents">Vietnam</div></div>
</div>

<div class="yokobox-last">
  <div class="yokobox-item"> <div class="yokobox-title">フィリピン</div><div class="yokobox-contents">Philippines</div></div>
</div>

CSS

.yokobox{
    display: flex;
    justify-content: center;
    justify-content: space-between;
    margin-bottom:16px;
}

.yokobox-last{
    display: flex;
    justify-content: start;
    margin-bottom:10px;
}
.yokobox-item{
    width:24%;
}
.yokobox-title{
    margin:auto;
    background-color:#529799;
    border-radius:5px 5px 0px 0px;
    height:50px;
    font-weight:bolder;
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:auto;
}

.yokobox-contents{
    background-color:#fff;
    border:solid 3px #529799;
    height:80px;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:auto;
    border-radius:0px 0px 5px 5px;
    text-align:center;
    font-weight:bolder;
    color:#ff8400;
    font-size:1.2em;
    margin:auto;
}

画像回り込み

文章はここに記入します。こちらは画像が右側に配置される画像回り込みのcssとhtmlです。

コードを表示

HTML

<div class="float">
    <div class="float_img"><img src="〇〇.jpg" alt="" ></div>
    <div class="float_text">
        <p class="text">文章はここに記入します。こちらは画像が右側に配置される画像回り込みのcssとhtmlです。</p>
    </div>
</div>

CSS

.float_img {
    float: right;
    width: 35%;
   	margin: 0 0 15px 15px
}

.float_text {
    line-height: 1.5;
}

2行目以降を1文字インデント（下げる）

①長い文章の場合、改行された２行目以降の頭文字が一文字分インデントされます。つまり、一文字分右に移動するので、①②③といった番号をつけた文章や、リストの作成に便利です。

①長い文章の場合、改行された２行目以降の頭文字が一文字分インデントされます。つまり、一文字分右に移動するので、①②③といった番号をつけた文章や、リストの作成に便利です。このように３行以上に及ぶ文章の場合でも行のスタートが１文字分インデントされます。

コードを表示

HTML

<div class="indent">
 <p>①長い文章の場合、改行された２行目以降の頭文字が一文字分インデントされます。つまり、一文字分右に移動するので、①②③といった番号をつけた文章や、リストの作成に便利です。</p>
 <p>①長い文章の場合、改行された２行目以降の頭文字が一文字分インデントされます。つまり、一文字分右に移動するので、①②③といった番号をつけた文章や、リストの作成に便利です。このように３行以上に及ぶ文章の場合でも行のスタートが１文字分インデントされます。</p>
</div>

CSS

.indent p {
	padding-left:1.5em;
	text-indent: -1em;
}

レスポンシブデザイン

PC（751px以上のデバイス）の場合は非表示にします。
スマホ（750px以下のデバイス）の場合は非表示にします。
コードを表示

HTML

<div class="sp">PC（751px以上のデバイス）の場合は非表示にします。</div>
<div class="pc">スマホ（750px以下のデバイス）の場合は非表示にします。</div>

CSS

@media(min-width:751px){
    .sp{
        display: none !important;
    }
}
@media(max-width:750px){
    .pc{
        display: none !important;
    }
}

バナー

お問い合わせ
コードを表示

HTML

<div class="toiawase">
<div class="toiawasein"><center>お問い合わせ</center></div>
	<ul>
		<a href="tel:09012341234"><li><span class="telne">TEL</span>090-1234-1234</li>
		<a href="mailto:#"><li><span class="telne">Email</span>samplpe@mail</span></li></a>
	</ul>
</div>

CSS


.toiawase {
	margin: 16px auto;
	text-align: center;
	display: block;
	color:#b5a85e;
        border:solid 3px #b5a85e;
	font-weight:bolder;
	border-radius:10px;
	padding:20px;
}

.toiawasein{
	font-size:1.5em;
}

.toiawase ul {
	padding-top:20px;
	margin-bottom:0;
	padding-left: 0;
	list-style: none;
	display: inline-block;
	color:white;
}


.toiawase ul li {
	text-align: left;
}

.telne{
	padding:0 10px;
	width:90px;
	margin:0 10px 10px 0;
	display:inline-block;
	color:#fff;
	background-color:#b5a85e;
	border:solid 1px #b5a85e;
	font-weight:bolder;
        border-radius:10px;
	text-align:center;
}

タイトル01

ここにタイトル挿入
コードを表示

HTML

<div class="title02">ここにタイトル挿入</div>

CSS


.title02{
	display: flex;
	align-items: center;
	font-size:1.3em;
	margin:30px 0;
	font-weight:bolder;
}
 
.title02:before,
.title02:after {
	content: "";
	height: 1px;
	flex-grow: 1;
	background-color: #666;
}
 
.title02:before {
	margin-right: 1rem;
}
 
.title02:after {
	margin-left: 1rem;
}
サイト制作
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

コメント

コメントする

目次