こんにちは。谷口です。
最近はIT周りの技術を必要とする企業が増えたこともあってか、本職がWebデザイナーやITエンジニアではない方の中にも、「HTML/CSSを勉強したい！」という方が増えてきたなと感じます。
そこで今回は、これからHTML/CSSに入門したい方、プログラミング初心者の方向けに、HTML/CSSの基礎が学べるpaizaラーニングの「HTML/CSS入門編」をご紹介します。
HTMLとCSSって何？
簡単に言うと、HTMLはWebページを作成する時に使用されるマークアップ言語の一つです。マークアップ言語は、「タグ」を使って「ここからここまでが見出し」「ここからここまでは一つの段落」などといった印をつけるような役割を持っています。プログラミング言語のように「入力された値を取得して、計算処理をして、結果を表示する」「条件によって処理を変える」「指定された条件が満たされるまで繰り返す」などといったことはできません。
CSSは、Webページのスタイルシートの規格の一種で、主にHTMLで記述されたページのスタイルを記述するために使われます。HTMLがWebページ内の文章構造を定義しているのに対し、CSSではそれをどのように装飾するかを指定するものです。たとえば、文字の色、サイズ、レイアウト等を指定することができます。
HTMLやCSSは、特に環境設定などをしなくてもブラウザとエディタさえあれば、覚えたコードを書いて、表示して結果を見る……といった実践がすぐにできます。基本的にはWebページの見た目を作るためのもので、「プログラミングはハードルが高い…」という方でも挑戦しやすいかと思います。
paizaラーニングのHTML/CSS入門編
HTML/CSS入門編1: HTML/CSSを理解しよう
このレッスンでは、Webページの基礎となる、HTMLとCSSについて学習します。そのために、BootstrapというHTMLフレームワークを使って、簡単なWebページを実際に作成します。HTMLとCSSは、WebサイトやWebサービスの開発に不可欠な技術ですので、ぜひ身につけましょう。
01:Webページの仕組みを知ろう
HTMLとCSS、Bootstrapの概要
02:Webページを作ってみよう
HTMLの基本の書き方、簡単なWebページ、見出しの作成
03:テキストを表示してみよう
テキストの追加、HTMLにおけるテキストの扱い方
04:Bootstrapを使ってみよう
HTML5とHTMLフレームワークBootstrapの使い方
HTML/CSS入門編2: CSSの基礎を学ぼう
CSSについて、またスマホやタブレットでもWebページを見やすく表示するためのレスポンシブデザインとグリッドについて解説します。
01:CSSの基本形を理解しよう
CSSの概要について
02:CSSの色指定を理解しよう
CSSの色指定について
03:CSSのフォント指定を理解しよう
テキストのサイズやフォントをCSSで指定する方法
04:CSSのレイアウト指定を理解しよう
CSSを使ったパーツのレイアウト、余白や間隔を指定する方法
05:レスポンシブデザインにしよう
Bootstrapのコンテナ、レスポンシブデザインの作り方
06:Bootstrapのグリッドシステムを理解しよう
Bootstrapのグリッドシステムについて
HTML/CSS入門編3: HTML要素を学ぼう
画像、リンク、テーブル、フォームなど、HTMLの要素について学びましょう。
01:画像とリンクを載せよう
Webページに画像とリンクを追加する方法
02:リストとナビゲーションバーを追加しよう
Webページに箇条書きのリストを追加する方法、ナビゲーションバーの作り方
03:テーブルを表示しよう
表を作成し表示する方法
04:基本的なフォームを作ろう
会員登録や問い合わせなどに使えるフォームの作り方
05:フォームにパーツを追加しよう
プルダウンリストの作り方、パーツをフォームに追加する方法
06:グリッドでフォームを作ろう
Bootstrapのグリッドシステムを使ってフォームのレイアウトを整える方法
まとめ
「HTMLやCSSを使ってみたい…」という方は、paizaラーニングのpaizaラーニングの「HTML/CSS入門編」から初めて、そこから自分でWebサイトを作って使ってみると、無理なく学べるかと思います。
HTML/CSS入門編について、詳しくはこちら
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
詳しくはこちら
そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
詳しくはこちら
