この夏食べたスイカの種をテッシュの上に乗せて、水をあげていたら、１週間後にモヤシのような目が出てきて驚いた、ユゲタです。
自家栽培は個人的に大好きなので、非常に楽しいですね。
そして、webサイトも、他のライブラリなどは一切使わずに自分の作ったコードのみで作るということも、合わせて持ち味としていて、
今回はそんな自分ライブラリの紹介です。
「３つのシリーズ」は、色々なパターンを持っておいて問題なく、構築するページデザインにあったものをピックアップするような使い方ができれば、
効率的でしょうね。
３つの特徴
今回のパーツデザインは、次のイメージどおりです。
「利用方法」となっていますが、「３つの・・・」という内容で使えるイメージですね。
スマホで表示すると、こんな感じ。
ソース
<link rel="stylesheet" href="css.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<div id="howto">
<h2>利用方法</h2>
<ul class="lists">
<li>
<div class="icon-frame">
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19.43 12.98c.04-.32.07-.64.07-.98 0-.34-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.09-.16-.26-.25-.44-.25-.06 0-.12.01-.17.03l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.06-.02-.12-.03-.18-.03-.17 0-.34.09-.43.25l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98 0 .33.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.09.16.26.25.44.25.06 0 .12-.01.17-.03l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.06.02.12.03.18.03.17 0 .34-.09.43-.25l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zm-1.98-1.71c.04.31.05.52.05.73 0 .21-.02.43-.05.73l-.14 1.13.89.7 1.08.84-.7 1.21-1.27-.51-1.04-.42-.9.68c-.43.32-.84.56-1.25.73l-1.06.43-.16 1.13-.2 1.35h-1.4l-.19-1.35-.16-1.13-1.06-.43c-.43-.18-.83-.41-1.23-.71l-.91-.7-1.06.43-1.27.51-.7-1.21 1.08-.84.89-.7-.14-1.13c-.03-.31-.05-.54-.05-.74s.02-.43.05-.73l.14-1.13-.89-.7-1.08-.84.7-1.21 1.27.51 1.04.42.9-.68c.43-.32.84-.56 1.25-.73l1.06-.43.16-1.13.2-1.35h1.39l.19 1.35.16 1.13 1.06.43c.43.18.83.41 1.23.71l.91.7 1.06-.43 1.27-.51.7 1.21-1.07.85-.89.7.14 1.13zM12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"></path></svg>
<div class="num">1</div>
</div>
</div>
<div class="text">
<h3>入力ページの項目毎の設定</h3>
<p>設定はASP提供会社で代理設定を行うことも可能です</p>
</div>
</li>
<li>
<div class="icon-frame">
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"></path></svg>
<div class="num">2</div>
</div>
</div>
<div class="text">
<h3>タグを貼る</h3>
<p>本番のwebサイトに、設定完了で出力されたscriptタグを貼るだけで設定完了です。</p>
</div>
</li>
<li>
<div class="icon-frame">
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21,8c-1.45,0-2.26,1.44-1.93,2.51l-3.55,3.56c-0.3-0.09-0.74-0.09-1.04,0l-2.55-2.55C12.27,10.45,11.46,9,10,9 c-1.45,0-2.27,1.44-1.93,2.52l-4.56,4.55C2.44,15.74,1,16.55,1,18c0,1.1,0.9,2,2,2c1.45,0,2.26-1.44,1.93-2.51l4.55-4.56 c0.3,0.09,0.74,0.09,1.04,0l2.55,2.55C12.73,16.55,13.54,18,15,18c1.45,0,2.27-1.44,1.93-2.52l3.56-3.55 C21.56,12.26,23,11.45,23,10C23,8.9,22.1,8,21,8z"></path><polygon points="15,9 15.94,6.93 18,6 15.94,5.07 15,3 14.08,5.07 12,6 14.08,6.93"></polygon><polygon points="3.5,11 4,9 6,8.5 4,8 3.5,6 3,8 1,8.5 3,9"></polygon></svg>
<div class="num">3</div>
</div>
</div>
<div class="text">
<h3>ダッシュボードで、計測データ確認</h3>
<p>効果計測結果に基づき、改善施策を実施</p>
</div>
</li>
</ul>
</div>
:root{
--font-size : 16px;
--font-family : "Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体","ヒラギノ角ゴ Pro W3","ヒラギノ角ゴ W3","メイリオ",sans-serif;
--color-content-bg : #eaf2f2;
--color-text-impact : #33817c;
}
*, *::before, *::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
font-family: var(---font-family);
color: var(--color-base-text);
font-size: var(--font-size);
line-height: 1.8;
}
ul, li {
list-style: none;
margin: 0;
padding: 0;
}
img,svg{
max-width:100%;
height: auto;
}
h2 {
display: block;
width: 800px;
max-width: 100%;
font-size: 42px;
line-height: 56px;
font-weight: 700;
/* padding: 0 0 0 50px; */
margin: 0 auto 50px;
text-align: center;
word-break: break-all;
}
h3 {
display: block;
font-size: 1.17em;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
}
#howto{
background-color:#f9f9f9;
z-index:-1;
padding-top:50px;
padding-bottom:50px;
margin-bottom:50px;
}
#howto .lists{
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
width:800px;
max-width:100%;
margin:50px auto;
}
#howto .lists > *{
width:30%;
padding :10px;
}
#howto .lists .icon{
position:relative;
display:block;
width:88px;
height:50px;
margin:10px auto 40px;
}
#howto .lists .icon::before,
#howto .lists .icon::after{
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
#howto .lists .icon::before{
transform: rotate(60deg);
}
#howto .lists .icon::after{
transform: rotate(-60deg);
}
#howto .lists .icon svg{
position:absolute;
width:50px;
height:50px;
left:50%;
top:50%;
transform:translate(-50%,-50%);
fill:white;
display:block;
margin:0 auto;
z-index:2;
}
#howto .lists > *:nth-of-type(1) .icon,
#howto .lists > *:nth-of-type(1) .icon:before,
#howto .lists > *:nth-of-type(1) .icon:after,
#howto .lists > *:nth-of-type(1) .icon .num{
background-color:#1fa0f4;
}
#howto .lists > *:nth-of-type(2) .icon,
#howto .lists > *:nth-of-type(2) .icon:before,
#howto .lists > *:nth-of-type(2) .icon:after,
#howto .lists > *:nth-of-type(2) .icon .num{
background-color:#02cb6f
}
#howto .lists > *:nth-of-type(3) .icon,
#howto .lists > *:nth-of-type(3) .icon:before,
#howto .lists > *:nth-of-type(3) .icon:after,
#howto .lists > *:nth-of-type(3) .icon .num{
background-color:#f66047;
}
#howto .lists .icon .num{
position:absolute;
right:-10px;
bottom:-30px;
width:40px;
height:40px;
border-radius:50%;
border:4px solid white;
font-size:20px;
font-weight:bold;
text-align:center;
line-height:32px;
color:white;
}
@media (max-width: 499px){
h2,
h2 *{
font-size:24px;
line-height: 40px;
}
#howto .lists{
display:block;
width:100%;
}
#howto .lists li{
display:flex;
width:100%;
margin-bottom:20px;
}
#howto .lists li:nth-of-type(2){
-webkit-flex-grow: 1;
flex-grow: 1;
}
#howto .lists li .icon-frame{
transform:translateY(30px);
}
#howto .lists li .text{
padding:0 10px 0 20px;
}
}
解説
このデザインテンプレートは、六角形構造のアイコンをcssで作り出しているというところがミソです。
その中に、svgアイコンを挿入しているんですが、簡単な図形であれば、cssだけで書けてしまうので、もう少し効率的にもできそうです。
そのアイコンに重ねて数値も表示しているんですが、この数字の部分は、cssで自動採番にすると、数が増えても対応できそうですね。
便利にコピペして使ってくだされ。
