試行錯誤ページ161


 
 
magnetは疑似要素なので-box(白い紙)のclassが必要
 
bluemagnet1

こんにちは、リゾートあつしです。青マグネットを上側左右に2個、紙width280px

yokohama mid night

kobetsuandshudanmini

there are also few ventures that an application will be developed earnestly.

ありがとうございました。

 
 
bluemagnet2

こんにちは、リゾートあつしです。青マグネットを上側左右に2個、紙width100%

yokohama mid night

kobetsuandshudanmini

there are also few ventures that an application will be developed earnestly.

ありがとうございました。

 
 
redmagnet1
greenboardだと文字が白文字指定になってしまうので、文字が見えなくなっている

こんにちは、リゾートあつしです。

yokohama mid night

kobetsuandshudanmini

there are also few ventures that an application will be developed earnestly.

ありがとうございました。

 
 
redmagnet2
greenboardだと文字が白文字指定になってしまうので、spanで黒文字にしている

こんにちは、リゾートあつしです。

yokohama mid night

kobetsuandshudanmini

there are also few ventures that an application will be developed earnestly.

ありがとうございました。

 
 
yellowmagnet1

こんにちは、リゾートあつしです。

yokohama mid night

kobetsuandshudanmini

there are also few ventures that an application will be developed earnestly.

ありがとうございました。

 
 
yellowmagnet2

こんにちは、リゾートあつしです。

yokohama mid night

kobetsuandshudanmini

there are also few ventures that an application will be developed earnestly.

ありがとうございました。

 
 
 
 
↓font-family: ‘HG行書体’;
英語ブロック eigo えいご
 
↓font-family: ‘HG正楷書体-PRO’;
英語ブロック eigo えいご
 
↓font-family: ‘HGP行書体’;
英語ブロック eigo えいご
 
↓font-family: ‘HGP創英角ゴシックUB’;
英語ブロック eigo えいご
 
↓font-family: ‘HGP創英角ポップ体’;
英語ブロック eigo えいご
 
↓font-family: ‘HG創英角ポップ体’;
英語ブロック eigo えいご
 
↓font-family: ‘Comic Sans MS’;
英語ブロック eigo えいご
 
↓font-family: ‘Verdana’;
英語ブロック eigo えいご
 
↓font-family: ‘Century Gothic’;
英語ブロック eigo えいご
 
↓font-family: ‘Lucida Sans Unicode’;
英語ブロック eigo えいご
 
↓font-family: ‘Georgia’;
英語ブロック eigo えいご
 
↓font-family: ‘Meiryo UI’;
英語ブロック eigo えいご
 
↓font-family: ”;
英語ブロック eigo えいご
 

 
 
 
背景は白い紙(whitepapernarrow-box)・・・width:280px、テープを左右に2枚(margin指定でうまくいく)
maste-serotape-left/right



テキスト

 
maste-purpledot-left/right



テキスト

 
maste-bluedot-left/right



テキスト

 
maste-stripepink-left/right



テキスト

 
maste-stripeblue-left/right



テキスト

 
maste-stripeburlywood-left/right



テキスト

 
背景は白い紙(whitepaperwide-box)・・・width:100%、テープを左右に2枚
maste-serotape-left/right



テキスト

 
maste-purpledot-left/right



テキスト

 
maste-bluedot-left/right



テキスト

 
maste-stripepink-left/right



テキスト

 
maste-stripeblue-left/right



テキスト

 
maste-stripeburlywood-left/right



テキスト

 
 
背景はクラフト紙(whitepapernarrow-box)・・・width:280px、テープを左右に2枚
maste-serotape-left/right



テキスト

 
maste-purpledot-left/right



テキスト

 
maste-bluedot-left/right



テキスト

 
maste-stripepink-left/right



テキスト

 
maste-stripeblue-left/right



テキスト

 
maste-stripeburlywood-left/right



テキスト

 
背景はクラフト紙(kraftpaperwide-box)・・・width:100%、テープを左右に2枚
maste-serotape-left/right



テキスト

 
maste-purpledot-left/right



テキスト

 
maste-bluedot-left/right



テキスト

 
maste-stripepink-left/right



テキスト

 
maste-stripeblue-left/right



テキスト

 
maste-stripeburlywood-left/right



テキスト

 
 

背景は白い紙(whitepapernarrow-box)・・・width:280px、テープ色は数種あり
serotapeshort

yokohama mid night

kobetsuandshudanmini

there are also few ventures that an application will be developed earnestly.

 
serotapeshortstripepink

yokohama mid night

kobetsuandshudanmini

