HTMLとCSSを練習する２

おつかれさまです。

こんな感じのビューファイルをHTMLとCSSで作ってみます。

「社畜（しゃちく）とは〜」から、最後の「= SHACHIKU Co., Ltd. =」まで、まずは要素をHTMLに突っ込んでみます。

<p>社畜（しゃちく）とは、主に日本で、社員として勤めている会社に飼い慣らされてしまい自分の意思と良心を放棄し奴隷（家畜）と化した賃金労働者の状態を揶揄したもの。「 会社+家畜」から来た造語かつ俗語で、「会社人間」や「企業戦士」などよりも外部から馬鹿にされる意味合いを持つ。
</p>

pは文章を記載する記号です、ブラウザで見てみます。

ほうほう、とりあえず文章が入った。

もうひとつ追加、

<p><a href="#">社畜 - Wikipedia</a></p>

これはWikipediaへ飛べるようにaタグで記述、文要素でもあるのでとりあえずpでもかこっておきます。

おけおけ、前回aタグのCSSを編集しているので、黒文字の標準で出力されています。

次は画像を挿入します、Railsで画像を挿入するにはapp/assets/imagesの下に挿入したい画像ファイルを格納します。今回は「いらすとや」さんから拝借した社畜画像と、パワポで作った残業申請＆休日申請、３つの画像を使います。

ファイルが格納できたら、HTML上でそのファイルを呼び出します。

<%= image_tag('SHACHIKU.png', :size => "200x200") %>

「<%=〜%>」はRubyタグといい、RailsのHTML中でRubyを使用するためのタグです、まあ深くは分かりません。「image_tag」で画像を呼び出します、imagesに格納したファイルの名前を書くことで呼び出せます、「size」で大きさを指定しています。

ちゃんと画像が入ってますね、しかしこの画像、、、ノータッチ

そのままあと２つの画像も挿入します、この画像はボタンの機能も付加したいので、aタグで囲います。

<a href="#"><%= image_tag('KYUSYUTSU.png', :size => "100x100") %></a>
<a href="#"><%= image_tag('ZANGYO.png', :size => "100x100") %></a>

いいっすね、最後に「= SHACHIKU Co., Ltd. =」を入れて完了です。

<p>= SHACHIKU Co., Ltd. =</p>

ひとまず、要素のつっこみが完了です、下記まとめ

<h1>社畜エンジニア発掘前線</h1>

<ul>
  <li><a href="#">今日の社畜ニュース</a></li>
  <li><a href="#">今日の出社時間</a></li>
  <li><a href="#">今日の退社時間</a></li>
  <li><a href="#">社畜Q&A</a></li>
</ul>

<p>社畜（しゃちく）とは、主に日本で、社員として勤めている会社に飼い慣らされてしまい自分の意思と良心を放棄し奴隷（家畜）と化した賃金労働者の状態を揶揄したもの。「 会社+家畜」から来た造語かつ俗語で、「会社人間」や「企業戦士」などよりも外部から馬鹿にされる意味合いを持つ。
</p>

<p><a href="#">社畜 - Wikipedia</a></p>

<%= image_tag('SHACHIKU.png', :size => "200x200") %>
<a href="#"><%= image_tag('KYUSYUTSU.png', :size => "100x100") %></a>
<a href="#"><%= image_tag('ZANGYO.png', :size => "100x100") %></a>

<p>= SHACHIKU Co., Ltd. =</p>