未経験プログラマー物語【第二章 研修編②】CSSで文字色を変える

次の課題はCSSを使って文字色を変えるというものだった。

<!DOCTYPE html>
<html>
<head>
<title>Hello tab</title>
</head>
<body>
<p>Hello, world</p>
</body>
</html>

前回までのHTMLはこう。今回はHello, worldの色を赤に変えてる。

「なんだ簡単じゃーん」そういってハジメは早速コードを書いてみる。

<!DOCTYPE html>
<html>
<head>
<title>Hello world</title>
</head>
<body>
<font color=”#ff0000″>Hello, world</font>
</body>
</html>

「Hello, worldの前にfontというタグをつけてcolorで#ff0000(赤)を指定している。ちょっとググればすぐにできるじゃん」

得意気に提出したところ、回答としてはバツ。なぜなら『CSS』を使っていないから。

「えーなんでわざわざそんな面倒なことをするんだ?文字が赤くなってるからいいじゃないか」

納得がいかないハジメだった…。

解説


ハジメ君のいうとおりタグを使うことで文字の色を変えることは可能です。今回は文字がひとつしかない画面だからいいです。でも皆さんが見ているホームページって文字がぽつんとあるだけではないですよね?

例えばyahooのトップページなんかは色々なコンテンツが所狭しと並んでいます。これをひとつひとつタグで文字色を設定していたらとても大変です。もしかしたら変更漏れがあるかもしれません。そういう時にCSSを使いまとめて文字色を変えることが出来ます。

※ちなみにハジメが使ったfont color=”#ff0000″の書き方は最近では非推奨ですのであまり真似しないようにしてください。環境によっては適用されません。

以下が模範解答になります。

<!DOCTYPE html>
<html>
<head>
<title>Hello world</title>
</head>

<body>
<p class=”font_test”>Hello, world</p>
</body>
</html>

<style>
p.font_test {
color: #ff0000;
}
</style>

 

まず<style>以下が増えました。<style>~<style>で囲むとこの間はCSSだよと宣言していることになります。

そしてp.font_test というのがCSSで指定するスタイルの塊の名前になります。そしてcolor: #ff0000;で赤を指定します。

HTMLに戻り

<p>Hello, world</p>

<p class=”font_test”>Hello, world</p>

のように変更します。class=”font_test”をつけることでCSSのfont_testという名前を指定していることになります。””を忘れないようにしましょう。

実際にこのコードをメモ帳なりに張り付けて拡張子を.htmlにし、ブラウザにドラッグすると赤文字のHello, worldが表示されたと思います。

また、CSSは当然ながら文字色の変更だけでなく文字の大きさ、背景色など色々な指定をすることができますので気になった方は調べてみてください。


CSSをつかって課題をクリアできたハジメ。

「CSSで効果をまとめると便利だな。今度からはちゃんとCSSをつかおうっと」

まだまだ一人前のプログラマーへの道は遠そうです…。

つづく

スポンサーリンク

未経験プログラマー物語【第二章 研修編①】はじまりはHTML

研修には講師が一人いて、社内インフラと研修講師を兼任している。

そして約3カ月、この講師が作った研修課題を消化していくことになる。

一緒に研修を受けるのは同期入社の堂木さん、それと先月に入社した先輩が2人と自分で合計5人だ。先輩方は1カ月先に入社しているのでその分課題も進んでいるようだ。わからないことがあれば先輩に聞いてもよさそうだ。

最初の課題はHTMLだった。

講師「では最初の課題からやっていってね。なんかわからなかったら呼んで」

そういうと講師は自分の作業に戻る。

課題のExcelファイルを開くとウェブページの見本が載っている。これと同じページを作るといいようだ。早速メモ帳にHTMLを書いていく。最初のページはHTMLだけで完結するようだ。

ハンバイ(この辺はホームページ作成でやったことがあるから簡単だな)

 

解説


一番初めにHTMLからとはかなり基礎的なところから始まりましたね。

<!DOCTYPE html>
<html>
<head>
<title>Hello tab</title>
</head>
<body>
<p>Hello, world</p>
</body>
</html>

 

HTMLでは上記のような基本的な構成があります。これをメモ帳などに書いて、.htmlという拡張子をつけるとHTMLファイルになります。これを実行するには何かブラウザを開いてそこにHTMLファイルをドラッグすればページが表示されます。上の例だとHello, worldという文字がページに表示され、タブにはHello tabと表示されます。

元くんは元々ホームページをいじっていたようなのでこの辺は大丈夫みたいですね。


早速課題も提出しここまでは順調なハンバイ。

