プログラミング

TechBoost講座!HTMLとCSSを使ってサイト構築

こんにちは!当たり前のように使っているアイテムには有難さを感じます。はるです。

プログラミング講座でHTMLとCSSのカリキュラムに入って、サンプルのサイトを作っている最中です。

何度も何度も直して上手くいかなくて、よく見たらスペル間違いみたいなしょうもないことだったり、逆に先生と一緒にやっても上手くいかなかったりw

だけど必ず答えがあるので、難易度の高いパズルゲームとか、パーツ数のめちゃくちゃ多いプラモを作ってるような感じで楽しいです!

最初は大変だけど、誰にでも出来るもの

まず最初は<h>文字<h1>で見出しが出来るとか、<ul></ul><li></li>の組みあ合わせで箇条書きが作れるとか、「htmlタグを打てば何々が出来る」を見ていきます。

次は打ち込んだhtmに対し、文字を装飾したり、位置を整えたりする作業です。

メモ帳から「CSS」と拡張子を変換し、CSSシートを作って書き込んでいきます。

CSSシートに「h1 { color: red; font-size: 20px; }等々を記入し、文字を赤くしたりサイズを大きくしたりしてあげます。

※赤で示している所がHTML+CSSのコード=HP上ではこう表示されます、という例

後はこの繰り返しです。ひたすら書いていきますw

だからやってる事自体は単純なんですよね。

極端に言うと、どこにどういうタグを配置してあげるか考えて打ち込むだけです。

パズルのピース探して配置する作業と一緒ですね。

出来上がりはこちら

ちょっと前にネタバレしてしまっていますが、完成したのはこちらです。

教材に従っていたから詰まるところはありませんでしたが、コピペせずにひたすら打ち込んだので何時間かはかかりました。

ショートカットを覚えればもっと楽に早く出来るのでしょうが、現段階ではまだ手打ちです。

どんなタグやコードを打ち込めば、こんなHPが出来ますよというのは、本当に説明書を見ながらプラモデルを組み立てているような感覚でした。

打ち込み終わって、例と同じものがちゃんと出来上がっていると嬉しいですね!

理系文系、関係なし?

「PCとかネットなんて理系だろ」とか思ってましたが、全然そんな事ないですね。

特にこのHTMLでは「何をどこにどう配置する」の組み合わせなので、本当にパズルです。

役割を持つ適切なタグを探し、正しい位置に配置し、他と組み合わせていく。

終わればシンデレラ城とか、ガンダムとか、スカイツリーが出来上がっている。

難しい知識も道具も必要なく、PCさえあれば誰にでも出来るチャンンスがある。

そう感じています。

バリバリ文系の私でも出来るので、色んな方に挑戦していただけるものだと感じています!

それではまた!

 


スポンサードリンク