templayer さん プロフィール

  •  
templayerさん: オリジナルテンプレート
ハンドル名templayer さん
ブログタイトルオリジナルテンプレート
ブログURLhttp://fanblogs.jp/templayer/
サイト紹介文画像テンプレートも簡単に作れます。
参加カテゴリー
更新頻度(1年)情報提供48回 / 33日(平均10.2回/週) - 参加 2018/06/20 04:46

templayer さんのブログ記事

  • 旭日旗
  • ◆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 right=to [続きを読む]
  • 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- [続きを読む]
  • border-radius ②楕円弧
  • ◆border-radiusで四隅の角を丸くするwidth:400px;height:400px;◆個別指定 左上width:400px;height:400px;border-top-left-radius:100px 200px;・左上=左右100px 上下200pxの楕円弧◆個別指定 右上width:400px;height:400px;border-top-right-radius:200px 100px;・右上=左右200px 上下100pxの楕円弧◆個別指定 右下width:400px;height:400px;border-bottom-right-radius:150px 300px;・右下=左右150px 上下300pxの楕円弧◆ [続きを読む]
  • max-width
  • 元々の大きさは336×280max-width:100%;幅だけ縮小されて高さはそのままmax-width:100%;height:auto;比率を保ったまま高さが自動的に縮小される [続きを読む]
  • border-radius ①円弧
  • ◆border-radiusで四隅の角を丸くするwidth:400px;height:400px;◆個別指定 左上width:400px;height:400px;border-top-left-radius:150px;・左上=半径150pxの円弧◆個別指定 右上width:400px;height:400px;border-top-right-radius:150px;・右上=半径150pxの円弧◆個別指定 右下width:400px;height:400px;border-bottom-right-radius:150px;・右下=半径150pxの円弧◆個別指定 左下width:400px;height:400px;border-bottom-l [続きを読む]
  • 画像素材
  • ナンヤカンヤのパターン素材Bg-patternsBEIZ GraphicsPixia素材ビバ!江戸フリー素材*ヒバナフリーテクスチャ素材館利用条件については、それぞれのサイでご確認ください。 [続きを読む]
  • border
  • border:10px solid #000000;border:10px double #0000ff;border:10px dotted #ff0000;border:10px dashed #00ff00;border:10px groove aqua
    ;border:10px ridge yellow;border:10px inset orange;border:10px outset purple;◆一括指定(順不同でいい) border:5px
    solid #000000;  ・枠線の太さ 種類 色◆個別指定(全部書かなくてもいい) border-top:5px solid #000
    000;  ・上だけ指定 border-right:5px solid #000000; [続きを読む]
  • paddingとmargin
  • margin:10px;padding:10px;内div margin:10px;外div padding:10px;内外2つのdivの隙間は20px内div margin:20px;外div padding:20px;内外2つのdivの隙間は40px◆paddingとmargin は合計される [続きを読む]
  • padding 〜 内側の余白
  • margin:10px;padding:10px;margin:10px;padding:0px;margin:10px;padding:20px;◆一括指定(どの書き方でもいい) padding:10px; ・上下左右10px padding:10px 20px; ・上下10px 左右20px padding:10px 20px 30px; ・上10px 左右20px 下30px padding:10px 20px 30px 40px; ・上10px 右20px 下30px 左40px◆個別指定(全部書かなくてもいい) padding-top:10px; ・上だけ10px padding-right:20px; ・右だけ20px  [続きを読む]
  • margin 〜 外側の余白
  • margin:10px;padding:10px;margin:30px;padding:10px;margin:10px;padding:10px;margin:30px;padding:10px;上下2つのdivの隙間は30px◆margin同士は大きい方が適用される◆一括指定(どの書き方でもいい) margin:10px; ・上下左右10px margin:10px 20px; ・上下10px 左右20px margin:10px 20px 30px; ・上10px 左右20px 下30px margin:10px 20px 30px 40px; ・上10px 右20px 下30px 左40px◆個別指定(全部書かなく [続きを読む]
  • classの一覧(ファンブログ限定)
  • articleImagearticleTitlebookmarkcalendardaycalendarheadcarecatecomments-bodycomments-headcomments-postcopyrightdatedescriptionentr
    yentrybodyentryBodyentryBoxentry_layerentryTBentry_textheadinginput-submitlinkTBlistCategoryArticlelistCategoryArticleImagenavinoI
    magepostedprofileBoxprofileFreeprofileFreeTxtreqItemsaturdaysideside-tagsidetitlesundaysyndicatetag_tagtag-articletag-article-post
    edtag-arti [続きを読む]