there are also few ventures that an application will be developed earnestly.

 
 
serotapeshortstripeblue

yokohama mid night

kobetsuandshudanmini

there are also few ventures that an application will be developed earnestly.

 
 
serotapeshortstripeburlywood

yokohama mid night

kobetsuandshudanmini

there are also few ventures that an application will be developed earnestly.

 
 
serotapeshortpurpledot

yokohama mid night

kobetsuandshudanmini

there are also few ventures that an application will be developed earnestly.

 
 
serotapeshortbluedot

yokohama mid night

kobetsuandshudanmini

there are also few ventures that an application will be developed earnestly.

 
白い紙(whitepaperwide-box)・・・width:100%、serotapemiddle(50%)left26%、テープ色は数種あり

yokohama mid night

kobetsuandshudanmini

there are also few ventures that an application will be developed earnestly.

 
serotapeshortstripepink

yokohama mid night

kobetsuandshudanmini

there are also few ventures that an application will be developed earnestly.

 
 
serotapeshortstripeblue

yokohama mid night

kobetsuandshudanmini

there are also few ventures that an application will be developed earnestly.

 
 
serotapeshortstripeburlywood

yokohama mid night

kobetsuandshudanmini

there are also few ventures that an application will be developed earnestly.

 
 
serotapeshortpurpledot

yokohama mid night

kobetsuandshudanmini

there are also few ventures that an application will be developed earnestly.

 
 
serotapeshortbluedot

yokohama mid night

kobetsuandshudanmini

there are also few ventures that an application will be developed earnestly.

 
 
白い紙(whitepaperwide-box)・・・width:100%、serotapelong(90%)left5%、テープ色は数種あり

yokohama mid night

kobetsuandshudanmini

there are also few ventures that an application will be developed earnestly.

 
serotapeshortstripepink

yokohama mid night

kobetsuandshudanmini

there are also few ventures that an application will be developed earnestly.

 
 
serotapeshortstripeblue

yokohama mid night

kobetsuandshudanmini

there are also few ventures that an application will be developed earnestly.

 
 
serotapeshortstripeburlywood

yokohama mid night

kobetsuandshudanmini

there are also few ventures that an application will be developed earnestly.

 
 
serotapeshortpurpledot

yokohama mid night

kobetsuandshudanmini

there are also few ventures that an application will be developed earnestly.

 
 
serotapeshortbluedot

yokohama mid night

kobetsuandshudanmini

there are also few ventures that an application will be developed earnestly.

 
 

背景はクラフト紙(kraftpapernarrow-box)・・・width:280px、テープ色は数種あり
serotapeshort

yokohama mid night

kobetsuandshudanmini

there are also few ventures that an application will be developed earnestly.

 
serotapeshortstripepink

yokohama mid night

kobetsuandshudanmini

there are also few ventures that an application will be developed earnestly.

 
 
serotapeshortstripeblue

yokohama mid night

kobetsuandshudanmini

there are also few ventures that an application will be developed earnestly.

 
 
serotapeshortstripeburlywood

yokohama mid night

kobetsuandshudanmini

there are also few ventures that an application will be developed earnestly.

 
 
serotapeshortpurpledot

yokohama mid night

kobetsuandshudanmini

there are also few ventures that an application will be developed earnestly.

 
 
serotapeshortbluedot

yokohama mid night

kobetsuandshudanmini

there are also few ventures that an application will be developed earnestly.

 
 
クラフト紙(kraftpaperwide-box)・・・width:100%、serotapemiddle(50%)left26%、テープ色は数種あり

yokohama mid night

kobetsuandshudanmini

there are also few ventures that an application will be developed earnestly.

 
serotapeshortstripepink

yokohama mid night

kobetsuandshudanmini

there are also few ventures that an application will be developed earnestly.

 
 
serotapeshortstripeblue

yokohama mid night

kobetsuandshudanmini

there are also few ventures that an application will be developed earnestly.

 
 
serotapeshortstripeburlywood

yokohama mid night

kobetsuandshudanmini

there are also few ventures that an application will be developed earnestly.

 
 
serotapeshortpurpledot

yokohama mid night

kobetsuandshudanmini

there are also few ventures that an application will be developed earnestly.

 
 
serotapeshortbluedot

yokohama mid night

kobetsuandshudanmini

there are also few ventures that an application will be developed earnestly.

 
 
クラフト紙(kraftpaperwide-box)・・・width:100%、serotapelong(90%)left5%、テープ色は数種あり

yokohama mid night

kobetsuandshudanmini

there are also few ventures that an application will be developed earnestly.

 
serotapeshortstripepink

