アフィリエイト広告を利用しています

広告

この広告は30日以上更新がないブログに表示されております。
新規記事の投稿を行うことで、非表示にすることが可能です。
posted by fanblog
<< 2018年06月 | TOP | 2018年08月 >>
1 2 3 4 5 .. 最後へ

2018年07月21日

旭日旗

◆border-radiusとborderで描く


◆html
<div class="risingsun">
<div class="risingsun1">
<div class="risingsun2">
<div class="risingsun3">
<div class="risingsun4">
</div>
</div>
</div>
</div>
</div>

◆css
/*-------------------
　　　生地
-------------------*/
.risingsun,
.risingsun1,
.risingsun2,
.risingsun3,
.risingsun4
{
width:4500px;
height:3000px;
overflow:hidden;
position:relative;
}
/*-------------------
　　　旭日
-------------------*/
.risingsun::before
{
content:"";
display:block;
width:1500px;
height:1500px;
background-color:#be003f;
border-radius:50%;
position:absolute;
top:750px;
left:1000px;
}
/*-------------------
　　　旭光
-------------------*/
.risingsun1::before,.risingsun1::after,
.risingsun2::before,.risingsun2::after,
.risingsun3::before,.risingsun3::after,
.risingsun4::before,.risingsun4::after
{
content:"";
display:block;
width:0;
height:0;
border-top:10000px solid #be003f;
border-bottom:10000px solid #be003f;
border-right:984.9140335px solid transparent;
border-left:984.9140335px solid transparent;
position:absolute;
top:-8500px;
left:765.0859665px;
}
/*-------------------
　　　旭光　傾き
-------------------*/
.risingsun1::after{transform:rotate(90deg);}
.risingsun2::before{transform:rotate(22.5deg);}
.risingsun2::after{transform:rotate(-22.5deg);}
.risingsun3::before{transform:rotate(45deg);}
.risingsun3::after{transform:rotate(-45deg);}
.risingsun4::before{transform:rotate(67.5deg);}
.risingsun4::after{transform:rotate(-67.5deg);}
/*-------------------
　　　サイズ
-------------------*/
.risingsun
{
background-color:white;
transform-origin:top left;
transform:scale(0.1);
outline:calc(1px/0.1) solid;
margin-bottom:calc(-3000px*(1 - 0.1));
}
/*--------------------------------------------------------------------------
・旭日旗のオリジナルのサイズは縦3000px×横4500px
・これをtransform:scale(0.1);で10%に縮小している
・outlineとmargin-bottomに同じ縮小率を入れると自動的に計算される
--------------------------------------------------------------------------*/
posted by templayer at 22:49 | Comment(0) | TrackBack(0) | html & css

2018年07月20日

開閉パネル　改良版

◆最初は開いていてクリックで閉じる


◆html
<form>
<label>
<input type="radio" name="kaihei" class="kaihei"><span class="hei">×</span>
</label>
<label>
<input type="radio" name="kaihei" class="kaihei" checked="checked"><span class="kai">見出し</span>
<div class="kaihei">本文</div>
</label>
</form>

◆最初は閉じていてクリックで開く


◆html
<form>
<label>
<input type="radio" name="kaihei" class="kaihei"><span class="hei">×</span>
</label>
<label>
<input type="radio" name="kaihei" class="kaihei"><span class="kai">見出し</span>
<div class="kaihei">本文</div>
</label>
</form>

◆css
.kaihei{display:none;}
input:checked~.kaihei{display:block;}
.kai,.hei{background-color:black;color:white;padding:5px;border-radius:5px;display:inline-block;}
.kai{width:100%}
form{position:relative;}
.hei{position:absolute;top:0;right:0;}
posted by templayer at 00:50 | Comment(0) | TrackBack(0) | html & css

2018年07月19日

アコーディオン

◆最初は一つだけ開いている



◆html
<form>
<label>
<input type="radio" name="accordion" class="kaihei" checked="checked">見出し1
<div class="kaihei">本文1</div>
</label>
<label>
<input type="radio" name="accordion" class="kaihei">見出し2
<div class="kaihei">本文2</div>
</label>
<label>
<input type="radio" name="accordion" class="kaihei">見出し3
<div class="kaihei">本文3</div>
</label>
<label>
<input type="radio" name="accordion" class="kaihei">見出し4
<div class="kaihei">本文4</div>
</label>
<label>
<input type="radio" name="accordion" class="kaihei">見出し5
<div class="kaihei">本文5</div>
</label>
</form>

◆最初は全て閉じている

posted by templayer at 22:24 | Comment(0) | TrackBack(0) | html & css

2018年07月18日

開閉パネル　詳細版

◆最初は開いていてクリックで閉じる



いろはにほへと
ちりぬるをわか
よたれそつねな
らむうゐのおく
やまけふこえて
あさきゆめみし
ゑひもせす


◆html
<div>
<label for="kaihei1">見出し</label>
<input type="checkbox" id="kaihei1" class="kaihei" checked="checked">
<div class="kaihei">本文</div>
</div>

