inbranding

概要 OVERVIEW

INCSSは素材です。例えばウェブページは、テキストのほか画像や映像などのコンテンツで構成されています。そしてその画像や映像には「素材集」といったものがあります。INCSSもその仲間、ウェブページを構成する型枠、基本構造の素材集です。ですのでテキストや画像、映像などの素材とINCSSという素材を組み合わせる、型枠にコンテンツを配置していただくだけでスピーディーにウェブページを作成することが出来ます。

ライトウェイトCSSフレームワーク

INCSSはCSSフレームワークの一種です。Pure, Web Starter Kit, Bootstrap, Foundation, Kube …、大規模で高機能な様々なCSSフレームワークがあり、INCSSはその片隅の小さなそしてライトウェイトなCSSフレームワークです。

ベーシックテンプレート

下記のコードをコピーしてお使いください。
シンプルな左カラムのサイトのテンプレートです。

デモはこちら

Basic Template

 


<!DOCTYPE html>
<html lang="ja-JP">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content=" " />
<meta name="keywords" content=" " />
<link rel="stylesheet" type="text/css" media="screen" href="css/in.css" />
<link rel="shortcut icon" href="img/favicon.ico" />
<!--[if lte IE 9]>
<script src="script/html5shiv-printshiv.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="css/ie.css" />
<![endif]-->
</head>
<body>
<header>
  <div class="bar">
    <h1 class="bar__h1 position-left screen">
      <img src="img/logo_bar.png" alt="">
    </h1>
    <nav class="bar__nav position-right">
      <ul>
        <li><a href="#">SITE1</a></li>
        <li><a href="#">SITE2</a></li>
        <li><a href="#">SITE3</a></li>
      </ul>
    </nav>
  </div><!-- ./bar -->
  <div class="container">
    <div class="gridbox">
      <div class="grid-3-1">
        <h1 class="header__logo" itemscope itemtype="http://schema.org/Brand">
          <a href="/" itemprop="url"><img src="img/logo.png" alt="" itemprop="logo" />
          </a>
        </h1>
      </div><!-- ./grid3-1 -->
      <div class="grid-3-2">
        <nav class="header__nav position-right">
          <ul>
            <li><a href="#">AAA<span>aaa</span></a></li>
            <li><a href="#">BBB<span>bbb</span></a></li>
            <li><a href="#">CCC<span>ccc</span></a></li>
            <li><a href="#">DDD<span>ddd</span></a></li>
          </ul>
        </nav>
      </div><!-- ./grid3-2 -->
    </div><!-- ./gridbox -->
  </div><!-- ./container -->
</header>
<div class="breadcrumbs">
  <nav class="breadcrumbs__nav">
    <ol itemscope itemtype="http://schema.org/BreadcrumbList">
      <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
      <a href="/" rel="index" itemprop="item"><span itemprop="name">HOME</span></a>
      <meta itemprop="position" content="1">
      </li>
      <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
      <a href="index.html" itemprop="item"><span itemprop="name">Here</span></a>
      <meta itemprop="position" content="2">
      </li>
    </ol>
  </nav>
</div><!-- ./breadcrumbs -->
<div class="contents">
  <div class="container sidebar--left">
    <div class="main">
      <section>
        <h1>h1見出し</h1>
        <p class="lead">リードテキストリードテキスト</p>
        <h2>h2見出し</h2>
        <p>
        本文テキスト本文テキスト本文テキスト本文テキスト
        本文テキスト本文テキスト本文テキスト本文テキスト
        本文テキスト本文テキスト
        </p>
      </section>
    </div><!-- ./main -->
    <div class="sidebar">
    <h3>INCSS elements</h3>
      <nav class="sidebar__nav">
        <ul class="blt sidebar__blt">
          <li><a href="#">AAAA<span>aaaa</span></a>
            <ul>
              <li><a href="#">aaaaa-1</a></li>
              <li><a href="#">aaaaa-2</a></li>
              <li><a href="#">aaaaa-3</a></li>
            </ul>
          </li>
          <li><a href="#">AAAA<span>aaaa</span></a></li>
          <li><a href="#">AAAA<span>aaaa</span></a></li>
        </ul>
      </nav>
    </div><!-- ./side -->
  </div><!-- ./container -->
</div><!-- ./#contents -->
<div class="gotop">
  <a href="#" title="このページの先頭へ">
    <span class="gotop__icon">≫</span>
    <span class="gotop__txt">このページの先頭へ</span>
  </a>
</div>
<footer>
  <div class="container">
    <div class="footer__navbox">
      <nav class="footer__nav">
        <ul class="nav--eql nav--5">
          <li><a href="/">HOME</a></li>
          <li><a href="#">AAA</a></li>
          <li><a href="#">BBB</a></li>
          <li><a href="#">CCC</a></li>
          <li><a href="#">DDD</a></li>
        </ul>
      </nav>
    </div><!-- ./footer__navbox -->
    <div class="footer__data">
      <h1 class="footer__logo">
        <a href="/">
          <img src="img/logo_footer.png" alt="inbranding">
        </a>
      </h1>
      <p>
        <strong>Your Project</strong><br />
        連絡先情報など
      </p>
    </div><!-- ./footer__data -->
  </div><!-- ./container -->
  <p class="copyright">© Your project.</p>
</footer>
</body>
</html>

※なお、メインエリアとサイドエリアのどちらが左右に並ぶパターンでも、HTMLファイルに記述する順番は同じで常にmainを先に記述してください。

IE7/8に対応!

ウェブ業界のメインストリームはモダンブラウザのみ視野に入れていますが、クライアントの皆さまのヴィンテージなパソコンにはまだまだIE7/8が健在でいらっしゃいます。
対応させるための金額交渉をするのもよいですが、ここはスマートに最初から対応しているフレームワークを使ってみませんか?

このページの先頭へ