yokohama mid night

kobetsuandshudanmini

there are also few ventures that an application will be developed earnestly.

 
 
serotapeshortstripeblue

yokohama mid night

kobetsuandshudanmini

there are also few ventures that an application will be developed earnestly.

 
 
serotapeshortstripeburlywood

yokohama mid night

kobetsuandshudanmini

there are also few ventures that an application will be developed earnestly.

 
 
serotapeshortpurpledot

yokohama mid night

kobetsuandshudanmini

there are also few ventures that an application will be developed earnestly.

 
 
serotapeshortbluedot

yokohama mid night

kobetsuandshudanmini

there are also few ventures that an application will be developed earnestly.

 

 
 
 
 

 
tape1

マステ風見出し①

テキスト

 
tape2

マステ風見出し②

テキスト

 
 
 
 
 
 
フォントファミリーの比較
↓ノーマルバージョン
英語ブロック eigo えいご
 
 
 
↓font-family: ‘Chewy’, sans-serif;
英語ブロック eigo えいご
 
↓font-family: ‘Chewy’, serif;
英語ブロック eigo えいご
 
↓font-family: ‘Chewy’, cursive;
英語ブロック eigo えいご
 
↓font-family: ‘Chewy’, fantasy;
英語ブロック eigo えいご
 
↓font-family: ‘Chewy’, monospace;
英語ブロック eigo えいご
 
 
 
↓font-family: ‘Lato’, sans-serif;
英語ブロック eigo えいご
 
↓font-family: ‘Lato’, serif;
英語ブロック eigo えいご
 
↓font-family: ‘Lato’, cursive;
英語ブロック eigo えいご
 
↓font-family: ‘Lato’, fantasy;
英語ブロック eigo えいご
 
↓font-family: ‘Lato’, monospace;
英語ブロック eigo えいご
 
 
 
↓font-family: ‘Noto Sans JP’, sans-serif;
英語ブロック eigo えいご
 
↓font-family: ‘Noto Sans JP’, serif;
英語ブロック eigo えいご
 
↓font-family: ‘Noto Sans JP’, cursive;
英語ブロック eigo えいご
 
↓font-family: ‘Noto Sans JP’, fantasy;
英語ブロック eigo えいご
 
↓font-family: ‘Noto Sans JP’, monospace;
英語ブロック eigo えいご
 
 
 
↓font-family: ‘Impact’, sans-serif;
英語ブロック eigo えいご
 
↓font-family: ‘Impact’, serif;
英語ブロック eigo えいご
 
↓font-family: ‘Impact’, cursive;
英語ブロック eigo えいご
 
↓font-family: ‘Impact’, fantasy;
英語ブロック eigo えいご
 
↓font-family: ‘Impact’, monospace;
英語ブロック eigo えいご
 
 
 
sans-serif …… ゴシック系のフォント
serif …… 明朝系のフォント
cursive …… 筆記体・草書体のフォント
fantasy …… 装飾的なフォント
monospace …… 等幅フォント
 

 
 
font awesome 指・・・画像が小さいと上のメッセージと重なってしまう
font-family: ‘Chewy’, cursive;

Click here!
 
 
font-family: ‘Lato’, cursive;

Click here!
 
 
font-family: ‘Noto Sans JP’, cursive;

Click here!
 
 
font-family: ‘Impact’, cursive;

Click here!
 
 
 
♥・・・ハート・・・画像が小さいと上のメッセージと重なってしまう

 
ド キ ド キ
 
 
 
 
font awesome 注意・・・画像が小さいと上のメッセージと重なってしまう
divでiを挟まないと 適応されない

注 意
 
 
 
 

 
 
BUTTON1
 
BUTTON2
 
 
 
minicanvasgazou
font-family: ‘HG行書体’,’HGP行書体’,’HG正楷書体-PRO’,serif;

英語ブロック

 
pictureframebrown
font-family: ‘HG行書体’,’HGP行書体’,’HG正楷書体-PRO’,serif;

英語ブロック

 
 
 
 
 
↓ 強調1
mojigradient1

英語ブロック

 
↓ 強調2
mojigradient2

英語ブロック

 
↓ 立体1
mojigradient3

英語ブロック

 
↓ 立体2
mojigradient4

英語ブロック

 
↓ アウトライン縁取り
mojigradient5

英語ブロック

 
↓ エンボス
mojigradient6

英語ブロック

 
↓ ネオン
mojigradient7

英語ブロック

 
↓ バックライト
mojigradient8

英語ブロック

 
↓ レインボー
mojigradient9

英語ブロック

 
↓ ぼかし
mojigradient10

