はてなブックマーク

<div class="cp_tab"> <input type="radio" name="cp_tab" id="tab1_1" aria-controls="first_tab01" checked> <label for="tab1_1">First Tab</label> <input type="radio" name="cp_tab" id="tab1_2" aria-controls="second_tab01"> <label for="tab1_2">Second Tab</label> <input type="radio" name="cp_tab" id="tab1_3" aria-controls="third_tab01"> <label for="tab1_3">Third Tab</label> <input type="radio" name="cp_t

<div class="cp_navi"> <ul> <li><a href="#">Home</a></li> <li> <a href="#">Products <span class="caret"></span></a> <div> <ul> <li><a href="#cat">cat</a></li> <li><a href="#dog">dog</a></li> <li><a href="#rabbit">rabbit</a></li> </ul> </div> </li> <li><a href="#">About</a></li> <li><a href="#">Help</a></li> </ul> </div> .cp_navi { background-color: #ffffff; border: 1px solid #dedede; border-radius:

質問テキスト 質問テキスト 質問テキスト question? 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 質問テキスト 質問テキスト 質問テキスト question? 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text

<div class="cp_ipradio01"> <input type="radio" id="radio1" name="cpipr01" /> <label for="radio1">ネコ</label> <input type="radio" id="radio2" name="cpipr01" /> <label for="radio2">イヌ</label> <input type="radio" id="radio3" name="cpipr01" /> <label for="radio3">ウサギ</label> <input type="radio" id="radio4" name="cpipr01" disabled/> <label for="radio4">トリ</label> </div> .cp_ipradio01 input[type=radio] {

<div class="cp_breadcrumb"> <ul class="breadcrumbs"> <li><a href="#">Home</a></li> <li><a href="#">Category</a></li> <li><a href="#">Sub Category</a></li> <li>Contents</li> </ul> </div> .cp_breadcrumb *, .cp_breadcrumb *:after, .cp_breadcrumb *:before { -webkit-box-sizing: border-box; box-sizing: border-box; } .cp_breadcrumb { margin: 1em auto; padding: 1em 2em; background-color: #3949AB; color: #

画像なしでもちょっとした柄ならもうcssで再現できちゃいますよね。 アイディア次第で複雑な柄も作れますが、ここでは基本的なパターンをご紹介します。 全面背景はもちろん、ブロック要素や見出しの背景にも使えるよう、色の差を少なめにしています。 また、わかりやすいようにベンダープレフィックスはつけていませんので、必要に応じてつけてください。 色やサイズを変えるだけでいろんな柄が作れますよ。 ちょっとクセ強めのパターンはこちら コピペでできる！cssとhtmlのみで作るちょっと複雑なの背景パターン 12選 画像なしでもちょっとした柄ならもうcssで再現できちゃいますよね。 以前は基本的なボーダーやストライプをご紹介しましたが、今回はちょっとクセ強めです。 アイディア次第で複雑な柄も作れます。どっかで見たチェックやシャツの柄のようなちょっとだけ複雑なパターンをご紹介します。 わかりやすいようにベンダ

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qu

htmlとcssだけでできるテキストリンクデザイン12選です。 色は好みで変えていただければ、かまいません。 色には6桁の16進数のカラーコード(#000000)も使えますが、他に、 3桁の16進数カラーコード(#000) RGB色相・彩度・明度(rgb(0,0,0)) RGBA色相・彩度・明度・透明度(rgb(0,0,0,1)) なども使用できます。 RGBA値での指定は、サポートしていないブラウザだと、透明度だけが無視されるのではなく、色指定そのものが認識されずに無効となるので注意が必要です。

<div class="cp_iptxt"> <input type="text" placeholder="お名前"> <i class="fa fa-user fa-lg fa-fw" aria-hidden="true"></i> </div> <div class="cp_iptxt"> <input type="text" placeholder="E-Mail"> <i class="fa fa-envelope fa-lg fa-fw" aria-hidden="true"></i> </div> .cp_iptxt { position: relative; width: 27.33%; margin: 40px 3%; } .cp_iptxt input[type='text'] { font: 15px/24px sans-serif; box-sizing: bord

htmlとcssだけでできるボタンデザイン15選です。 使い勝手のいいものをピックアップしました。 色は好みで変えていただければ、かまいません。 色には6桁の16進数のカラーコード(#000000)も使えますが、他に、 3桁の16進数カラーコード(#000) RGB色相・彩度・明度(rgb(0,0,0)) RGBA色相・彩度・明度・透明度(rgb(0,0,0,1)) なども使用できます。 RGBA値での指定は、サポートしていないブラウザだと、透明度だけが無視されるのではなく、色指定そのものが認識されずに無効となるので注意が必要です。 ちなみによく出てくる擬似要素の::beforeと::afterって何よ？って方はこちらをご覧ください。 で？そもそも擬似要素の::before(:before)と::after(:after)って何がどうなってどう使えるの？ | copypet.jp｜パーツで

<div class="cp_ipcheck01"> <input type="checkbox" id="a_ch1" checked /><label for="a_ch1">ネコ</label> <input type="checkbox" id="a_ch2" /><label for="a_ch2">イヌ</label> <input type="checkbox" id="a_ch3" /><label for="a_ch3">ウサギ</label> <input type="checkbox" id="a_ch4" disabled /><label for="a_ch3">ウサギ</label> </div> .cp_ipcheck01 { margin: 6em 2em; } .cp_ipcheck01 input[type=checkbox] { display: no

htmlとcssだけでできるリストデザイン15選です。 おもに[ul/li]でつくるリストを集めました。 色は好みで変えていただければ、かまいません。 また、基本htmlは<ul><li>タグを使用しています。 紹介している<ul>タグには、クラス名（.cp_list）を付与していますが、こちらも css部分を下記のように変更すれば、クラスをつけずに使用することも可能です。 ul {cssの中身} 色には6桁の16進数のカラーコード(#000000)も使えますが、他に、 3桁の16進数カラーコード(#000) RGB色相・彩度・明度(rgb(0,0,0)) RGBA色相・彩度・明度・透明度(rgb(0,0,0,1)) なども使用できます。 RGBA値での指定は、サポートしていないブラウザだと、透明度だけが無視されるのではなく、色指定そのものが認識されずに無効となるので注意が必要です。

*, *:before, *:after { font-family: 'FontAwesome'; -webkit-box-sizing: border-box; box-sizing: border-box; } .cp_quote { position: relative; width: 90%; margin: 1em auto; border-right: 1px solid #da3c41; border-left: 10px solid #da3c41; background: #ffffff; box-shadow: 0 1px 2px rgba(0,0,0,0.3); } /* アイコン */ .cp_quote::before, .cp_quote::after { font-size: 2em; position: absolute; color: #cccccc;

animation:cycle1 25s linear infinite; サンプルは25sずつスライドが5枚切り替わるように設定しています 5枚の場合全部で100s スライドの動き全体から100sを100%で割ってアニメーションを設定します。 1枚目の場合25s(25%)の時点で2枚目に切り替わるのでその時点で200px下に動き非表示にする 2枚目の場合25s(25%)の時点で表示され50s(50%)の時点で3枚目に切り替わるのでその時点で200px下に動き非表示にするというようになります。 枚数を変更する場合はこの計算を枚数に合わせて変更する必要があります。 ex)3枚表示の場合 全体の動きは25s×3枚で75s 75sを100%で割ってアニメーションを設定します。 よって1枚目のスライドの動きは下記のようになります。 0% { top:0px; opacity:1; z-index:

<div class="cp_ipselect01"> <select required> <option value="" hidden>Choose</option> <option value="1">cat</option> <option value="2">dog</option> <option value="3">rabbit</option> <option value="4">squirrel</option> </select> </div> .cp_ipselect01 { position: relative; display: flex; align-items: center; margin: 2em auto; border: 1px solid #bbbbbb; border-radius: 2px; } /*プルダウンの三角を設定*/ .cp_ipsel

コピペでできる！cssとhtmlだけの[clip-path]で作るブロックの一部につけるリボンデザイン8種

htmlとcssだけでできる下線装飾の見出し15選です。 見出し次第で、記事の読みやすさは大きく変わります。 おもに、下線をデザインするだけのシンプルな見出しのみです。 色は好みで変えていただければ、かまいません。 また、基本htmlは<h1>タグを使用していますが、<h2>〜<h6>などにそのまま変更することができます。 紹介している<h1>タグには、クラス名（.cp_h1title）を付与していますが、こちらも css部分を下記のように変更すれば、クラスをつけずに使用することも可能です。 h1 {cssの中身} 色には6桁の16進数のカラーコード(#000000)も使えますが、他に、 3桁の16進数カラーコード(#000) RGB色相・彩度・明度(rgb(0,0,0)) RGBA色相・彩度・明度・透明度(rgb(0,0,0,1)) なども使用できます。 RGBA値での指定は、サポートし