snippet: css

## Foundation6

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.0-rc.3/dist/css/foundation.min.css">

<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.0-rc.3/dist/js/foundation.min.js"></script>
```

## Flex (css3)

* [これからのCSSレイアウトはFlexboxで決まり！ | Webクリエイターボックス](https://www.webcreatorbox.com/tech/flexbox)

![aa.png](https://qiita-image-store.s3.amazonaws.com/0/25728/0fd76c8f-3c92-d55e-b024-e869d4d62c80.png)

```html
<!DOCTYPE html>
<head>
<style>
.container {
        display:flex;
}
.item1 {
        background-color:#ddd;
        flex:1;
}
.item2 {
        background-color:#ccc;
        flex:3;
}
.item3 {
        background-color:#bbb;
        flex:1;
}
</style>
</head>
 
<div class="container">
  <div class="item1">a</div>
  <div class="item2">b</div>
  <div class="item3">c</div>
</div>
```


## Font Awesome

```html:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
```

```html:使い方
<i class="fa fa-male"></i>
```

* [Font Awesome Icons](http://fontawesome.io/icons/) アイコン一覧

## TABLEタグの中央揃え

* `text-align: center;` では中央揃えになりません。

```css
table {
 margin-left: auto;
 margin-right: auto;
}
```

## グラデーション

```css:
h1 {
background: linear-gradient(to left bottom, #cccccc, white);
}
```

![grad.png](https://qiita-image-store.s3.amazonaws.com/0/25728/36de6563-58cd-b5ce-05e1-442799a9dcfc.png)


## 全体的に影をつける

```html:
<style>
.data {
    box-shadow:0px 0px 5px;
    width: 40%;
}
</style>
<div class="data">aa</div>
```

![box-shadow.png](https://qiita-image-store.s3.amazonaws.com/0/25728/b7b5a9d4-4983-58dd-7c41-ef433bdb66cc.png)


## selection

* [CSS3のセレクタ全42種 まとめておさらい使い方リファレンス | EXP - クリエイティブな事をはじめた(い)全ての人達へ](http://wp-e.org/2014/05/20/2420/)

```css:
div + a {
    /* <div></div><a></a> のaタグに適用 */
}
```

```css:
div a {
    /* <div><a></a></div> のaタグに適用 */
}
```

## :before

* [知らないと損をするかもしれない便利すぎるCSSセレクタ21個](http://programmerbox.com/2013-05-27_css_selector_21/#13p)

```css
code:before {
    content: "a.file";
}
```

## 親要素 (jquery)

* [要素の前の要素を選ぶ - Webデザイン・CSS 締切済 | 教えて！goo](http://oshiete.goo.ne.jp/qa/7403498.html)

## github-pandoc.css

* [Marked.app](http://marked2app.com/)をベースに作成された[Dashed/github-pandoc.css](https://gist.github.com/Dashed/6714393)
  * をフォークした[tleonardi/github-pandoc.css](https://gist.github.com/tleonardi/b04fde6538b4a3fe16a6)
  * に少々手を加えた[github-pandoc.css](https://gist.githubusercontent.com/tukiyo/0a3ece06fca2b31ff74d/raw/1ef0c70677d2204c303e59eb3ab67de3f3762b4f/github-pandoc.css)

## footerを画面一番下に固定

```html:左下
<div style="height: 100%;">main
</div>
<div style="position: fixed; bottom: 0;">
footer
</div>
```

```html:中央下
<div style="height: 100%;">main
</div>
<div style="position: fixed; bottom: 0; left: 50%; transform: translate(-50%); ">
footer
</div>
```

## 中央揃え

* [CSS - ボタンの中央揃え - Qiita](http://qiita.com/takashimorigaki/items/a063566ed28d8c4ffc0a)

```html:
<div style="text-align:center;">
   <button class="button1">ボタン1</button>
</div>
```

## block, inline

```
p.inline {
    display: inline;
}
```

## 画像サイズを縦横比を維持したままリサイズ

* [http://wayohoo.com/programming/css/how-to-properly-resize-images-in-stylesheet.html](http://wayohoo.com/programming/css/how-to-properly-resize-images-in-stylesheet.html)

```css:横幅300px固定
img{
   max-width: 300px;
   height: auto;
}
```


```css:縦幅300px固定
img{
   max-height: 300px;
   width: auto;
}
```


## 画像の角丸

```
img {
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}
```