試行錯誤ページ155



 
太字の下線です。
 
背景色です。
 
midashi3 / tangochomidashimojiichialphabet

あいうえおかさしすけそたなにぬねのABCDygyggあいうえおかさしすけそたなにぬねのABCDgigg

↑ tangochomidashimojiichialphabetあり
 

 
Welcome to Eigo Block

英語
無料
で 学べる
英 語 ブ ロ ッ ク

(^-^)/
 


cell11111, cell22222, cell33333 (cssで左上の色だけ変えている)
cell22222、33333は点滅(blinkは非推奨)
試行錯誤160ではlinear gradientで色を変えている
 
 
 
 
 
 
 
 
tangochomidashi4(リングの位置、top: 45%; left: -10px;)

ココが良い・悪いかざりかざり背景かざりハかざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景イケイ飾り背景、かざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景かざり背景かざりハイケイ飾り背景かざりかざり背景かざりハかざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景かざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景イケイ飾り背景、かざり背景かざりハイケイ飾り背景.

 
 
tangochomidashi4(リングの位置、top: 45%; left: -10px;)

ココが良い・悪いかざりかざり背景かざりハかざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景イケイ飾り背景、かざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景かざり背景かざりハイケイ飾り背景かざりかざり背景かざりハかざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景かざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景イケイ飾り背景、かざり背景かざりハイケイ飾り背景.

 
 
 
 

tangochomidashiwhite(line-height: 1.8) / tangochomidashimojiichimargintop0bottom0(margin-left: 25px;
margin-right: 10px;
margin-top: 0;
margin-bottom: 0;)

★一行…margin-topが0だと、アルファベット小文字はリングの横ラインよりやや上にあるが、ひらがなはさらに上にある

ygyggあいうえおかigg

↑ tangochomidashimojiichimargintop0bottom0あり
 

ygyggあいうえおかigg

↑ tangochomidashimojiichimargintop7bottom0あり(margin-left: 25px; margin-right: 10px; margin-top: 7px; margin-bottom: 0;)
 

ygyggあいうえおかigg

↑ tangochomidashimojiichimargintop0bottom0あり、font-size: 20pt…レスポンシブでも右に飛び出さない
 

あいうえおかygyggigg

↑ tangochomidashimojiichimargintop7bottom0あり、font-size: 20pt…レスポンシブでも右に飛び出さない
 

ygyggあいうえおかigg

↑ tangochomidashimojiichimargintop0bottom0なし
 

★★二行以上…mojiichiありで、アルファベットや数字が横幅を超えると、改行されないので文字が右に飛び出す。
注意:パソコン画面でOKでも、スマホだと飛び出してしまう。フォントサイズと長さに気を付ける

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

↑ tangochomidashimojiichimargintop0bottom0あり
 

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

↑ tangochomidashimojiichimargintop0bottom0なし、アルファベットや数字が横幅を超える長さでも改行される。
 

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

↑ tangochomidashimojiichimargintop0bottom0あり、font-size: 20pt…レスポンシブでも右に飛び出さない
狭めていってスマホ幅ぐらいだと右に飛び出す
 

ygyggあきょしゃしゅしょ

↑ tangochomidashimojiichimargintop0bottom0あり、font-size: 40pt・・・文字が右に飛び出す
 

 

 
 
tangochomidashilightpink / tangochomidashimojiichihiragana(
margin-left: 25px;
margin-right: 10px;
margin-top: 16px; ひらがなで横ライン揃う
margin-bottom: 10px;)

あいうえおかさしすけそたなにぬねのgigg

↑ tangochomidashimojiichihiraganaあり
 

ygygggiggyABCDEFGあいうえおかさしすけそたなにぬねのABCDEFGgiggygygggiggyABCDEFGあいうえおかさしすけそたなにぬねのABCDEFGgigg

↑ tangochomidashimojiichihiraganaあり
 
tangochomidashigold / tangochomidashimojiichialphabet(
margin-left: 25px;
margin-right: 10px;
margin-top: 17px;アルファベット小文字で横ライン揃う
margin-bottom: 10px;)

ygygggiggygiggABCDEFG

↑ tangochomidashimojiichialphabetあり
 

あいうえおかさしすけそたなにぬねのABCDEFGygygggiggygiggygygggiggyABCDEFGあいうえおかさしすけそたなにぬねのABCDEFGgigg

↑ tangochomidashimojiichialphabetあり
 
 
 

 

↑ tangochomidashimojiichimargintop0bottom0 あり
 
↓font-size:22px

↑ tangochomidashimojiichimargintop0bottom0 あり
 
↓font-size:20px

↑ tangochomidashimojiichimargintop0bottom0 あり
 
↓font-size:18px

 
↓font-size:16px

 

けそたなにぬねのgigg

 
 
 

あいうえおかさしすけそたなにぬねのgiggけそたなにぬねのgigg

 
 
 

ygygggiggyあいうえおかきくけこさしすせそたちつてとなにぬねのまみむめもやゆよがぎぐげござじずぜぞ

↑ midashi1 左右ともmargin pxで調整, レスポンシブ対応OK
 
 
 

あいうえigg

 
 

 
 

haikeimaru1&kashiramoji1 2ついっしょにはむずかしい

abcdefg

 
 
 

武者小路実篤

・・・ div /div
 
 

あいうえお

・・・ p /p
 
 

あいうえお ・・・span /spanではダメ
 
 
 
 
haikeimaru3 (30x30px)・・・spanにしないと、文字が2行になってしまう(p、divは不可)
abcdefg ・・・フォントサイズ30pt
 
者小路実篤 ・・・フォントサイズ30pt

いうえお ・・・フォントサイズ30pt

いうえお ・・・フォントサイズ30pt、太字
 

 
haikeimaru2 (20x20px)・・・spanにしないと、文字が2行になってしまう(p、divは不可)
abcdefg ・・・フォントサイズ20pt
 
者小路実篤 ・・・フォントサイズ20pt

いうえお ・・・フォントサイズ20pt

いうえお ・・・フォントサイズ20pt、太字
 

haikeimaru1 (10x10px)・・・spanにしないと、文字が2行になってしまう(p、divは不可)
abcdefg ・・・フォントサイズ15pt
 
者小路実篤 ・・・フォントサイズ15pt

いうえお ・・・フォントサイズ15pt

いうえお ・・・フォントサイズ15pt、太字
 

kashiramoji3

abcdefg
武者小路実篤

・・・ div /div

あいうえお

・・・ p /p

あいうえお ・・・span /spanではダメ
 
kashiramoji2

abcdefg
武者小路実篤

・・・ div /div

あいうえお

・・・ p /p

あいうえお ・・・span /spanではダメ
 
 
kashiramoji1

abcdefg
武者小路実篤

・・・ div /div

あいうえお

・・・ p /p

あいうえお ・・・span /spanではダメ
 
 
 



↓ 動く文字(メッセージを1種類しか使えない、改行可)

↑ <p></p>をなくせば一行目だけは●の右に並ぶ