◆最初は閉じていてクリックで開く



いろはにほへと
ちりぬるをわか
よたれそつねな
らむうゐのおく
やまけふこえて
あさきゆめみし
ゑひもせす


◆html
<div>
<label for="kaihei2">見出し</label>
<input type="checkbox" id="kaihei2" class="kaihei">
<div class="kaihei">本文</div>
</div>

◆注意
・<label>のforの属性値と<input>のidの属性値を同じにする
・同じページで複数のパネルを使う場合は属性値を変える
　　<label for="kaihei1"><input id="kaihei1">
　　<label for="kaihei2"><input id="kaihei2">
　　<label for="kaihei3"><input id="kaihei3">
　　<label for="kaihei4"><input id="kaihei4">
　　<label for="kaihei5"><input id="kaihei5">

◆css
.kaihei{display:none;}
input:checked~.kaihei{display:block;}

◆簡易版と詳細版のメリットとデメリット
メリットデメリット
簡易版labelのforもinputのidも不要本文をクリックしても閉じる
詳細版本文をクリックしても閉じないパネルごとにforとidの属性値を
変えなければならない
※簡易版はこちら
posted by templayer at 11:52 | Comment(0) | TrackBack(0) | html & css

開閉パネル　簡易版

◆最初は開いていてクリックで閉じる



◆html
<label>
<input type="checkbox" class="kaihei" checked="checked">見出し
<div class="kaihei">本文</div>
</label>

◆最初は閉じていてクリックで開く



◆html
<label>
<input type="checkbox" class="kaihei">見出し
<div class="kaihei">本文</div>
</label>

◆css
.kaihei{display:none;}
input:checked~.kaihei{display:block;}

◆簡易版と詳細版のメリットとデメリット
メリットデメリット
簡易版labelのforもinputのidも不要本文をクリックしても閉じる
詳細版本文をクリックしても閉じないパネルごとにforとidの属性値を
変えなければならない
※詳細版はこちら
posted by templayer at 11:51 | Comment(0) | TrackBack(0) | html & css
1 2 3 4 5 .. 最後へ
CSSシミュレータ(filter)

指名手配
リメイクまとめ一覧
まとめ01
まとめ02
まとめ03
まとめ04
まとめ05
まとめ06
まとめ07
まとめ08
まとめ09
まとめ10
まとめ11
まとめ12
まとめ13
まとめ14
まとめ15
日本旅行
国内旅行・国内ツアー
JR＋宿泊セットプラン
国内ホテル・旅館宿泊予約
高速・夜行・深夜バス
レンタカー
観光クーポン
海外ツアー・海外旅行
海外航空券＋ホテル
海外航空券・格安航空券
海外ホテル・格安ホテル
楽天トラベル
国内旅行
国内ツアー
国内航空券
レンタカー
高速バス
海外旅行
海外ツアー
海外航空券
海外レンタカー・鉄道
海外ホテル
トラベルサポート
割引クーポン
懸賞広場
観光案内
ランキング
最新コメント
最新トラックバック
カテゴリー
おーぷん２ちゃんねる(15)
テンプレート(9)
html & css(7)
html(1)
css(28)
月別アーカイブ
2018年08月(12)
2018年07月(26)
2018年06月(22)
忍者AdMax
忍者AdMax
忍者AdMax
QRコード
RSS
RSS 1.0
RSS 2.0
CSSシミュレータ

テンプレート一覧
GIFアニメスレ
定式幕
3div 2column
ブラックボーダー
迷彩柄
リメイクスレ01
リメイクスレ02
ワンカラム（上下）
ワンカラム（下下）
html & css
見える化テンプレート
・アメーバブログ
・FC2ブログ
・ファンブログ（旧）
・ファンブログ（新）
id一覧
class一覧
html
ファビコン
css　プロパティ
border
border-radius
①円弧
②楕円弧
box-sizing
filter
margin
max-width
padding
paddingとmargin
css　値
display:flex;
filter:
　blur();
　brightness();
　contrast();
　grayscale();
　hue-rotate();
　invert();
　opacity();
　saturate();
　sepia();
linear-gradient()
①位置指定なし
②位置指定あり
③方向指定
repeating-linear-gradient()
その他
アコーディオン
開閉パネル　簡易版
開閉パネル　詳細版
開閉パネル　改良版

絞り込み指定
光と色の三原色

旭日旗
Z旗
日章旗　日の丸

画像素材
リンク
お絵描きVIP
Can I use...
HTMLクイックリファレンス
Pure CSS speech bubbles
The Shapes of CSS
検索
ランキング投票
ブログランキング・にほんブログ村へ
ブログランキング・にほんブログ村へ
楽天市場
防災セット
応急手当用品
消火器
防災頭巾

非常食
保存水

簡易トイレ
簡易毛布・寝袋
防災ラジオ
×

この広告は30日以上新しい記事の更新がないブログに表示されております。