Posting your HTML elements

オブジェクトのものを位置を決めることためのエレメントを決める。

<div class=”static-me”>I am not special.</div>
.static-me{
position: static;
}

➡staticは、ページのフローに従って配置される。

<div class=”relative-me”>What does this even mean? Look up.</div>
.relative-me{
position: relative;
top: 10px;
}

➡ relative ：ページを相対的に移動させることができる。
➡このコードは、いつでも10ｐｘ下の位置に配置される。

<div class=”fixed-me”>I get attached soon.</div>
.fixed-me{
position: fixed;
top: 50px;
left: 50px;
}

➡fixは、スクリーンに関係する。
➡これは、スクロールしても一定の場所にある。

<div class=”absolute-me”>I am the best thing you have in store.</div>
.absolute-me{
position: absolute;
top: 50px;
left: 50px;
}

➡Absoluteは、常にそこにあってほしい場合に使う。

Manipulating display properties

Display block

<span class=”block-me”>I need space.</span>

//style.css
.block-me{
display:block;
}

➡ブロッキングのためコード
<span> は、分割のためのインラインエレメント。

<div class=”inline-me”>Hey, I wish we were together.</div>
<div class=”inline-you”>What’s stopping you?</div>

//style.css
.inline-me, inline-you{
display: inline-block;
height: 20px;
width: 50%;
}

➡The above snippet will make both the divs inline where each will one take 50% of the container width and the output will be similar to the one shown in the above image.

<div class=”not-me”>I didn’t do anything.</div>
//style.css
.not-me{
display: none;
}

➡全ての要素を外すときにこれを入れる。

Overflowing content? No problem.

overflow プロパティは、ページ内の文章やコンテンツが領域を超える場合に使われる要素である。

この場合、コンテンツを切り取るか、問題点を発見する場合にある。

<div class=”trimmed”>I know I am going to get slashed from bottom but it’s fine. Someone will save me. Hopes intact.</div>

//style.css
.trimmed{
height: 20px;
width: 400px;
overflow: hidden;
}

hiddenが、超えたコンテンツをトリミングするコード。

Add scrollbars

div class=”scroll”>I knew you would save me. Let’s show the world what we are made of.</div>

//style.css
.scroll{
height: 50px;
width: 200px;
overflow: scroll;
}

scrollコンテンツを利用すれば、水平スクロールバーと垂直スクロールバーが出てくる。

Overflow Auto

<div class=”auto-me”>I knew you would save me. Let’s show the world what we are made of</div>

.auto-me{
height: 40px;
width: 200px;
overflow: auto;
}

autoは、自動でスクロールバーと出すもの。

<div class=”visible-me”>I knew you would save me. Let’s show the world what we are made of</div>

//style.css
.visible-me{
height: 40px;
width: 200px;
overflow: visible;
border: 1px solid #000 ;
}

visibleは、コンテンツが外に出ても、レンダリング（生成される）ことを言う。

What are Pseudo Classes?

要素を動かしたいときに、使うものがpseudo classes。

selector:pseudo-class{
property: value;
}

➡このように書く。

<input class=”hover-me” type=”button” value=”Hover” />

//style.css
.hover-me:hover{
background-color: green;
}
The below will result in red color of the background when hovered?
.hover-red.hover{
background:red;
}

➡これを入力することで、テキストがクリックすると、緑色にできるようになる。

<a href=”www.anywebsiteyoulike.com”>Click me</a>

//style.css
a:active{
color: red;
}

➡リンクをクリックすると、赤色になるコード。

<a href=”www.anywebsiteyoulike.com”>Don’t click me</a>

//style.css
a:link{
color: red;
}

➡？。訪れると、移動不可にする？
To change the properties of links which are yet unvisited, link pseudo class is used.
Once the above link is visited it will lose the properties applied to it using :link class.

<a href=”www.anywebsiteyoulike.com”>Click me</a>

//style.css
a:visited{
color: black;
}

➡訪れたリンクの色を変えるときコード。

Writing CSS for mobile

モバイルのために書くには、 @media propertyを使う。

@media screen and (condition) {
//Whatever CSS you want to write
}

モバイル用に書くためには、広さが720pxになる。