kuroko's English

CSSでボックスの配置方法を決めるpositionプロパティ。 まだCSSを勉強しはじめのころ、とてもつまづいたところでした。

positionプロパティには、次の4つの値があります。

static（指定なし）

relative（相対位置）

absolute（絶対位置）

fixed（固定の絶対位置）

box1〜box4の4つのボックスを作り、それぞれに次のようにCSSを与えると...

.box1{ position: static; } .box2{ position: relative; top: 150px; left: 150px; } .box3{ position: absolute; top: 150px; left: 150px; } .box4{ position: fixed; bottom: 0; right: 0; }

こんな配置になります。

positionプロパティの詳しい解説は、こちらを参考に。 HTMLクイックリファレンス - position

"fixed"って過去形なの?

static、relative、absolute、fixedの"fixed"って、 これだけ過去形じゃないの？ "ed"ついてるし...

って思ったので、それぞれの元の意味を調べてみました。

はじめの3つの主な意味は、

static

静的な、静止の、活気のない、おもしろみのない、空電の、静電気の

relative

比較上の、相対的な、相関的な、(…と)関係があって、関連して、(…に)呼応して、比例して、関係を示す、関係詞に導かれた

absolute

(比較・相対を離れて)絶対の、絶対的な、完全な、まったくの、純粋の、無条件の、制約のない、疑問の余地のない、明白な、確かな

Weblioより

という意味で、基本はすべて"形容詞"。 もちろんだけど、ちゃんとCSSの意味合いとも合っている。

では、"fixed"を調べてみると、

fixed

固定した、据え付けの、動かない、固執的な、とらわれた、決まった、確固たる、不変の、安定した、不正工作された

Weblio - fixed より

っていう形容詞あるではないか！！ fixの過去形じゃなかったんだ...

ということで、納得。

ちなみに"fix"

fix

(…を)(…に)固定する、動かないようにする、(…を)(…に)取り付ける、据える、(ある場所に)しっかり取り付ける、定着させる、(…を)とどめる、確固としたものにする、明確にする、(…に)定める

Weblio - fix より

こちらは動詞だけど、意味は同じような感じ。

fixってよく何かを修理するときに使ってたな... 例えば、 ・fix my watch ・fix my bicycle みたいに。 こっちの意味もあるようです。 だから、過去形という前に違和感があったけども、スッキリ！

fixedを使った例

a fixed price （定価） a fixed idea （固定観念）

Weblio - fixed より

とありますが、あまり会話で使われることはない？かも。

今回使ったソースはこちら。

お知らせや記事などの表示で、長すぎる文字列の一部を表示して、省略したいときってありますよね？

CSSで文字列の text-overflow: ellipsis; を使うと、文字列の省略をして末尾に…を追加することができます。

