templayer さん プロフィール

  •  
templayerさん: cssカスタマイズ
ハンドル名templayer さん
ブログタイトルcssカスタマイズ
ブログURLhttp://fanblogs.jp/templayer/
サイト紹介文いじりやすいテンプレートを使って作ったオリジナルテンプレート。画像テンプレートも簡単に作れます。
参加カテゴリー
更新頻度(1年)情報提供60回 / 87日(平均4.8回/週) - 参加 2018/06/20 04:46

templayer さんのブログ記事

  • display:flex;
  •  s側の線・・・開始線/start   e側の線・・・終了線/endrowrow-reversecolumncolumn-reversenowraps 主軸→ ┏━━━交┃①②③┃差 ━━━┛軸     e↓  ←主軸 s  ━━━┓ ┃③②①┃交 ┗━━━ 差e     軸      ↓s 交差軸→ ┏━主┃①┃軸┃②┃↓┃③┃  ━┛    e    e  ━┓↑┃③┃主┃②┃軸┃①┃ ┗━s 交差軸→wraps 主軸→ ┏━━━交┃①②③┃差┃ [続きを読む]
  • 光と色の三原色
  • ◆光の三原色◆html◆css.hikari3{width:300px;height:calc(300px*0.95534180126);background-image:radial-gradient(circle closest-side at 50% 34.891526037%,red calc(100% - 1px),transparent calc(100% - 1px)),radial-gradient(circle closest-side at calc(100%/3) 65.108473962%,lime calc(100% - 1px),transparent calc(100% - 1px)),radial-gradient(circle closest-side at calc(200%/3) 65.108473962%,blue calc(100% [続きを読む]
  • filter
  • ()の中は変化なしの値//の右は値の範囲filter:blur(0px); //0px~filter:brightness(100%); //0%~filter:contrast(100%); /
    /0%~filter:grayscale(0%); //0%~100%filter:hue-rotate(0deg); //~0deg~filter:invert(0%); //0%~100%filter:opacity(100%); //0%~100%fil
    ter:saturate(100%); //0%~filter:sepia(0%); //0%~100%filter:drop-shadow(0px 0px 0px transparent); //~0px~ ~0px~ 0px~ colorcode/rgb/
    rgba/colorname空白でつなげ [続きを読む]
  • 旭日旗
  • ◆border-radiusとborderで描く◆html◆css/*-------------------   生地-------------------*/.risingsun,.risingsun1,.ri
    singsun2,.risingsun3,.risingsun4{width:4500px;height:3000px;overflow:hidden;position:relative;}/*-------------------   旭
    日-------------------*/.risingsun::before{content:"";display:block;width:1500px;height:1500px;background-color:#be003f;b
    order-radius:50%;position:absolute;top [続きを読む]
  • 開閉パネル 改良版
  • ◆最初は開いていて で閉じる××を で閉じる  で開くあんたがたどこさ 肥後さ肥後どこさ 熊本さ熊本どこさ 船場さ 船場山には狸がおってさそれを猟師が鉄砲で撃ってさ煮てさ 焼いてさ 食ってさそれを木の葉でちょいとかぶせ◆html×見出し本文◆最初は閉じていて で開く× で開く ×を で閉じる通りゃんせ 通りゃんせここはどこの細通じゃ天神さまの細道じゃちっと通して下し [続きを読む]
  • アコーディオン
  • ◆最初は一つだけ開いている して開く 他を して閉じるいろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす して開く 他を して閉じる祇園精舍の鐘の声 諸行無常の響きあり娑羅双樹の花の色 盛者必衰の理をあらわす奢れる人も久しからず ただ春の夜の夢の如し猛き者もついには滅びぬ ひとえに風の前の塵に同じ して開く 他を して [続きを読む]
  • 開閉パネル 詳細版
  • ◆最初は開いていて で閉じる で閉じたり開いたりいろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす◆htmlkaihei1">見出しkaihei1" class="kaihei" checked="checked">本文◆最初は閉じていて で開く で開いたり閉じたりいろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす◆htmlkaihei2">見出しkaihei [続きを読む]
  • 開閉パネル 簡易版
  • ◆最初は開いていて で閉じる で閉じたり開いたりいろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす◆html見出し本文◆最初は閉じていて で開く で開いたり閉じたりいろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす◆html見出し本文◆css.kaihei{display:none;}input:checked~.kaihei{display:block [続きを読む]
  • 日章旗 日の丸
  • ◆radial-gradient()で描く◆html◆css.hinomaru1{width:450px;height:300px;background-color:white;background-image:radial-gradi
    ent(circle closest-side,#be003f 60%,transparent 60%);border:1px solid;}◆border-radiusで描く◆html◆css.hinomaru2{width:450p
    x;height:300px;background-color:#ffffff;border:1px solid;position:relative;}.hinomaru2::before{content:"";display:block;
    width:40%;height:60%;background- [続きを読む]
  • box-sizing
  • ◆content-boxとborder-boxのちがい width:500px; height:100px; padding:0;box-sizing:content-box;いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす:hover{padding:10px;}//paddingがwidth, heightに含まれないbox-sizing:border-box;いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす:hover{padding:10px;}//paddingがwidt [続きを読む]
  • 絞り込み指定
  • .aaa{background-color:yellow}.bbb{background-color:gold}.aaa.bbb{background-color:aqua;}//空白なし、順不問、下に同じ.bbb.aaa{background-color:skyblue;}//空白なし、順不問、上に同じ.aaa>.bbb{background-color:orange;}/*「>」でつなぐ、親要素の中の「子要素」にしぼりこんで適用*/.bbb>.aaa{background-color:pink;}/*「>」でつなぐ、親要素の中の「子要素」にしぼりこんで適用*/.aaa .bbb{background-color:orange;} [続きを読む]
  • repeating-linear-gradient()
  • ◆最後の色に位置指定(必須)すると、そこを境界にして繰り返すbackground-image:repeating-linear-gradient(to right,aqua,white 100px);・100pxごとに水色から白へのグラデーションを繰り返すbackground-image:repeating-linear-gradient(90deg,yellow,yellow 100px,aqua 100px,aqua 200px);・200pxごとに黄色と水色のベタ塗りを繰り返す◆最初の色に位置指定すると、そこを境界にして前後に繰り返すbackground-image:repeating [続きを読む]
  • Z旗
  • 皇国ノ興廃此ノ一戦ニ在リ、各員一層奮励努力セヨ◆borderで描く◆html◆css.z-flag{width:0;height:0;borde
    r-top:150px solid #ffff00;border-right:225px solid #003399;border-bottom:150px solid #ff0000;border-left:225px solid #000000;}CSS
    だけで三角形を作ろう! その1:borderプロパティの仕組みをマスター その2:吹き出しやリボン
    をデザインする [続きを読む]
  • linear-gradient() ③方向指定
  • ◆方向、開始色、終了色の順番で指定・方向は、方向名か角度で指定・色は、色名、16進トリプレット(#------)、rgb、rgbaで指定◆↑ to top=0deg 下から上へ 開始線は9時の針、12時の方向へbackground-image:linear-gradient(to top,yellow 50%,aqua 50%);background-image:linear-gradient(0deg,yellow 50%,aqua 50%);・下から上へ、黄色で始まり、水色で終わる・下半分は黄色のベタ塗り・上半分は水色のベタ塗り◆? to top r [続きを読む]
  • linear-gradient() ②位置指定あり
  • ◆方向、開始色、終了色の順番で指定・方向は、方向名か角度で指定・色は、色名、16進トリプレット(#------)、rgb、rgbaで指定◆最初の色に位置指定(開始から指定位置までベタ塗り)background-image:linear-gradient(to right,yellow 50%,aqua);・開始〜50%は黄色のベタ塗り・50%〜終了は黄色から水色へのグラデーション◆最後の色に位置指定(指定位置から終了までベタ塗り)background-image:linear-gradient(to right,yellow, [続きを読む]
  • linear-gradient() ①位置指定なし
  • ◆方向、開始色、終了色の順番で指定・方向は、方向名か角度で指定・色は、色名、16進トリプレット(#------)、rgb、rgbaで指定◆色と色の間はグラデーションになるbackground-image:linear-gradient(to top,yellow,aqua);・下が黄色、上が水色・中間は黄色から水色へのグラデーション◆同じ色を続けて指定すればベタ塗りになるbackground-image:linear-gradient(to right,yellow,yellow);・黄色のベタ塗りbackground-image:linear- [続きを読む]