#cssenglish

Which of the following pass connects Mardan with Malakand?

Which of the following pass connects Mardan with Malakand? A. Gomal Pass B. Dargai Pass C. Tochi Pass D. Dorah Pass Continue reading

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 より

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

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

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”そのものの意味は、斜めの、 斜角のという意味に加えて、 不正の、ごまかしのという意味もあるそうです。