Bootstrap4がいい感じ
まだα版だけど、いい感じ。
使い方は省略するとして、これだけのコードでこんなに綺麗。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css"> <script type="text/javascript" src="/static/bootstrap/js/bootstrap.min.js"></script> <title></title> </head> <body> <nav class="navbar navbar-dark bg-inverse"> <a class="navbar-brand" href="#">Navbar</a> <ul class="nav navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> </ul> <form class="form-inline pull-xs-right"> <input class="form-control" type="text" placeholder="Search"> <button class="btn btn-success-outline" type="submit">Search</button> </form> </nav> <div class="container-fluid"> <div class="col-md-3"> <div class="list-group"> <a href="#" class="list-group-item disabled">イベント1</a> <a href="#" class="list-group-item">イベント1-1</a> <a href="#" class="list-group-item">イベント1-2</a> <a href="#" class="list-group-item">イベント1-3</a> <a href="#" class="list-group-item">イベント1-4</a> </div> <div class="list-group"> <a href="#" class="list-group-item disabled">イベント2</a> <a href="#" class="list-group-item">イベント2-1</a> <a href="#" class="list-group-item">イベント2-2</a> <a href="#" class="list-group-item">イベント2-3</a> <a href="#" class="list-group-item">イベント2-4</a> </div> <div class="list-group"> <a href="#" class="list-group-item disabled">イベント3</a> <a href="#" class="list-group-item">イベント3-1</a> <a href="#" class="list-group-item">イベント3-2</a> <a href="#" class="list-group-item">イベント3-3</a> <a href="#" class="list-group-item">イベント3-4</a> </div> </div> <div class="col-md-9"> <table class="table"> <thead> <tr> <th>header</th> </tr> </thead> <tbody> <tr> <td>data</td> </tr> </tbody> </table> </div> </div> </body> </html>