英語ブロック

 

↓before, afterあり(title属性あり)
mojigradient11

英語ブロック

 
↓before, afterあり(title属性あり)
mojigradient12

英語ブロック

 
 
 
↓before, afterあり(title属性なし)
mojigradient13

英語ブロック

 
 
 
↓text-shadowのみ
mojigradient14

英語ブロック

 
↓text-shadowのみ
mojigradient15

英語ブロック

 
↓text-shadowのみ 炎
mojigradient16

英語ブロック

 
↓text-shadowのみ レトロ
mojigradient17

英語ブロック

 
mojigradient18 影

英語ブロック

 
 
 
mojigradient19 背景レインボー

英語ブロック

 
 
 
mojigradient20 背景レインボー(角丸)

英語ブロック

 
 

 
↓試行錯誤ページ151にもあり
mini2holespocketbookmihirakigazou2moji

mini6holespocketbookmihirakigazou2moji

mini2colorsfilemihirakigazou2moji

 
 
mini6holespocketbookmihirakigazou2mojigradient

 
 
mini2holespocketbookmihirakigazou2mojigradient

 
 
mini2colorsfilemihirakigazou2mojigradient

 
 
 
mini2holespocketbookmihirakigazou2mojiflashing

mini6holespocketbookmihirakigazou2mojiflashing

mini2colorsfilemihirakigazou2mojiflashing

↑試行錯誤ページ151にもあり
 
 
midashi4

あいうえおかさしすけそたなにぬねのはまみむめもやゆよわんがぎぐげござじずぜぞだぢづでどばびぶべぼきゃきゅきょしゃしゅしょfjgghjiuiuytyrtsshdkghjhhgfereafsgdhftklyhfd

 

あいうえおかさしすけそたなにぬねのはまみむめもやゆよわんがぎぐげござじずぜぞだぢづでどばびぶべぼきゃきゅきょしゃしゅしょfjgghjiuiuytyrtsshdkghjhhgfereafsgdhftklyhfd

 


↓白丸の右横に並ばない(フォームに style=”display: inline-block; border-style: none;”を追加すると横並びする)
 

 

 

 

 

 

 
square_btn1(input内)

↑動作OK、font-size: 8px; font-weight: ; font-family: ;
inputに入れると、文字の感じが変わる・・・
IEだと『かくす』の文字がほとんど見えない
 
square_btn1(そのまま、inputに入っていない)

かくす

line-height: 1.8; IEだと上部に表示される
 
 
square_btn2

かくす

↑ IEは下部をクリックしないとactiveしない
 
↓ width=”43″ height=”23
1
 
2
 
↓ inputに入っていない、box-shadowは使える
3
↑ opacity: 0;
 
↓ inputに入っている、cssでbox-shadowあり、上に文字を入れたいが・・・
3
↑ opacity: 0; type=”text”だと背景画像を使える
 
3
↑ opacity: 0; type=”image”だと背景画像を使えない
 
4whitereveal4
 
5whitereveal5
↑ width=”43″ height=”23
 
6whitereveal6
↑ もともとwidth=”43″ height=”23で作成したもの
7darkgreencover7
↑ width=”770″ height=”411で作成したもの
 
8darkgreencover8
↑ width=”428″ height=”228で作成したもの
 
9darkgreencover9 
↑ width=”99″ height=”54で作成したもの、文字をpng方式で作ったが・・・
 
blackcover7 width=”1278″ height=”515″

width=”770″ height=”411″

darkgreencover8 width=”428″ height=”228″
 
 
 
 

http://eigoblock.net/wp-content/uploads/2017/01/whitereveal.png
input type=”image” src=”http://eigoblock.net/wp-content/uploads/2017/10/whitereveal3.png

単語
whitereveal
発音
whitereveal4
意味
whitereveal5
? を
単語
whiterevealwakunashifutoji
発音
whiterevealwakunashihosoji
意味
? を
summer [マァ]
winter [ンタァ]
spring [スプング]
fall [ふォール] 秋 ※アメリカ英語で
もう一度
 
単語 を
 
blackcover4
もう一度
 
発音 を
 
darkredcover5
もう一度
 
意味 を
 
darkgreencover2

覚えたら
□に戻す


 
http://eigoblock.net/wp-content/uploads/2016/10/blackcover2.png
 
http://eigoblock.net/wp-content/uploads/2016/10/darkredcover2.png
 
http://eigoblock.net/wp-content/uploads/2016/10/darkgreencover2.png
 
http://eigoblock.net/wp-content/uploads/2017/01/saitest6.png

→shikousakugo217にもある