p{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

はい、でました。 ellipsis。

予想はできるけども、そもそもの意味はこちら。

elipsis

省略、省略符号

Weblio - ellipsis より

そのまんまやんね。

で、なんて読むのかをWeblioのプレイヤーで聞くと、 「イリプシス」って聞こえます。

イのところは、イとエの間って感じかなー。

日常で使うことはほぼほぼないかもしれないけど、例文。

例：Click the ellipsis (…) button. 　　省略富豪(…)ボタンをクリックします。

Weblio - ellipsisの例文より

sampleコードはこちら

See the Pen text-overflow: ellipsis; by kurokoroll (@kurokoro) on CodePen.

ちょと短めですけど今日はここまで。

CSS3のamimationを使うと、色を変えたり位置を変えたりといった、アニメーションをつけることができます。

animationには、次の6つのプロパティーがあります。

animation-name

animation-duration

animation-timing-function

animation-delay

animation-iteration-count

animation-direction

“alternate"は、6.の"animation-direction"で指定できます。 初期値は normal。

そんなら、alternateって？

奇数回では普通方向の再生、偶数回では逆方向の再生となって、アニメーションサイクルを繰り返す

HTMLクイックリファレンス - animation-direction より

という意味だそうです。

div.sample { animation: anime1 3s ease -2s infinite alternate; }

というのは、

anime1の動きを

3秒間で

開始と終わりをなめらかにして

2秒前から開始して

いったりきたり繰り返す

ってことでしょうか。

もともとの"alternate"の意味は?

交互の、かわるがわるの、一つおきの、互い違いの、(茎に対して)互生の

Weblio - alternate より

って意味らしいので、納得！

alternativeっていうとこのパーカーを持ってて、"alternate"を見たときに、そっちを先に連想しちゃいました。

着やすくてあったかいので、色違いで2枚も… はい。どうでもいいですね。

その、"alternative"の意味は、

(二つのうち)どちらかを選ぶべき、二者択一の、代わりとなる、代わりの、慣習的方法をとらない、新しい

Weblio - alternate より

ってことらしい。こっちは、新しいスタイルってことなのかな?

おまけ

「animation-iteration-count」で設定している、”infinite"。 よく聞く言葉ありますよね？

そう、infinite loop!!! 無限ループ！！

  animationのsampleコードはこちら

See the Pen Alternate by kurokoroll (@kurokoro) on CodePen.

以上！！

tableはHTMLで表組みをしたいときに使うタグですね。 このプロパティに「border-collapse」というものがあります。

border-collapse: separate;　境界線の間隔あり

border-collapse: collapse;　境界線の間隔なし

これをtableに設定すると、次の図のようになります。

というのはもう知ってますよね。 で、  “ collapse”ってなんぞや、と言う話。

主な意味は、

つぶれる,くずれる,崩壊する,落ち込む,陥没する,失敗する,(過労・病気などで)倒れる,衰弱する,衰える,急に下落する

by Weblio英和和英辞典より

だそう。

つまり、tableプロパティのborder-collapseを訳すと

border-collapse: separate; ボーダー（境界）をつぶすんか？: いやわけるよ。

border-collapse: collapse; ボーダー（境界）をつぶすんか？: つぶすよ。

ってことですかね。

ちなみに collapseを使った言葉。

collapse a folding chair （折りたたみいす） on the verge of collapse （がけっぷちにある）

by Weblio英和和英辞典より

とか。（マイナーなとこひっぱったかも･･･）

図に使ったソースはこちら http://codepen.io/kurokoro/pen/EPMJQe

今日はここまで。

CSSで余白をつけたい時に使う、marginとpadding。 marginは 要素間の余白をつけたいとき。ボーダーの外側の余白。 paddingは要素内の余白をつけたいとき。ボーダーより内側の余白。

なのですが、 そもそもmarginとpaddngの意味って知ってますか？

margin ：  (ページなどの)余白,欄外,マージン,(時間・経費・活動などの)余裕,(誤りなどの)余地,(時間の)差,(得票などの)票差,縁,へり,端

padding ：  詰め物をすること,芯(しん)を入れること,芯,詰め物,(新聞・雑誌などの)埋めくさ,不必要な挿入句。padの現在分詞。

by  weblio英和辞典より

ということなのですね。 paddingは、padの現在分詞とありますが･･･ そう、 肩パッド（え？古い？）とかのpadなんですね。 ボーダーとの間に、詰め物をするってことなんだ！

marginは、ちゃんと余白って意味なので、そのままなんですけど、 英語で使うときは

write in the margin. （余白に書き込む）.

a margin of 5 minutes. （ 5分の余裕）

といったように使うことができるんですね。

I want to have with a enough margin of time!!!

ちょっと無理やりですかね･･･。

今日はここまで。

Itaricとobliqueの違いは？

文字スタイルは、 ・イタリック体 （Itaric） ・オブリーク体 （oblique） を設定することができます。

イタリック体もオブリーク体も、斜体表示だけど何が違うのか？

オブリーク体は、イタリックとしてデザインされたものではなく、正体を傾けただけの斜体表示。

by プロとして恥ずかしくない新CSSデザインの大原則 P46 より抜粋

だそうですが、よく分からないので実践。

なるほど！ オブリーク体は確かに傾けただけなのが分かる！

”Itaric”は、 イタリック(体)の, 斜体のという意味で、 ”oblique”そのものの意味は、斜めの、 斜角のという意味に加えて、 不正の、ごまかしのという意味もあるそうです。

① Take care. （気をつけて、お元気で）

別れ際の挨拶に使います。 風邪をひいた人や、怪我をしている人に対しては、 「お大事に」という意味になります。

② take care of ~（世話をする、気にかける）

・Take care of yourself.（お大事に） この場合は、①の意味と同様の意味になりますが、 「世話をする・面倒をみる」と意味で使うと ・I’ll take care of it.（わたしに任せて！） ・I have to take care of my sick son.（風邪をひいた息子の面倒みなきゃ） ・You should take care of yourself more.（もっと自分に気を配るべきだよ）

③ don’t care ~（気にしない）

・I don’t care.（気にしないよ、関係ないよ） 　少し強い言い方なので、穏やかに言いたいときは、 　I don’t mind.（気にしないよ、構わないよ） のほうがbetter!!

④ care about（気になる、関心を持つ、構う）

・I care about you.（あなたを大切に思うよ） 　付き合っている人の間で使われるそうです。

　MAROON5さんの”Wake Up Call”の中で、 　“Don't you care about me anymore?”という歌詞も、この意味ですね。 　（もう好きじゃないの？もうどうでもいいの？）

・Do you care about spelling in general? 　（普段スペリングを気にする？）　 　バイリンガルニュースさんの12.10.15 Topic2の中で出てきたフレーズです。

会話の中で、何かを説明されたあとなどに 「分かった」「理解した」と言いたいとき、いろんな言い方があるようです。

--------------

① make sense = understand

よりナチュラルに使われていますが、日本ではあまり聞かない言葉ですね。 次のように使えます。とても便利ですね。

That makes sense !（なるほど）   make sense?（わかりますか？） It doesn't make sense.（意味無いな、おかしいな）

② I got it.

ある日友人が、「”ガリ ガリ”ってみんないってるのは何？」と。 お寿司の”ガリ”ではありません。 笑 ”I got it” を省略して、”Got it”と言っているのですね。

相手が分かっているのか聞くときは、 “Got it?” または”You got it?”と聞きます。

--------------

○ used to + (V) ~

　「以前は～だった」「よく～したものだ」といったように、過去は習慣だったけど、 　今は違うときに使います。 “to”（不定詞） のあとの動詞は、原型で使います。

<e.g.> ● Kuroko used to wear sunglasses. ● She used to play the piano. But now he play the ukulele.

○ be used to + (N)~

　「～するのに慣れる」という意味です。“to”のあとは動名詞（V-ing)になります。

