Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/eigoblock/eigoblock.net/public_html/kanjiblock-produced-by/wp-content/plugins/jetpack/_inc/lib/class.media-summary.php on line 77
Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/eigoblock/eigoblock.net/public_html/kanjiblock-produced-by/wp-content/plugins/jetpack/_inc/lib/class.media-summary.php on line 87
.thbushupercent {}
.thbushumeipercent {}
.thcheckranpercent {width:60px;}
.tdbushuranpercent {}
.tdbushumeiranpercent {}
.tdcheckranpercent {width:60px;}
.thbushukakusupercetn {}
.thbushumeikakusupercent {}
.thsaitestbuttonpercent {width:60px;}
/*↓確認用
img[id*="toumeiwidth1pxheight79px"]{border:10px solid black;}*/
/*↓部首一覧ページで使用しようとしたが、とりあえず使わない*/
.bushumeirancolor1
{background-color:#FFEAD6;}
.bushumeirancolor2
{background-color:#EAFFF4;}
.bushumeirancolor3
{background-color:#FFFFC6;
}
.bushumeirancolor4
{background-color:#e2ffc6;}
.yomikakusu
{padding-top:0px;
padding-bottom:0px;
margin-top:5px;
margin-bottom:5px;
padding-right:0px;
font-weight:bold;
border-radius:3px;
}
.yomikakusu:hover
{opacity:0.8;
cursor:pointer;
}
/*サイズが大きすぎると配置が難しくなる
.midashikanji
{width:100px;
height:100px;
border-radius:5px;
}*/
.midashikanji2
{width:60px;
height:60px;
border-radius:5px;
}
#kanjitablebox3
{
margin-top:10px;
padding-right:5px;
}
.midashikanji3
{width:100px;
height:100px;
margin-top:0px;
border-radius:10px;}
/*↓クロームとIEで表示位置が違うので使えない、クロームではtop,leftはそのまま反映されるのに、IEではtopで左右、leftで上下などになる。*/
/*.midashikanji3::before {
position:relative;
content: '';
right:-20px;
top:74px;*/
/*↑クローム、アンドロイドフォン、アイフォンでの位置(leftだと25px)。IEではleft:75px;top:-25pxでちょうどいい位置になる。-webkit-left:30px;
-webkit-top:75px;
-ms-left:35px;
-ms-top:50px;ベンダープレフィックスがうまくいかない*/
/*border:solid 2px #000;
border-radius: 3px 2px 0 2px;
}*/
/*↓枠線のみの漢字*/
.largekanjiichi3
{background-color:transparent;
font-size: 47pt;
/*スマホでは同じレイアウトにならない、padding:14px;
border:4px solid gold;
border-radius:10px;*/}
/*背景にホワイトボード画像、たてがきのときはno-repeat top, よこがきのときはno-repeat leftをcssに入れる*/
/*.haikeiwhiteboard
{background: url('http://kanjiblock-produced-by.eigoblock.net/wp-content/uploads/2018/10/miniwhiteboardyellowgreenframegazoutateyoko120px.png') no-repeat left;
padding-left:10px;}*/
.haikeiclippaper
{background: url('http://kanjiblock-produced-by.eigoblock.net/wp-content/uploads/2018/10/miniclippapergazou120px.png') no-repeat top;
}
.haikeipictureframe
{background: url('http://kanjiblock-produced-by.eigoblock.net/wp-content/uploads/2018/10/minipictureframewhitegazou120px.png') no-repeat top;
}
/*↓haikei～ありの漢字*/
.largekanjiichi4
{background-color:transparent;
font-size: 52pt;}
/*スマホでは同じレイアウトにならない、padding:14px;
border:4px solid gold;
border-radius:10px;*/
.examplehaikeiboardorange
{background: url('http://kanjiblock-produced-by.eigoblock.net/wp-content/uploads/2018/10/miniwhiteboardorangeframegazoutateyoko120px.png') no-repeat left;
padding-left:10px;}
.soukakusu3
{background-color:#FFEAD6;
}
.soukakusutd3
{}
.bushu3
{background-color:#EAFFF4;}
.bushutd3
{}
.onyomi3
{background-color:#FFFFC6;
}
.onyomitd3
{}
.onyomimidashi3
{}
.kunyomi3
{background-color:#e2ffc6;
/*訓読みが読みにくいのでいったん色を薄くした#edffdcが、もとにもどした*/}
.kunyomitd3
{}
.kunyomimidashi3
{}
.midashikanji3:hover
{opacity:0.8;
cursor:pointer;
}
#largekanjiichi
{background-color:transparent;
font-size: 29pt;}
/*midashikanji2が入っている表*/
#tableichisageru1
{margin-top:-10px;
}
/*総画数、部首が入っている表*/
#tableichisageru2
{margin-top:-25px;
}
/*音読み、訓読みが入っている表*/
#tableichisageru3
{margin-top:0px;
}
.soukakusu
{background-color:#EAFFF4;
}
.bushu
{background-color: #E2FFC6;}
.onyomi
{background-color:#FFEAD6;
border:2px solid white;}
.onyomimidashi
{border-radius: 0px 0px 0px 0px;}
.kunyomi
{background-color:#FFFFC6;
border:2px solid white;}
.kunyomimidashi
{border-radius: 0px 0px 0px 0px;}
.midashikanji:hover
{opacity:0.8;
cursor:pointer;
}
.midashinumber
{font-size:12pt;
padding-top:20px;}
input[value*="題"] {
background-color:#FFEBCD;
}
input[value*="題"]:hover {
background-color:#DEB887;
}
/*divの領域内にimg src=””で画像を挿入し、divにtext-align:centerを指定*/
.gazoucenter {
text-align: center;
}
/*画像をぼかす、1pxでもかなりボケる。0.5なども可img[src*="sentakushi"] {
filter: blur(0.5px);}*/
/*divのidを使えばホワイトボードの上にも文字を入れられる検証7、検証8、text-alignセンターは効かない？*/
#kensho7:after {
position: relative;
content: '文字を入れられる';
color:red;
font-size:14pt;
}
#kensho8:after {
position: relative;
content: 'ここの文字を点滅させるのは難しい…';
color:red;
font-size:14pt;
}
#mojitsuika1:after {
position: relative;
content: '正しい答えを選ぶ問題です。';
color:black;
font-size:12pt;
}
#mojitsuika2:after {
position: relative;
content: '答えが かくれている問題です。';
color:black;
font-size:12pt;
}
#mojitsuika3:after {
position: relative;
content: '答えを 入力する問題です。';
color:black;
font-size:12pt;
}
/*検証3のぺーじ：afterで文字を入れたいがうまくいかない*/
input[class*="mojitopkensho3"] {position: relative;
width:300px;height:180px;content:'①';}
input[class*="mojitopkensho3"]:after {
position: relative;
content:'①';
color:red;
font-size:10pt;
top:-15px;
left:110px;
}
table {
padding-top:0;
padding-bottom:0;
}
/*表と表のあいだのスペースをなくしたい→ビジュアルエディターのスタイルシート (editor-style.css)にtable {
border: none !important;
border-bottom: 1px solid #ddd !important;
border-collapse: collapse;
border-spacing: 0;
text-align: left;
margin: 0 0 1.625em;
width: 100%;
}
tr th {
border: none !important;
color: #666;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.1em;
line-height: 2.6em;
text-transform: uppercase;
}
td {
border: none !important;
border-top: 1px solid #ddd !important;
padding: 6px 10px 6px 0;
}
とあるがtable周りの余白はなくせない。リンクのa /aをtdのすぐ後ろ、/tdのすぐ前に入れると表同士が干渉しあうので、位置調整のため。もともとはpのすぐ後ろ、/pのすぐ前に入れていた（pがないと、画像の上に文字を入れられないので）margin-topで調整しようとしたが、12個のホワイトボード全部の位置調整はできない。結局↓のコードだけにしたがtable[class*="piko"] {
padding-top:0;
padding-bottom:0;
}あってもなくても同じようだ*/
table[class*="piko1"]:after {
position: relative;
content: '①';
color:red;
font-size:16pt;
top: -155px;
left: 110px;
}
table[class*="piko2"]:after {
position: relative;
content: '②';
color:red;
font-size:16pt;
top: -155px;
left: 110px;
}
table[class*="piko3"]:after {
position: relative;
content: '③';
color:red;
font-size:16pt;
top: -155px;
left: 110px;
}
table[class*="piko"]:hover {
opacity: 0.7;
padding:0.5px 0.5px 0.5px 0.5px;
/*hoverでピコピコ動く、縦横切替ボタンではid=gakiで動く*/
}
img[id*="finger"] {
position: relative;
top: 5px;
}
/*各級の第六回ボタン*/
.dai6kai {
/*margin-topがきかない*/
margin-bottom:20px;
text-align:center; width:100px; background: #f5eaef; border: 2px solid #ddbccd;}
/*各級の第〇回ボタン*/
input[value*="七"] {
text-shadow: 0 1px 0 rgba(255, 255, 255, 1); background: #e5f5ef; border: 3px solid #abddcd;box-shadow:2px 2px gray ;
}
/*各級の第〇回ボタン*/
input[value*="八"] {
text-shadow: 0 1px 0 rgba(255, 255, 255, 1); background: #fff5e5; border: 3px solid #ffddab;box-shadow:2px 2px gray ;
}
/*各級の第〇回ボタン*/
input[value*="九"] {
text-shadow: 0 1px 0 rgba(255, 255, 255, 1); background: #eaeff5; border: 3px solid #bccddd;box-shadow:2px 2px gray ;
}
/*各級の第〇回ボタン*/
input[value*="十"] {
text-shadow: 0 1px 0 rgba(255, 255, 255, 1); background: #faeaea; border: 3px solid #eebcbc;box-shadow:2px 2px gray ;
}
/*各級の第〇回ボタン*/
input[value*="第"]:hover {
opacity:0.7;
}
/*漢検の級で選ぶ、学年で選ぶ*/
input[value*="選ぶ"]:hover {
opacity:0.7;
}
.mojiichileft1px{
margin-left:1px;
}
.mojiichileft2px{
margin-left:2px;
}
.mojiichileft3px{
margin-left:3px;
}
.mojiichileft4px{
margin-left:4px;
}
.mojiichileft5px{
margin-left:5px;
}
.mojiichileft6px{
margin-left:6px;
}
.mojiichileft7px{
margin-left:7px;
}
.mojiichileft8px{
margin-left:8px;
}
.mojiichileft9px{
margin-left:9px;
}
.mojiichileft10px{
margin-left:10px;
}
.mojiichileft11px{
margin-left:11px;
}
.mojiichileft12px{
margin-left:12px;
}
.mojiichileft13px{
margin-left:13px;
}
.mojiichileft14px{
margin-left:14px;
}
.mojiichileft15px{
margin-left:15px;
}
.mojiichileft16px{
margin-left:16px;
}
.mojiichileft17px{
margin-left:17px;
}
.mojiichileft18px{
margin-left:18px;
}
.mojiichileft19px{
margin-left:19px;
}
.mojiichileft20px{
margin-left:20px;
}
#topcell1 {
width:50px;
height:290px;
text-align:center;
vertical-align:middle;}
#topcell2 {
width:50px;
height:220px;
text-align:center;
vertical-align:middle;}
#topcell3 {
width:50px;
height:350px;
text-align:center;
vertical-align:middle;}
.yokogakiyohakusakujo1{
background-color: black;
}
.yokogakiyohakusakujo2{
background-color: black;
}
.yokogakiyohakusakujo3{
background-color: black;
}
.yokogakiyohakusakujo4{
background-color: black;
}
.yokogakiyohakusakujo5{
background-color: black;
}
/*.bg-deco-whiteboardyohakunashi{
height: 500px;
}ホワイトボードの縦サイズは小さくなったが、スクロールバーとのスペースができてしまう*/
/* #mousewheelyokoscrollpage {
max-height: 550px;
}IEで、ホワイトボードの縦サイズが画面いっぱいになってしまうので対策*/
/*#mousewheelyokoscrollpage {height: 500px;width: 500px;-webkit-transform: rotateZ(-90deg) rotateY(180deg);-moz-transform: rotateZ(-90deg) rotateY(180deg);transform: rotateZ(-90deg) rotateY(180deg);-webkit-transform-origin: 0 0;-moz-transform-origin: 0 0;transform-origin: 0 0;border: none;overflow-x: hidden;}#mousewheelyokoscrollhoge{background: white;width: 500px;height: 5700px;border: none;}#mousewheelyokoscrollsection {height: 500px;width: 5700px;-webkit-transform: rotateZ(90deg) rotateX(180deg);-moz-transform: rotateZ(90deg) rotateX(180deg);transform: rotateZ(90deg) rotateX(180deg);-webkit-transform-origin: 0 0;-moz-transform-origin: 0 0;transform-origin: 0 0;position: absolute;top: 0;left: 5px;background: white;color: #fff;
}*/
/*ホワイトボード余白なし用、たてがきだとmargin-top,横書きだとmargin-left,それぞれのcssで読み込ませる
table[id*="topleftyohakuchosei"] {
margin-top:15px;
}
table[id*="topleftyohakuchosei"] {
margin-left:-15px;
}*/
/*ヒントいろいろ再テストボタン検証２用,アンドロイドフォンは横書きで55pxを４つまで（60pxだと2列になってしまう）
#ruby1
{width:55px;
height:20px;
margin-bottom:-25px;}
#ruby2
{width:55px;
height:20px;
margin-bottom:-25px;}
#ruby3
{width:55px;
height:20px;
margin-bottom:-25px;}
#ruby4
{width:55px;
height:20px;
margin-bottom:-25px;}
#hintiroiro1
{width:55px;
height:55px;
}
#hintiroiro2
{width:55px;
height:55px;
}
#hintiroiro3
{width:55px;
height:55px;
}
#hintiroiro4
{width:55px;
height:55px;
}
*/
.colorlighter :hover {
opacity: 0.8;
/*背景色は変えられない*/
}
table[id*="gaki"]:hover {
opacity: 0.7;
padding:3px 3px 3px 3px;
/*ホワイトボード縦横選択画像*/
}
a[id*="gaki"] {
outline: none;
}
a[id*="gaki"]:focus {
outline:none;
}
/*ホワイトボードのクリック時の点線枠なし*/
input[value*="答"]:hover {
opacity: .75;
}
input[value*="答"]:active {
-webkit-transform: translate(1px,1px);
-moz-transform: translate(1px,1px);
transform: translate(1px,1px);
}
input[value*="度"]:hover {
opacity: .8;
}
input[value*="ヒ"]:hover {
opacity: .7;
}
input[id*="kotaeawase"] {
width: 150px;
margin-top: 10px;
}
input[id*="kijutsukaitoukesu"] {
margin-top: 10px;
}
input[id*="hintkaisetsukakusu"] {
margin-top: 10px;
}
td[id*="example"]:hover {
opacity: 0.85;
}
/*使い方説明の例題緑色マス*/
td[id*="hintiroiro"]:hover {
opacity: 0.85;
}
/*実際の問題の緑色マス*/
input[class*="hintbutton"]:hover {
opacity: 1.00;
}
/*borderも出るようにするとピコピコ動くのでなしにする*/
/* アンドロイドフォン、アイフォン７で、margin-left:-20pxにして、tablewidth290以上の表は入らないので、270pxまではそのまま使う。*/
@media(max-width: 500px) {
table[id*="tablewidth290"] {
margin-left:-20px;
}
}
@media(max-width: 500px) {
table[id*="tablewidth280"] {
margin-left:-10px;
}
}
/* テーブルを文字数に応じてサイズ変更検証50と75の関係
#myTBL1
{width:50px;
height:75px;
}
*/
/* サイズ変更検証
#hintiroiro13
{width:80px;
height:80px;
}
#hintiroiro14
{width:80px;
height:80px;
}
#hintiroiro15
{width:50px;
height:80px;
}
#hintiroiro16
{width:50px;
height:80px;
}
*/
/* cssでヒントボタン連動させてたいが、うまくいかない
.hintiroiro11 {
background:linear-gradient(transparent 0%, transparent 35%, #006400 35%, #006400 55%, transparent 55%, transparent 65%, #006400 65%, #006400 85%, transparent 85%, transparent 100%);
}
*/
.hintbutton1 {
background:linear-gradient(transparent 0%, transparent 15%, lightgreen 15%, lightgreen 40%, transparent 40%, transparent 60%, lightgreen 60%, lightgreen 85%, transparent 85%, transparent 100%); width:50px; height:50px; border-radius:10px;
opacity:0.75;}
.hintbutton2 {
background:linear-gradient(90deg, #fff 0%, #fff 15%, #ffbf7f 15%, #ffbf7f 40%, #fff 40%, #fff 60%, #ffbf7f 60%, #ffbf7f 85%, #fff 85%, #fff 100%); width:50px; height:50px; border-radius:10px;
opacity:0.75;}
.hintbutton3 {
background:linear-gradient(135deg, #fff 0%, #fff 20%, lightskyblue 20%, lightskyblue 40%, #fff 40%, #fff 60%, lightskyblue 60%, lightskyblue 80%, #fff 80%, #fff 100%); width:50px; height:50px; border-radius:10px;
opacity:0.75;}
.hintbutton4 {
background:linear-gradient(45deg, #fff 0%, #fff 20%, lightpink 20%, lightpink 40%, #fff 40%, #fff 60%, lightpink 60%, lightpink 80%, #fff 80%, #fff 100%); width:50px; height:50px; border-radius:10px;
opacity:0.75;}
.hintbutton5 {
background:linear-gradient(90deg, #ffbf7f 0%, #ffbf7f 50%, #fff 50%, #fff 100%); width:50px; height:50px; border-radius:10px;
opacity:0.75;}
.hintbutton6 {
background:linear-gradient(270deg, lightgreen 50%, lightgreen 50%, #fff 50%, #fff 100%); width:50px; height:50px; border-radius:10px;
opacity:0.75;}
.hintbutton7 {
background:linear-gradient(lightpink 50%, lightpink 50%, #fff 50%, #fff 100%); width:50px; height:50px; border-radius:10px;
opacity:0.75;}
.hintbutton8 {
background:linear-gradient(#fff 50%, #fff 50%, lightskyblue 50%, lightskyblue 100%); width:50px; height:50px; border-radius:10px;
opacity:0.75;}
/* 漢字ブロックの記述式がうまくいかないので、英語ブロックのcssを全部入れてみたが・・・*/
.mondaiwaku {
color: #FF8C00;
background-color: white;
border: solid 3px #DEB887;
border-radius: 3px;
padding: 3px;
}
/*いつからか解答・解説の部分がクロームだけ横に長くなってしまったので
width: auto
height: autoを追加した*/
.kaisetsuwhitepaperwide-box{
background:#fff;
box-shadow:1px 1px 8px rgba(0,0,0,0.4),0 0 50px rgba(0,0,0,0.1) inset;
position:relative;
width: auto;
height: auto;
margin: 0 auto;
padding-top: 25px;
padding-left: 25px;
padding-right: 25px;
padding-bottom:3px;
/*縦書きだとpadding-bottomが0pxでよいが、横書きだと下にはみだしてしまう*/
}
/*いつからか解答・解説の部分がクロームだけ横に長くなってしまったので
width: auto;
height: auto;を追加した*/
.kaisetsukraftpaperwide-box {
position: relative;
background: #F8F0D7;
border-left: 4px dotted rgba(0,0,0,.1);
border-right: 4px dotted rgba(0,0,0,.1);
box-shadow: 0 0 5px rgba(0,0,0,.2);
margin:0 auto;
padding-top: 25px;
padding-left: 25px;
padding-right: 25px;
padding-bottom:3px;
/*縦書きだとpadding-bottomが0pxでよいが、横書きだと下にはみだしてしまう*/
color: #65513f;
width: auto;
height: auto;
}
/*マグネットテープ各種shikousakugo205*/
.magnettapetransparentlong{
background:transparent;
opacity:0.8;
border-radius:2px;
box-shadow:1px 1px transparent;
width:90%;
height:23px;
position:absolute;
top:-13px;
left:5%;
transform:rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
}
.magnettapeorangeredlong{
background:orangered;
opacity:0.8;
border-radius:2px;
box-shadow:1px 1px gray;
width:90%;
height:23px;
position:absolute;
top:-13px;
left:5%;
transform:rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
}
.magnettapemildyellowlong{
background:#FFFF33;
opacity:0.8;
border-radius:2px;
box-shadow:1px 1px gray;
width:90%;
height:23px;
position:absolute;
top:-13px;
left:5%;
transform:rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
}
.magnettapedodgerbluelong{
background:dodgerblue;
opacity:0.8;
border-radius:2px;
box-shadow:1px 1px gray;
width:90%;
height:23px;
position:absolute;
top:-13px;
left:5%;
transform:rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
}
.magnettapegraylong{
background:gray;
opacity:0.8;
border-radius:2px;
box-shadow:1px 1px lavender;
width:90%;
height:23px;
position:absolute;
top:-13px;
left:5%;
transform:rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
}
.magnettapeblacklong{
background:black;
opacity:0.8;
border-radius:2px;
box-shadow:1px 1px gray;
width:90%;
height:23px;
position:absolute;
top:-13px;
left:5%;
transform:rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
}
.magnettapeorangelong{
background:orange;
opacity:0.8;
border-radius:2px;
box-shadow:1px 1px gray;
width:90%;
height:23px;
position:absolute;
top:-13px;
left:5%;
transform:rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
}
.magnettapewhitelong{
background:white;
opacity:0.8;
border-radius:2px;
box-shadow:1px 1px 1px 1px gray;
width:90%;
height:23px;
position:absolute;
top:-13px;
left:5%;
transform:rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
}
.magnettapepurplelong{
background:purple;
opacity:0.8;
border-radius:2px;
box-shadow:1px 1px gray;
width:90%;
height:23px;
position:absolute;
top:-13px;
left:5%;
transform:rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
}
.magnettapebrownlong{
background:brown;
opacity:0.8;
border-radius:2px;
box-shadow:1px 1px gray;
width:90%;
height:23px;
position:absolute;
top:-13px;
left:5%;
transform:rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
}
.magnettapeyellowgreenlong{
background:yellowgreen;
opacity:0.8;
border-radius:2px;
box-shadow:1px 1px gray;
width:90%;
height:23px;
position:absolute;
top:-13px;
left:5%;
transform:rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
}
.magnettapegoldlong{
background:gold;
opacity:0.8;
border-radius:2px;
box-shadow:1px 1px gray;
width:90%;
height:23px;
position:absolute;
top:-13px;
left:5%;
transform:rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
}
.magnettapelavenderlong{
background:lavender;
opacity:0.8;
border-radius:2px;
box-shadow:1px 1px gray;
width:90%;
height:23px;
position:absolute;
top:-13px;
left:5%;
transform:rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
}
.magnettapeturquoiselong{
background:turquoise;
opacity:0.8;
border-radius:2px;
box-shadow:1px 1px gray;
width:90%;
height:23px;
position:absolute;
top:-13px;
left:5%;
transform:rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
}
.magnettaperedlong{
background:red;
opacity:0.8;
border-radius:2px;
box-shadow:1px 1px gray;
width:90%;
height:23px;
position:absolute;
top:-13px;
left:5%;
transform:rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
}
.magnettapebluelong{
background:blue;
opacity:0.8;
border-radius:2px;
box-shadow:1px 1px gray;
width:90%;
height:23px;
position:absolute;
top:-13px;
left:5%;
transform:rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
}
.magnettapeyellowlong{
background:yellow;
opacity:0.8;
border-radius:2px;
box-shadow:1px 1px gray;
width:90%;
height:23px;
position:absolute;
top:-13px;
left:5%;
transform:rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
}
.magnettapegreenlong{
background:green;
opacity:0.8;
border-radius:2px;
box-shadow:1px 1px gray;
width:90%;
height:23px;
position:absolute;
top:-13px;
left:5%;
transform:rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
}
.magnettapepinklong{
background:pink;
opacity:0.8;
border-radius:2px;
box-shadow:1px 1px gray;
width:90%;
height:23px;
position:absolute;
top:-13px;
left:5%;
transform:rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
}
/*上部に解説の文字（タテでずれる）、下に解説内容*/
.box29 {
margin: 2em 0;
background: #dcefff;
}
.box29 .box-title {
font-size: 1.2em;
background: #5fb3f5;
padding: 4px;
text-align: center;
color: #FFF;
font-weight: bold;
letter-spacing: 0.05em;
}
.box29 p {
padding: 15px 20px;
margin: 0;
}
.kaitouappear {
opacity: 1;
visibility: visible;
}
.kaitouappear {
opacity: 0;
visibility: hidden;
/* もともとはtransition: all .5s linear;あり、allだと重いから個別設定のがいい */
}
td[id*="mousewheelyokoscrollhover"]:hover {
opacity: 0.75;
/*背景色は変えられない*/
}
td[id*="mousewheelyokoscrollhover"]:active {
-webkit-transform: translate(1px,1px);
-moz-transform: translate(1px,1px);
transform: translate(1px,1px);
/*背景色は変えられない*/
}
td[id*="mousewheelyokoscrollmodosuhover"]:hover {
opacity: 0.75;
/*背景色は変えられない*/
}
td[id*="mousewheelyokoscrollmodosuhover"]:active {
-webkit-transform: translate(1px,1px);
-moz-transform: translate(1px,1px);
transform: translate(1px,1px);
/*背景色は変えられない*/
}
td[id*="tdspaceewap1"] {
/*
bottom,rightだけしか線でない
*/
border-top-color: blue;
border-bottom-color: red;
border-left-color: blue;
border-right-color: red;
background-color:white;
}
td[id*="tdewap1"] {
/*
bottom,rightだけしか線でない
*/
border-top-color: blue;
border-bottom-color: blue;
border-left-color: blue;
border-right-color: blue;
background-color:pink;
}
tr[id*="tr1ewap1"] {
/*
bottom,rightだけしか線でない
*/
border-top-color: blue;
border-bottom-color: blue;
border-left-color: blue;
border-right-color: blue;
background-color:pink;
}
tr[id*="tr2ewap1"] {
/*
bottom,rightだけしか線でない
*/
border-top-color: blue;
border-bottom-color: blue;
border-left-color: blue;
border-right-color: blue;
background-color:pink;
}
input[value*="ヒント"] {
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
a[value*="ヒント"] {
outline: none;
}
a[value*="ヒント"]:focus {
outline:none;
}
/*ヒントボタンのクリック時の点線枠と正方形影なし*/
table[id*="myTBL"] {
border-collapse: separate;
/*chromeは、デフォルト(collapse)だと縦横切替で枠線ダブる、その対策として*/
}
#tablenoborder {
border-spacing: 1px;
font-size:21px;
padding: 0;
margin: 0;
}
/*試行錯誤171で検証してみたが、あまりうまくいかず*/
.kakunintestmidashi1 {
position: relative;
padding-left: 15px;
}
.kakunintestmidashi1:before {
position: absolute;
content: '';
bottom: -3px;
left: -10px;
width: 0;
height: 0;
border: none;
border-left: solid 15px transparent;
border-bottom: solid 10px;
}
.kakunintestmidashi1:after {
position: absolute;
content: '';
bottom: -3px;
left: 5px;
width: 100%;
border-bottom: solid 3px;
}
.kakunintestmidashi10 {
position: relative;
padding-left: 15px;
}
.kakunintestmidashi10:before {
position: absolute;
content: '';
bottom: -3px;
right: -10px;
width: 0;
height: 0;
border: none;
border-right: solid 15px transparent;
border-bottom: solid 10px;
}
.kakunintestmidashi10:after {
position: absolute;
content: '';
bottom: -3px;
right: 5px;
width: 100%;
border-bottom: solid 3px;
}
/*木枠風、角四角ホワイトボード*/
.box205{
position: relative;
background: white;
box-shadow: 0px 0px 0px 5px tan;
border: solid 2px tan;
padding: 0.2em 0.5em;
color: #454545;
}
.box205 p {
margin: 0;
padding: 15px;
}
/*めくれが左上の隠し付箋*/
.box500{
position: relative;
background: white;
/*最後の5pxが外枠だが細くするとめくれとずれてしまう*/
box-shadow: 0px 0px 0px 5px #006400;
border: solid 1px #006400;
padding: 0.2em 0.5em;
color: #006400;
}
.box500:after{
position: absolute;
content: '';
left: -7px;
top: -7px;
/*めくれが右上の時は 0 15px 15px 0;*/
border-width: 0 0 15px 15px ;
border-style: solid;
border-color: #006400 #fff tan;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.55);
}
.box500 p {
margin: 0;
padding: 15px;
}
/*解説用ワク、太い木枠風1*/
.box25{
position: relative;
background: white;
/*色tan*/ box-shadow: 0px 0px 0px 7px #D2B48C;
border-radius:5px;
padding: 15px 15px;
margin: 10px 10px;
color: #454545;
}
.box25 p {
margin: 0;
padding: 0;
}
/*解説用ワク、細い木枠風2*/
.box28 {
padding: 15px 15px;
margin: 10px 10px;
color: #000;/*文字色*/
background: #FFF;
/*色burlywood*/ border: solid 5px #DEB887;/*線*/
border-radius: 5px;/*角の丸み*/
}
.box28 p {
margin: 0;
padding: 0;
}
/*解説用ワク、太いパステルカラー*/
.box50{
position: relative;
/*↓何のため*/
background: white;
/*色wheat*/
box-shadow: 0px 0px 0px 5px #F5DEB3;
border-radius:5px;
padding: 15px 15px;
margin: 10px 10px;
/*↓何のため*/
color: #454545;
}
.box50 p {
margin: 0;
padding: 0;
}
.jikansaappear1andhalf {
-webkit-transition: 1.5s;
-moz-transition: 1.5s;
-ms-transition: 1.5s;
transition: 1.5s;
}
.jikansaappear1s {
-webkit-transition: 1s;
-moz-transition: 1s;
-ms-transition: 1s;
transition: 1s;
}
.jikansaappearhalf1s {
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
}
table[id*="20180421"] {
background: lavender;
border-collapse:collapse;
/*border-collapse:collapse;効いてるの？ line-heightとlabelのwidthが小さくなれば狭くなる*/
}
table[id*="tategakisentakushi"] {
background: transparent;
border-collapse:collapse;
/*border-collapse:collapse;効いてるかどうか不明だが、line-heightとlabelのwidthが小さくなれば狭くなるし、margin-right,margin-leftを調整する*/
}
#myTEXT {
width:100%;
overflow:auto;
height:100%;
}
@media screen and (max-width: 999px) {
#myTEXT {
-webkit-overflow-scrolling: touch;
}
}
#myTEXT {
-webkit-text-orientation: upright;
-moz-text-orientation: upright;
-ms-text-orientation: upright;
/*選択肢内の文字が縦書きで１文字減る。PCのクロームでは半角の()は縦書き対応していない、全角の（）は縦書きになる、『』【】〔〕は縦書きに対応している、≪≫＜＞[]はダメ。PCのIEでは半角の数字、英語は縦書きにならない。かっこ系は縦書きになるが、＜＞だけはダメ。アイフォンのIEでは（）≪≫＜＞[]はダメ。safariはアイフォンのIEと同じ。アンドロイドのIE・クロームともアイフォンIE,safariと同じ。しかし、サムスン系は違うかもしれないので注意*/
}
/*ここから下が、kanjitomehane21よこがき用のソース、これを利用して例題用をつくる。no-repeatの後ろを、縦書きの時はtop、横書きの時はleftにする*/
.tomehanehaikeiboard1example
{background: url('http://kanjiblock-produced-by.eigoblock.net/wp-content/uploads/2018/11/miniwhiteboardlavenderframegazoutate170pxyoko140px.png') no-repeat;
width:140px;height:170px;margin-left:0px;}
.tomehanehaikeiboard2example
{background: url('http://kanjiblock-produced-by.eigoblock.net/wp-content/uploads/2018/11/miniwhiteboardyellowgreenframegazoutate170pxyoko140pxfingertap.png') no-repeat;
width:140px;height:170px;margin-left:0px;}
.examplekanjikakijunmondaigazou{margin-top:-32px;margin-left:11px;}
.examplekanjitomehanemondaigazou{margin-top:-32px;margin-left:11px;}
.tomehanemondaiexample{margin-top:-13px;margin-left:11px;}
table[class*="mondaibangoexample"] {background-color:transparent;
width:75px;
height:180px;
}
.dainanmonexample{display: inline-block; font-size: 10pt; background-color:#f2f2f2; padding:3px;margin-top:0px;margin-left:-15px;border-radius:0px;}
table[class*="kanjitomehanemondaiexample"] {background-color:transparent; width:170px;
height:200px;
}
table[class*="kaitomojiexample"] {background-color:transparent; width:75px;
height:180px;
}
table[class*="kanjitomehanekaitoexample"] {background-color:transparent; width:170px;
height:200px;
}
.kaitomojiexample{display: inline-block; font-size: 10pt; background-color:mistyrose; padding:3px;margin-top:0px;margin-left:-15px;border-radius:10px;}
.tomehanekaitoexample {margin-top:-12px;/*radioyokoleft401width150pxでは反映しない？ カスタムcssでは-12pxでぴったりだが、実際は上余白が狭いのでいったん-10pxにしたが*/margin-left:11px;}
.examplekanjikakijunkaitogazou{margin-top:-32px;margin-left:11px;}
.examplekanjitomehanekaitogazou{margin-top:-32px;margin-left:11px;}
input[value*="darkred"]:hover {
opacity:0.85;
}
input[value*="darkred"]:active {
-webkit-transform: translate(1px,1px);
-moz-transform: translate(1px,1px);
transform: translate(1px,1px);
}
input[value*="black"]:hover {
opacity:0.85;
}
input[value*="black"]:active {
-webkit-transform: translate(1px,1px);
-moz-transform: translate(1px,1px);
transform: translate(1px,1px);
}
input[value*="darkgreen"]:hover {
opacity:0.85;
}
input[value*="darkgreen"]:active {
-webkit-transform: translate(1px,1px);
-moz-transform: translate(1px,1px);
transform: translate(1px,1px);
}
input[value*="white"]:hover {
opacity:0.85;
}
input[value*="white"]:active {
-webkit-transform: translate(1px,1px);
-moz-transform: translate(1px,1px);
transform: translate(1px,1px);
}
input[value*="入力"]:active {
-webkit-transform: translate(1px,1px);
-moz-transform: translate(1px,1px);
transform: translate(1px,1px);
}