Bootstrapを使う時に役に立つアプリ

Bootstrapは簡単にリッチなデザインができますが、そうは言ってもデザイナーでもない人がBootstrapを一からイジろうとするとやっぱり難しいことがあります。もともと、デザイナーの人が書いたコードを見るのはできるけど、いざ、自分でやろうとするとできないみたいな。

はい。そうです。僕です。できないです。

そんな時に役に立つ、アプリのご紹介。

BLOCS

簡単な操作でリッチなデザインをコードディングすることなくできるのが、このBLOCSの特徴です。数ページだけの企業のwebサイトならこれで十分だと思います。

正直なところで、これだけでrailsのデザインが全てできる訳ではありませんが、これで大体のデザインをしてエクスポートしたコードを参考しながら書いていく。そんなやり方ができます。

例えば、下記の画像のようなデザインにしたいとしたら。

BLOCS

これをエクスポートすると。


<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" type="image/png" href="favicon.jpg">

	<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="style.css">
	<link rel="stylesheet" type="text/css" href="./css/font-awesome.min.css">


	<script src="./js/jquery-2.1.0.min.js"></script>
	<script src="./js/bootstrap.min.js"></script>
	<script src="./js/blocs.min.js"></script>
	<script src="./js/lazysizes.min.js" defer></script>
    <title>Home</title>


<!-- Google Analytics -->

<!-- Google Analytics END -->

</head>
<body>
<!-- Main container -->
<div class="page-container">

<!-- bloc-0 -->
<div class="bloc bgc-white l-bloc " id="bloc-0">
	<div class="container bloc-lg">
		<div class="row">
			<div class="col-sm-4">
				<img src="img/placeholder-image.jpg" class="img-responsive" />
				<h3 class="mg-md">
					Title goes here
				</h3>
				<p>
					Lorem ipsum dolor sit amet, adipiscing elit Aenean commodo ligula eget.
				</p>
			</div>
			<div class="col-sm-4">
				<img src="img/placeholder-image.jpg" class="img-responsive" />
				<h3 class="mg-md">
					Title goes here
				</h3>
				<p>
					Lorem ipsum dolor sit amet, adipiscing elit Aenean commodo ligula eget.
				</p>
			</div>
			<div class="col-sm-4">
				<img src="img/placeholder-image.jpg" class="img-responsive" />
				<h3 class="mg-md">
					Title goes here
				</h3>
				<p>
					Lorem ipsum dolor sit amet, adipiscing elit Aenean commodo ligula eget.
				</p>
			</div>
		</div>
		<div class="row voffset">
			<div class="col-sm-4">
				<img src="img/placeholder-image.jpg" class="img-responsive" />
				<h3 class="mg-md">
					Title goes here
				</h3>
				<p>
					Lorem ipsum dolor sit amet, adipiscing elit Aenean commodo ligula eget.
				</p>
			</div>
			<div class="col-sm-4">
				<img src="img/placeholder-image.jpg" class="img-responsive" />
				<h3 class="mg-md">
					Title goes here
				</h3>
				<p>
					Lorem ipsum dolor sit amet, adipiscing elit Aenean commodo ligula eget.
				</p>
			</div>
			<div class="col-sm-4">
				<img src="img/placeholder-image.jpg" class="img-responsive" />
				<h3 class="mg-md">
					Title goes here
				</h3>
				<p>
					Lorem ipsum dolor sit amet, adipiscing elit Aenean commodo ligula eget.
				</p>
			</div>
		</div>
	</div>
</div>
<!-- bloc-0 END -->

<!-- ScrollToTop Button -->
<a class="bloc-button btn btn-d scrollToTop" onclick="scrollToTarget('1')"><span class="fa fa-chevron-up"></span></a>
<!-- ScrollToTop Button END-->


</div>
<!-- Main container END -->


</body>
</html>

どうです。結構便利でしょ。なるほどココをcol-sm-4で囲んでやればいいのかと、ある程度の参考になります。あとは、これを下地にカキカキすればいい。グリッドシステムとかよくわからなくなった時に役に立ちます。

しかし、このアプリ今のところ、Macでしか使えません。





Bootstrap Studio

Bootstrap Studio

次に紹介するのはBootstrap Studioです。このアプリのいいとろは、細かなデザインができることです。

例えば、こんな感じ。

Bootstrap Studio

htmlとcssをみることができるので、どんな風にコードを書いていくのかの参考になります。


<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Untitled</title>
    <link rel="stylesheet" href="bootstrap.min.css" />
    <link rel="stylesheet" href="Navigation-with-Button1.css" />
    <link rel="stylesheet" href="styles.css" />
</head>

<body>
    <div>
        <nav class="navbar navbar-default navigation-clean-button">
            <div class="container">
                <div class="navbar-header"><a class="navbar-brand" href="#">Company Name</a>
                    <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
                </div>
                <div class="collapse navbar-collapse" id="navcol-1">
                    <ul class="nav navbar-nav">
                        <li class="active" role="presentation"><a href="#">First Item</a></li>
                        <li role="presentation"><a href="#">Second Item</a></li>
                        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false" href="#">Dropdown <span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li role="presentation"><a href="#">First Item</a></li>
                                <li role="presentation"><a href="#">Second Item</a></li>
                                <li role="presentation"><a href="#">Third Item</a></li>
                            </ul>
                        </li>
                    </ul>
                    <p class="navbar-text navbar-right actions"><a class="navbar-link login" href="#">Log In</a> <a class="btn btn-default action-button" role="button" href="#">Sign Up</a></p>
                </div>
            </div>
        </nav>
    </div>
</body>

</html>

Bootstrap Studioは名前通り、Bootstrapをベースに作られていますので、Bootstrapで構成されている部分は、その通り表記されます。こんな感じに。

Bootstrap Studio

自分で独自のデザインをした場合は、このように表示されます。


 # Navigation-with-Button1.css
.navigation-clean-button .action-button, .navigation-clean-button .action-button:active {
  background:#56c6c6;
  border-radius:20px;
  color:#fff;
  box-shadow:none;
  border:none;
  text-shadow:none;
  padding:10px 22px;
  transition:background-color 0.25s;
}                          

色のスタイルとかも表示してくれるので、結構助かります。どのアプリもそのまま、コピペできる訳ではないですが、デザインがわからない時には役にたつアプリです。

See Also