○ take 　話し手（または聞き手）のとは別のところへ物を持って行くとき、 　距離が離れるときに使う。

<e.g.> ● I take this cup to the kitchen. ● I’ll take these plates.

○ bring 　話し手（または聞き手）のところへ物を持って来るとき、 　自分が向かっていくときに使う。

<e.g.> ● I bring these glasses. ● I’ll bring four glasses to that table.

○ 「～してもいいですか？」　自分が何かをしたいとき、許可をもらうとき

　[友人・家族に]　Can I ～ ? 　[目上の人等]   Could I ～ ? / May I ～ ?

<e.g>. ● Can I get these breads ? ● Could I take off the plate ?

○ 「～してくれませんか？」　人にお願いするとき

　[友人・家族に]　Can you ～ ? 　[目上の人等]   Could you ～ ? / Would you ～ ?

バッサーというポジションで、働き始めました！ 今日、使いたかった言葉MEMO！！

■ お皿をお下げしてもよろしいでしょうか？ May I take your plate?　

■ 新しいものをお持ちします。 I'll bring you another one.

■ 担当の者が参りますので少々お待ち下さい。 Your server will be here shortly.

Replace these words with different words.

○ stores : put something away until it is needed

○ repeat : to say or do something again

○ affect : to produce a change in someting or someone

○ complex : difficult to understand

○ senses : natural abilities such as seeing and hearing

<e.g> ● Memory is a complex. ● Your senses - vision, hearing, touch, taste and smell. ● Your memory is like a system that stores everything you learn. ● Several things can affect your memory. ● I believe that the more you practice a skill or review and repeat      information.

○ get off  ←-→ get on 

<e.g.> ● I get off the bus.  /  I get on the train.

○ advantage   ←-→   disadvantage    =  pros          ←-→   cons    =  benefits    ←-→   drawbacks

<e.g> ● There's no advantage in getting up at late. ● The system has various drawbacks.

○ dawn and dust

   dawn = early morning    dust = early evening

○　exhausted = very very tired

<e.g.> ● I was exhausted by the climb up the mountain.

○ horrible = very bad

have + p.p. (past participle)

○ Have you ever [verb] -- ?    Positive Answer (+) ： I’ve [verb] it.    Negative Answer (-) ： I haven’t [verb] it.　

I start to study English in Canada. I write a daily slight sentence.