CSS - エロプログラマーへの道

スポンサーサイト

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

-------- スポンサー広告

今回は、実際に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>

2013-04-06 CSS Comment:0 Trackback:0

このページのトップへ

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

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

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

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

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

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

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

2013-04-05 CSS Comment:0 Trackback:0

このページのトップへ

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

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

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

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

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

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

2013-04-04 CSS Comment:0 Trackback:0

このページのトップへ

スタイルシートについて

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

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

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


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

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

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

2013-04-02 CSS Comment:0 Trackback:0

このページのトップへ

ホーム

エロプログラマーへの道

スポンサーサイト

bootstrapの使い方

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

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

スタイルシートについて