この調子でいけるのか…。

つづく

スポンサーリンク

未経験プログラマー物語【第二章 研修編】初出社

「今日からプログラマーか」

28歳未経験からプログラマーへ転職した半灰元(はんばいはじめ)。今日が初出社です。

きれいなビルの最上階へエレベーターで向かう。そうかやっぱりIT系はきれいなビルなんだなぁなどと思いながら期待と不安でどきどきしていました。

無事会社に着きまずは会議室へ通されます。すでにひとり待っていました。

「堂木(どうき)です。これからーよろしくーお願いします。」

半灰「はんばいです。よろしくお願いします。」

語尾が微妙に伸びるのが気になるけど優しそうな人でした。

それからもうひとりやってきて全員そろったようです。同期入社は3人でみんな中途採用のようです。

挨拶もそこそこに会社の説明を受け、研修室へ向かいます。堂木さんと自分は研修でもうひとりは現場配属されるようです。これから約3カ月の研修が始まります。

解説


いよいよプログラマーとしての人生が始まった元。これからはしばらく研修を受けるようです。

研修は期間を設けて座学をするパターンとOJTという現場で働きながら覚えろというパターンがあります。むかしはOJTも多かったようですが最近はあまり聞かなくなりました。プログラマー不足が叫ばれるなかでいきなりOJTをしてしまうと辛いようで定着しなかったのではないでしょうか?最近はしっかり研修を受けて現場に出ることが多いようです。

さて初登場の堂木さんですが、研修を受けるといっても元々はプログラマーとして働いていた期間もあり、全くの未経験というわけではないようです。そういう意味ではマイナスからスタートすることになる元。はたしてどうなるのでしょうか?

 

つづく

スポンサーリンク

未経験プログラマー物語【第一章 コラム】未経験可とは

プログラマーへの転職で『未経験』という言葉には気をつけなければいけません。転職活動をしていて、未経験可という言葉には大きく二つの意味があることに気がつきました。

ひとつは文字通りIT知識が全くない業界未経験者。物語でいうと元が当てはまります。

もうひとつは情報系の学校を卒業していて知識を持っている、もしくは自分でなにか作ってたりしているが業務未経験者という場合です。

私は転職活動中、求人で『未経験者可』とある企業を中心に履歴書を送っていましたが、この認識の違いがあったためミスマッチが起こっていました。履歴書を送り、落選して初めて気がつくのです。

プログラマーの数は常に不足しています。そこに全くの未経験でも潜り込めるチャンスがあります。

プログラマーになろうとしてまずはスクールに通うのもいいかもしれないですが、思い切って求人に募集するのもいいのではないでしょうか?熱意が伝わればチャンスはあると思います。

スポンサーリンク

未経験プログラマー物語【第一章 転職活動編⑤】天秤

「ようやく内定が出た…。」

先日入社試験と面接をしたA社から無事内定をもらった元。年収は300万円弱だが土日祝休みの正社員だ。入社後は3カ月の研修があるが、その期間もきちんと給料は出るようだ。

「よかったね。」と妻も安心したようだ。

ここでひとつ決めなければならないことがある。実はプログラマーへの転職が失敗した場合の保険として人材派遣会社も面接しており、こちらも内定が出ていたのだ。この人材派遣会社もA社とほとんど同じ条件となっているがシフト勤務になる。ただし上場企業というのが魅力だ。

「そもそも未経験で入社してプログラマーとしてやっていけるのかな…。それでまた転職するくらいなら今の経験を活かせる人材派遣会社に入社したほうがキャリアアップできるきもするし…。」

やりたかった仕事か、それともキャリアアップか。天秤にかけることになってしまいました。

解説


未経験でIT業界へ入る人もいないわけではありません。ただ、学校できちんと学んだ上で入社してくる人と比べるとやはり出遅れています。IT企業へ内定をもらうのもかなり苦労したので少し気後れしているようです。年齢なども考えるとキャリアアップをするほうが将来的にもいいように思えてくるのも無理はありません。ましてや家族を養うことがどうしても最優先になります。

ただ悩んだ期間は一瞬のようで、すでに答えは決まっていたようです。


「やっぱりプログラマーになるよ。元々その職業を目指していたわけだし、辛くても3年は頑張ってみる。それで駄目ならまた販売士に戻るよ(笑)」

プログラマーになりたくて転職活動をし、無事内定が出た。ここで進まなければ後悔すると思う。

元の気持ちは決まっていました。妻も応援してくれているようでようやくスタートラインに立てたのです。

つづく

スポンサーリンク