css "だけ"で サイトをtwitter風にするコツ

# はじめに
プロジェクト管理ツールの画面って味気なくてやる気が出ない...
プロジェクト一覧みたいな画面がtwitterっぽくしたらやる気が出るかも
というのがはじまりです

HTTPプロトコルをハックして書き換えるのは大変めんどくさいので, 
ブラウザのアドオンでCSSを上書きすることで実現します

CSSを上書きしてくれるアドオンは[Stylus](https://addons.mozilla.org/ja/firefox/addon/styl-us/)がオススメです

ここからはCSSのいじり方について書きます

# twitterっぽくするコツ
普段, redmineというプロジェクト管理ツールを~~使わされてます~~使っています.  
活動っていうチケットの更新一覧を見る機能があるんですが, まあまあ見にくいです
こんな感じです
![tweet1.png](https://qiita-image-store.s3.amazonaws.com/0/323745/d344d622-bcbc-d010-eb5c-a22b8e4cfb3a.png)
これがこんな感じになります
![tweet2.png](https://qiita-image-store.s3.amazonaws.com/0/323745/fde54265-a6ea-cc89-2f81-33f5c44be61e.png)

twitterっぽくするコツを, redmineでの例を交えて紹介していきます

## 邪魔な要素を消す
```css
 display:none
```
タイムラインっぽくない要素はこれでどんどん消していきましょう
redmineだと赤丸で囲った部分です
![tweet3.png](https://qiita-image-store.s3.amazonaws.com/0/323745/bfc8d483-87ed-d76b-d756-bed77fc40695.png)
ヘッダーとフッターはそのままにしときます

## 枠を作る
白をベースに青のヘッダーを入れるとだいたいそれっぽくなります.
全体のwrapperっぽいやつを見つけて適用します

```css
/*タイムラインっぽくするwraper*/
div#activity {
    padding: 0;
    background: #ffffff;
    overflow: hidden;
    max-width: 700px;
    margin: 20px auto;
    font-size: 80%;
    border: solid 1px #eeeeee;
    height: 800px;
    overflow-y: scroll;
}
/*日付をヘッダーっぽくする*/
div#activity h3 {
    background: #58aeed;
    padding: 10px;
    text-align: center;
    margin: 0 auto;
    display: block;
    color: #eeeeee;
}
```
適用するとこんな感じです
けっこうそれっぽくなります
![tweet4.png](https://qiita-image-store.s3.amazonaws.com/0/323745/651797ca-3ab9-106d-bb20-2a49b9567a9a.png)

## 1要素をtweetっぽくする
リプライツリー構造を作ります
これはmarginを調整して実現します

従来は本文の下に名前が来ていましたが, 
名前が上の方がtwitterっぽいのでそうします
これは要素をflexにしてorderで順番をいじることで実現します

あとは文字サイズを調整します

```css
/*それぞれの要素を1tweetっぽく*/
/*groupedついてるやつが小さく表示されるやつ*/
div#activity dd {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 10px;
    padding-left: 0px;
    margin-bottom: 5px;
    border-bottom: solid 1px #eeeeee;
    overflow: hidden;
    margin-left: 0px;
    font-size: 15px;
}
div#activity dd.grouped {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 10px;
    padding-left: 0px;
    margin-bottom: 5px;
    border-bottom: solid 1px #eeeeee;
    overflow: hidden;
    margin-left: 100px;
    font-size: 15px;
}
/*本文*/
div#activity dd span.description {
    order: 2;
    margin-left: 000px;
    margin-top: 10px;
    margin-bottom: 10px;
    color: #000000;
    font-style: normal;
}
```
適用するとこんな感じです
かなり完成に近づいてきました
![tweet5.png](https://qiita-image-store.s3.amazonaws.com/0/323745/8151c39b-215f-b237-77d9-b96fa2246e09.png)

## アイコンを作る
最後にtwitterらしさの一番大事なのがアイコンです
画像のためのdivとかimgとかが用意されてるわけがないので無理やりつくります

使えそうな要素の中身をposition:relativeで叩き出して,
background-img で画像化します

要素にユーザーidがhrefで埋め込まれていたので, 
これを使って各ユーザーの画像を設定します

```css
/*アイコン画像のwrapper*/
dl dt {
  width: 50px;
  height: 50px;
}
/*アイコン画像のwrapper内の要素を外に出す*/
dl dt a {
  font-size: 14px;
  position: relative;
  top: 20px;
  left: 150px;
  white-space: nowrap;
}
/*アイコン画像*/
a.user[href="/users/0"] {
  background-image: url();
  display: inline-block;
  height: 78px;
  background-position: 0px 18px;
  background-repeat: no-repeat;
  background-size: 50px;
}
```
a.user[]の部分を各ユーザー分作れば完成です
画像はbase64でエンコードして埋め込んでおくと, 高速に表示できるのでおすすめです

![tweet2.png](https://qiita-image-store.s3.amazonaws.com/0/323745/094d26b7-eab3-e8ef-0399-a99a6ba65b41.png)

# さいごに
つかったhtmlと完成したcssをgistにあげておきます
https://gist.github.com/tomokinex/651136d0452bd8d93d34bc4ec44f8fce