C言語の学習ページをデザイン

学校のC言語のページを，デザインしなおしてみよう！ということで，以下を活用してトップページのみですが作ってみました．

結果

f:id:mssr_nm:20140223225801p:plain

Foundation

導入

$ gem install foundation

使い方

Foundation

任意のディレクトリで

$ foundation new MY_PROJECT

grunt-bower-task

いちいちパスを通すのが面倒なので，libディレクトリにまとめます．
参考：
Bower入門(応用編) - from scratch
Grunt: grunt-bower-task で Bower を扱いやすくレイアウトする | deadwood

package.json

{
  "name": "MY_PROJECT",
  "version": "0.0.1",
  "devDependencies": {
    "grunt": "~0.4.2",
    "grunt-bower-task": "~0.3.4"
  }
}

Gruntfile.js

module.exports = function (grunt) {
  grunt.initConfig({
    bower: {
      install: {
        options: {
          targetDir: './lib',
          layout: 'byType',
          install: true,
          verbose: false,
          cleanTargetDir: true,
          cleanBowerDir: false
        }
      }
    },
  });
  grunt.loadNpmTasks('grunt-bower-task');
};

$ npm install
$ grunt bower:install

Foundationで今回使ったもの

Top Bar
Grid
Block Grid

使い方

bodyの一番最後に記述

<script src="lib/jquery/jquery.js"></script>
<script src="lib/foundation/foundation.js"></script>
<script>
	$(document).foundation();
</script>

アイコンフォント

公式サイトに書いてあるまま

<span class="entypo-bell"></span>

@import url(http://weloveiconfonts.com/api/?family=entypo);

/* entypo */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}

コード

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="utf-8">
		<title>Ｃプログラミング入門</title>

		<link href="stylesheets/common.css" media="all" rel="stylesheet" type="text/css">
		<script src="lib/jquery/jquery.js"></script>
	</head>
	<body>
		<header>
			<nav class="top-bar" data-topbar>
				<ul class="title-area">
					<li class="name">
						<h1><a href="index.html">Cプログラミング入門</a></h1>
					</li>
				</ul>
				<section class="top-bar-section">
					<ul class="right">
						<li class="has-dropdown">
							<a href="#">入門</a>
							<ul class="dropdown">
								<li><a href="contents/first.html">はじめに</a></li>
								<li><a href="contents/intro/index.html">Ｃプログラム第1歩</a></li>
								<li><a href="contents/loop/index.html">処理の繰り返し</a></li>
								<li><a href="contents/select/index.html">処理の選択</a></li>
								<li><a href="contents/array_char_string/index.html">配列と文字・文字列</a></li>
								<li><a href="contents/function/index.html">関数</a></li>
								<li><a href="contents/variable/index.html">変数の取り扱い</a></li>
								<li><a href="contents/file/index.html">ファイルの取り扱い</a></li>
								<li><a href="contents/struct/index.html">構造体</a></li>
								<li><a href="contents/pointer/index.html">ポインタ</a></li>
								<li><a href="contents/recursion/index.html">再帰</a></li>
							</ul>
						</li>
						<li class="divider"></li>
						<li class="has-dropdown">
							<a href="#">補足</a>
							<ul class="dropdown">
								<li><a href="sup/variable.html">変数の型</a></li>
								<li><a href="sup/operator.html">演算子</a></li>
								<li><a href="sup/libraryfunc/index.html">ライブラリ関数の説明</a></li>
								<li><a href="sup/preprocess.html">プリプロセス命令（#で始まる行について）</a></li>
								<li><a href="sup/pad/index.html">PAD（Problem Analysis Diagram）</a></li>
								<li><a href="sup/extension/index.html">補足</a></li>
								<li><a href="sup/additionalexerciseA.html">もっと練習課題１</a></li>
								<li><a href="sup/additionalexerciseB.html">もっと練習課題２</a></li>
							</ul>
						</li>
						<li class="divider"></li>
						<li class="has-dropdown">
							<a href="#">環境構築</a>
							<ul class="dropdown">
								<li><a href="compile/msvs.html">TeraPad＋MicrosoftVisualStudioでのコンパイル</a></li>
								<li><a href="compile/unix.html">UNIXでのコンパイル</a></li>
							</ul>
						</li>
						<li class="divider"></li>
						<li class="has-dropdown">
							<a href="#">その他</a>
							<ul class="dropdown">
								<li><a href="toolbox.html">道具箱</a></li>
								<li><a href="link.html">リンク</a></li>
								<li><a href="#">このWebサイトの圧縮ファイルのダウンロード</a></li>
							</ul>
						</li>
					</ul>
				</section>
			</nav>
		</header>
		<section>
			<article class="top_page">
				<section>
					<p>　本Web文書はＣ言語チュートリアル(<a href="#fn1">*1</a>)であり，１〜１０は順番に読み進むように出来ている。<br>
					　練習は，陥りやすい誤りをチェックするために重要なので，読み飛ばさないこと。<br>
					　Ａ,Ｂ,Ｃ,Ｄ,Eは１〜１０を学ぶ途中で，意味がわかるようになったら時々読んでほしい内容である。<br>
					　Fは一通り１〜１０を終えたら，次のステップに移行するための発展的内容である。<br>
					　α，βは処理系（利用しているコンピュータ）依存の演習の仕方の内容である。最初にここを読んでから実行してほしい。</p>

					<nav>
						<section>
							<ul>
								<li><a href="first.html"><span class="entypo-bell"></span><span class="title">はじめに</span></a></li>
								<li><a href="contents/intro/index.html"><span class="entypo-book-open"></span><span class="title">1. Ｃプログラム第１歩</span></a></li>
								<li><a href="contents/loop/index.html"><span class="entypo-cw"></span><span class="title">2. 処理の繰り返し</span></a></li>
								<li><a href="contents/select/index.html"><span class="entypo-flow-branch"></span><span class="title">3. 処理の選択</span></a></li>
							</ul>
							<ul>
								<li><a href="contents"><span class="entypo-language"></span><span class="title">4. 配列と文字・文字列</span></a></li>
								<li><a href="contents"><span class="entypo-tools"></span><span class="title">5. 関数</span></a></li>
								<li><a href="contents"><span class="entypo-box"></span><span class="title">6. 変数の取り扱い</span></a></li>
								<li><a href="contents"><span class="entypo-doc-text"></span><span class="title">7. ファイルの取り扱い</span></a></li>
							</ul>
							<ul>
								<li><a href="contents"><span class="entypo-flow-tree"></span><span class="title">8. 構造体</span></a></li>
								<li><a href="contents"><span class="entypo-address"></span><span class="title">9. ポインタ</span></a></li>
								<li><a href="contents"><span class="entypo-back"></span><span class="title">10. 再帰</span></a></li>
							</ul>
						</section>
						<section>
							<ol>
								<li><a href="sup/">変数の型</a></li>
								<li><a href="sup/">演算子</a></li>
								<li><a href="sup/">ライブラリ関数の説明</a></li>
								<li><a href="sup/">プリプロセス命令（#で始まる行について）</a></li>
								<li><a href="sup/">PAD（Problem Analysis Diagram）</a></li>
								<li><a href="sup/">補足</a></li>
								<li><a href="sup/">もっと練習課題</a></li>
							</ol>
						</section>
						<section>
							<ol>
								<li><a href="">TeraPad＋MicrosoftVisualStudioでのコンパイル</a></li>
								<li><a href="">UNIXでのコンパイル</a></li>
							</ol>
							<ul>
								<li><a href="toolbox.html">道具箱</a></li>
								<li><a href="link.html">リンク</a></li>
								<li><a href="">このWebサイトの圧縮ファイルのダウンロード</a></li>
							</ul>
						</section>
					</nav>

					<hr>

					<p>実は小坂のC言語入門はわかりにくかったという指摘をする学生がいた。この学生は卒業研究で「１」〜「５」を，わかりやすく書き直したいというので，卒業研究の時間を使って，作り直してもらった。<br>
					ここに同じサイトに収録し，公開したい。こちらの方がわかりやすいと感じたらこちらで学んでもよい。</p>
					<a href="">小野さんの入門文書</a>

					<hr>

				</section>
				<aside class="note">
					<p id="fn1">
						<a href="#fn1">*1</a>
						チュートリアルというのは，知識を少しずつ増やしてゆく方式の説明文書の方式です。子供が言葉を覚えるように，簡単なことから，次第に難しい内容へと説明が進みます。最初から難しい記述も出てきてしまいますが，そこは説明しないので「おまじない」として受け取ってください。あるいは，不正確だけれども，最初は，仕方がないので不正確な表現で説明することもあります。（絵本や童話で言葉を覚えることに対応します）<br>
						これに対してリファレンスブック形式というのがあります。これは一度C言語を学んだ人が，あのことを知りたいという場合に役立つように，整理されて書かれています。しかし，リファレンスブックで最初から勉強しようとしても，難しい場合が多いです。（辞書や文法書に対応します。）
					</p>
				</aside>
			</article>
		</section>
		<footer>
			<p><small>＜このページへのリンクは自由です。＞<br>
			Copyright(C) 11Jan2003 KOSAKA CS TNCT</small></p>
		</footer>

		<script src="lib/foundation/foundation.js"></script>
		<script>
			$(document).foundation();
		</script>
	</body>
