interprism's blog

インタープリズム株式会社の開発者ブログです。

素のHTMLじゃ寂しいけど面倒なのはお断りという時はmilligramがいいかも

こんにちはhiranoです。

こんな人にいいと思います

  • 限定された人だけに見せるページを作ることがたまにある
  • 素のHTMLだと見た目的にテンションが上がらない
  • 良い見た目のものを自分で作るデザイン力はない
  • 面倒なことは嫌い

ちょっとした管理画面が欲しくなった

お仕事の中で、特定の人だけが使うための簡単なWeb画面が必要になりました。 HTMLの代表的なタグはそらで書けるので書いてみました。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ちょっとした画面</title>
</head>
<body>
  <h1>ちょっとしたポータル</h1>
  <p>ここにプロジェクトで使用する情報を記載しておきます。</p>

  <h1>リンク集</h1>
  <table>
    <thead>
      <tr>
        <th>名前</th>
        <th>説明</th>
        <th>リンク先</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Google</td>
        <td>説明不要</td>
        <td><a href="https://www.google.co.jp/">https://www.google.co.jp/</a></td>
      </tr>
      <tr>
        <td>コリス</td>
        <td>デザイン系のノウハウを紹介しているサイト</td>
        <td><a href="http://coliss.com/">http://coliss.com/</a></td>
      </tr>
      <tr>
        <td>codrops</td>
        <td>ハイセンスなデザインを紹介しているサイト</td>
        <td><a href="http://tympanus.net/codrops/">http://tympanus.net/codrops/</a></td>
      </tr>
    </tbody>
  </table>
</body>
</html>

ブラウザで表示すると

f:id:interprism:20160307144143p:plain

表が表になっていません。全おれが泣きました。

よろしい、ならばBootstrapだ

見栄えのいい画面が作りたければ何はともあれBootstrapです。

getbootstrap.com

CDNから取得するためのタグがあるので貼り付けてみる。

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

ブラウザで開くと

f:id:interprism:20160307144159p:plain

文字が大きくなって、小さくなって、左に詰まっただけで見栄え良くなった気がしない。 とんだ期待はずれです。

ということでBootstrapについてもう少し調べてみました。

techacademy.jp

どうやら グリッドシステム を理解したり、テーブルを <div class="container"> で囲ってやらないと駄目のようです。 私は楽がしたいのです。Bootstrapの書き方を学習していたら楽になりません。 ということで Bootstrap は諦めることにしました。

理想はCSSだけ読んだら勝手に綺麗になる

とにかく楽がしたいのです。

と、こんな記事があったのを思い出し、使ってみることにしました。

www.moongift.jp

milligram

CSSをダウンロードしてきて、CSSを読み込ませます。

<!-- Milligram CSS minified -->
<link rel="stylesheet" href="css/milligram.min.css">

ブラウザで見てみると

f:id:interprism:20160307144222p:plain

おお！ちょっと文字が大きいですが、表が表に見えますしまあまあおしゃれです。これです、こういうのが欲しかった。

ということで、こういった用途には使っていこうと思います。

PAGE TOP