スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

bootstrapの使い方

今回は、実際にtwitter bootstrapを使ってみましょう。

シンプルなHTMLのみですのでXAMPPは立ち上げなくても大丈夫ですが、解説上、立ち上げてることを想定して説明します。テストですので、いままでmain.php等を作ってきたフォルダtestを使います。

導入
公式サイト
http://twitter.github.com/bootstrap/

ダウンロードは、TOPにあります。
記事を書いた時点のバージョンは、「Version 2.3.1」です。

ダウンロードしたzipファイル内にあるbootstrapフォルダを、そのままtestフォルダに入れます。そして、main.php等と同じ階層にsample.htmlというファイルを作りましょう。

sample.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrapのテスト</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
<div class="container">
<h3 class="muted">秘密の部屋プロジェクト</h3>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active"><a href="#">トップ</a></li>
<li><a href="#">サービス</a></li>
<li><a href="#">ドキュメント</a></li>
<li><a href="#">ダウンロード</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</div>
</div>
</div>
<div class="hero-unit">
<h1>ようこそマイブラザー!</h1>
<p>やぁ、よく来たね。今日の目玉商品は「はがねの妖精」だ。いつものが欲しい?あぁ、もちろん用意しているさ。ここで武器を装備して行くかい?</p>
</div>

<div class="row">
<div class="span4">
<h2>滝の中でセックス</h2>
<p>ここには説明文が入ります。こんなものに興味があるとは、君も相当の変態さんだね!フフフ、いいのさ。人類みな兄弟。一緒に未知なる性と欲望の世界に飛び込もうではないか。まず始めに服をすべて裏返しに...</p>
<p><a class="btn" href="#">詳細を見る »</a></p>
</div>
<div class="span4">
<h2>人類と宇宙とエロス</h2>
<p>ここには説明文が入ります。こんなものに興味があるとは、君も相当の変態さんだね!フフフ、いいのさ。人類みな兄弟。一緒に未知なる性と欲望の世界に飛び込もうではないか。まず始めに服をすべて裏返しに...</p>
<p><a class="btn" href="#">詳細を見る »</a></p>
</div>
<div class="span4">
<h2>性器の大発明!</h2>
<p>ここには説明文が入ります。こんなものに興味があるとは、君も相当の変態さんだね!フフフ、いいのさ。人類みな兄弟。一緒に未知なる性と欲望の世界に飛び込もうではないか。まず始めに服をすべて裏返しに...</p>
<p><a class="btn" href="#">詳細を見る »</a></p>
</div>
</div>

<hr>

<footer>
<p>© えろぺんぎん 2013</p>
</footer>

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

</body>
</html>

続きを読む»

キレイなホームページが簡単に作れるフレームワーク

ホームページのデザインって、時代によって似通ってきます。

リキッドレイアウト(画面の幅が違くても、ある程度同じデザインに見える手法)になったり、
ヤフーのようなポータルサイトデザインが確立されていったり、
ブログという形が浸透してきたり、
スマートフォン向けのホームページデザインが確立されてきたり。

みんなが真似し合ったり、良いところを取り入れたり、ということが日々行われ成長してきたのです。HTMLという形式が、ある意味でソースを常に開示している状況だったからなのか。理由は定かではありませんが、とにかく、皆通る道は同じなのです。

そして現在は、そこそこ使えるフレームワークが複数存在します。

フレームワークとは、みんなが常にやることとか、あったほうが便利な機能を詰め込んだ、言わばひな形です。

海外サイトですが、それらがキレイにまとめられているサイトも存在します。
http://usablica.github.com/front-end-frameworks/compare.html

続きを読む»

画像にモザイクをつけるCSS

WEBアプリの機能面は、実は難しいことって少ないんです。
応用であったり、使い方であったり、アイデア勝負なところが大きいです。

逆に、使いやすさ、ユーザビリティに関しては、すごく難しいです。
沢山の人に合わせることってなかなか出来ないんですね。

子供やお年寄りでも理解できるレベルに合わせると、使いやすくはなりますが、
かっこ良さだとか、綺麗さ重視の現役は使ってくれなかったり。

しかし!
自分専用のアプリってどうでしょう。
UI(ユーザーインターフェース)は自分にだけ合ってれば良いのです!

というわけで、さっそく表題の件です。

続きを読む»

スタイルシートについて

そういえば、突然スタイルシートの指定が出てきて説明してませんでした。

まぁHTMLも説明して無いのですが。
そのうち、HTMLも沢山解説する予定です。

今回、以下のような形で使ってます。

<style type="text/css">
div {
display: inline-table;
padding: 5px;
border: 1px solid #aaa;
text-align: center;
}
</style>

これは、HTMLの見栄えを指定するスタイルシートと言うもので、良くCSSと略されます。このブログでも、CSSと略して説明します。確か、カスケード・スタイル・シートかカスケーディング・スタイル・シートの略です。

で、そもそもコレは何故指定しているのか、何を指定しているのかをざっくりと説明します。

続きを読む»

プロフィール

エロぺんぎん

管理人:エロぺんぎん
不純な動機でプログラマーになった男、エロぺんぎんです。ブラザー達を猛烈に応援したい気持ちと、自分もプログラマーとして成長したい思いで、当ブログを立ち上げました。
エロぺん動画を運営しております。

検索フォーム
Twitter
最新記事
最新コメント
カテゴリ
リンク
RSSリンク
エロぺん動画で人気の動画
人気の記事
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。