</html>

@charset "UTF-8";
@import "compass";
@import "modular-scale";
@import "settings";
@import "foundation";

@import url(http://weloveiconfonts.com/api/?family=entypo);
/* entypo */
[class*="entypo-"]:before {
	font-family: 'entypo', sans-serif;
}

body > section{
	@include grid-row();
	& > article {
		& > section {
			padding: 50px 0;
		}
	}
	& > article.top_page {
		@include grid-column(12);
		& > section > nav {
			@include grid-row();
			section:first-child {
				margin-bottom: 25px;
				ul {
					list-style: none;
					@include block-grid(4);

					a {
						display: block;
						border: 4px solid $light-bg-color;
						padding: 10px;
						@include border-radius(10px);
						&:hover {
							background: $light-bg-color;
						}
						span {
							display: block;
							text-align: center;
							&:first-child {
								font-size: 30px;
								line-height: 50px;
							}
							&:last-child {
								color: $light-font-color;
							}
						}
					}
				}
			}
			section:nth-child(2) {
				@include grid-column(6);
				ol {
					list-style-type: upper-alpha;
					list-style-position: inside;
				}
			}
			section:last-child {
				@include grid-column(6);
				ol {
					list-style-type: lower-greek;
					list-style-position: inside;
				}
				ul {
					list-style-position: inside;
				}
			}
		}
	}

	aside.note {
		padding: 30px 30px 20px;
		background: $light-bg-color;
		@include border-radius(10px);
	}
}
footer {
	margin: 50px 0 0 0;
	padding: 20px 30px;
	background: $primary-color;
	color: #fff;
}

みそしりんぐ

現在進行形みそしる

C言語の学習ページをデザイン

結果

Foundation

導入

使い方

Foundation

grunt-bower-task

Foundationで今回使ったもの

使い方

アイコンフォント

コード