汗で稼ぐ榎本行宏の『えのちゃんねる日記（仮題）』〜webデザインの勉強と漫画と小説と麻雀とあとなんか。〜はてなブログ版バージョン1.17 yukihiroenomoto666’s diary

『えのちゃんねる日記（仮題）』はてなブログ版へようこそ！汗で稼ぐ榎本行宏（フェリカwebサイト制作科2014年8月18日開講の生徒）のwebデザインの勉強や漫画や小説や麻雀やあとなんかの話。（*ω*）

スポンサーリンク

今日の授業は難しかった。

汗で稼ぐ榎本行宏（フェリカwebサイト制作科2014年8月18日開講の生徒）です。
今日の授業は難しかった。いつも難しいけど。
でも一段と難しかった。
祭り男くんも今回は苦戦していた。
今日の授業でやったCSSは下の方にコピペしてまとめてみた。
授業終わってからも祭り男くんも残って自習していた。
自習が終わって祭り男くんは僕を置いてSさんと先に帰ってしまった。
祭り男くん！最近なんか僕に冷たくない？？
しかもSさんと一緒に帰るだなんて、なんて羨ましいんだ。

なんて日だ！

こうなったら維新政党・新風に入党してヤルタポツダム体制を打破するしかない！（*ω*）
維新政党・新風 - 日本人なら、新風が支持する候補者を勝たせよ！


榎本行宏のツイッター↓
@yukihiroenomoto

↓えのちゃんねる日記のはてなブログ版。

汗で稼ぐ榎本行宏の『えのちゃんねる日記（仮題）』〜webデザインと漫画と小説と麻雀とあとなんか。〜はてなブログ版バージョン1.17 yukihiroenomoto666’s diary


↓えのちゃんねる日記のはてなダイアリー版。

汗で稼ぐ榎本行宏の『えのちゃんねる日記（仮題）』〜webデザインと漫画と小説と麻雀と、あとなんか。〜はてなダイアリー版バージョン1.17

↓授業で作ってるjimdoの僕のページ。
Home - comic-parkdias-ye-666 ページ！

↓以下は今日の授業でやったHTMLとCSS。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ページタイトル</title>
<link rel="stylesheet" href="css/style2.css">
</head>
<body>
<h1></h1>
<p></p>
<div id="nav">
<ul>
<li id="home"><a href="#">ホーム</a></li>
<li id="food"><a href="#">カフェフード</a></li>
<li id="drink"><a href="#">カフェドリンク</a></li>
<li id="info"><a href="#">インフォメーション</a></li>
<li id="contact"><a href="#">お問い合わせ</a></li>
</ul>
</div>
</body>
</html>

@charset "utf-8";

/* reset */
html, body, div, h1, p, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}

/* layout */
#nav {
  width: 750px;
  margin: 50px auto;
}
#nav ul {
  width: 750px;
  height: 40px;
  overflow: hidden;
  text-indent: -999em;
}
#nav li {
  float: left;
}
#nav li a {
  display: block;
  width: 150px;
  height: 40px;
  background: url(../img/btn.jpg) no-repeat left top;
}
#nav li#home a {
  background: url(../img/btn.jpg) no-repeat left top;
}
#nav li#home a:hover {
  background: url(../img/btn.jpg) no-repeat left -50px;
}
#nav li#food a {
  background: url(../img/btn.jpg) no-repeat -150px top;
}
#nav li#food a:hover {
  background: url(../img/btn.jpg) no-repeat -150px  -50px;
}
#nav li#drink a {
  background: url(../img/btn.jpg) no-repeat -300px top;
}
#nav li#drink a:hover {
  background: url(../img/btn.jpg) no-repeat -300px -50px;
}
#nav li#info a {
  background: url(../img/btn.jpg) no-repeat -450px top;
}
#nav li#info a:hover {
  background: url(../img/btn.jpg) no-repeat -450px -50px;
}
#nav li#contact a {
  background: url(../img/btn.jpg) no-repeat -600px top;
}
#nav li#contact a:hover {
  background: url(../img/btn.jpg) no-repeat -600px -50px;
}