PC奮闘記その2『HTMLに挑む!』 | 『時代はスマイル』

『時代はスマイル』

it just suggests a guy’s mysterious side

おはようございますヘ(゚∀゚*)ノ


昨日に引き続き本日もシコシコとPCの勉強に勤しんでおりましたヾ(▼ヘ▼;)




昨日はIllustratorのチュートリアルに従って簡単なロゴを作りました。
これですね↓

このまま今日もIllustratorを攻めようかと思ったのですが
学生の頃の勉強を思い出し


『もっと体系的に学習すべし!』


ということで別の項目にチャレンジしました。













『H T M L』





ボクにとってのラスボスです((゚m゚;)
これを1番勉強しなきゃなんです(+_+)




Illustrator以上にちんぷんかんだったぜよ・・・・・( ̄□ ̄;)







これまたチュートリアルに従って下のようにワケの分からない暗号を羅列しつづけました(@Д@;




<html>
<head>
<meta http-equiv="content-type-" 
content="text/html; charset=shift_jis">
<title>『時代はスマイル』</title>
<link rel="stylesheet" type="text/css" 
href="mystyle.css">
</head>
<body>
<h1>『時代はスマイル』</h1>
<p>
<img src="http://blog-imgs-60.fc2.com/o/u/t/outinomatome/muoc75xPIB1qgdafro1.jpg" alt=""フッフッフ">
</p>
<p>
<br>「このサイトでは<a href="http://www.wallpaperlink.com/bin/0701/03050.html">ドレスローザ</a>でのスマイルの取引について紹介していきます」</p>
<ul>
<li><a href="#baibai">人身売買なんてもう古いのさ!</a></li>
<li><a href="#jidai">時代は人造悪魔の実</a></li>
<li><a href="#doress">ドレスローザのスマイル工場</a></li>
</ul>
<h2><a name="baibai">人身売買なんてもう古いのさ!</a></h2>
<p>シャボンディ諸島のヒューマンショップなんてもう時代錯誤も甚だしい!</p>
<h2><a name="jidai">時代は人造悪魔の実</a></h2>
<p>グランドライン初となる<em>『人造による動物系悪魔の実』</em>の製造に成功!</p>
<h2><a name="doress">ドレスローザのスマイル工場</a></h2>
<p>お求めは新世界入ってすぐのドレスローザへ!<br>
スマイル工場での期間従業員も同時募集!</p>
</body>
</html>

body { background: 
orange; color:black; 
margin-left:2em; margin-right: 2em; 
}
h1 { background: green; color: white; font-size: 3.5em; font-style: italic; }
h2 { font-size: 2.0em; }
em { font-style: normal; font-weight: bold; color: red; }
a:link { color: blue; }
a:visited { color: blueviolet; }
a:hover { color: red; }



これを実際に表示の確認をすると





暗号だらけの文字の羅列がちゃんとページみたいになってる(iДi)

とりあえずドンキホーテファミリーになったつもりで『スマイル』を売り込むためのページをイメージしてやってます(笑)
期間従業員募集とか自分で書いてて笑ってしまったわw

でもこういう所で楽しさを追求していかなきゃ続かないよね!


上の画像はある程度進めたとこでスクショ撮ってあるんですが、昨日は少しいじっては表示の確認しながらやってました^^


自分がいじった所がしっかりページに反映してくれるのを見るのはなかなか楽しいですw

逆に全く変化しなかった時やページがおかしくなった時のストレスの加速はやばしヾ(。`Д´。)ノ笑



それでも
いちからのスタートなだけあって新たな発見の方が多いのでまだ楽しみながら勉強できてますね^^




ワクワクを保ちながら頑張りますヘ(゚∀゚*)ノ