paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」の開発者が、プログラミングやITエンジニアの転職などについて書いています。

20200204140738

ITエンジニア向け総合求人・学習サービス「paiza」の開発者が、プログラミングやITエンジニアの転職などについて書いています。

プログラミング動画学習 paizaラーニング

初心者でもHTML/CSSの使い方を学べる入門レッスン紹介

f:id:paiza:20140916135428p:plainこんにちは。谷口です。

最近は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ラーニング

そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

詳しくはこちら

paizaのおすすめコンテンツ

Webセキュリティ入門 ハッカー入門 Webセキュリティ講座がスタート!CVは内田真礼さん! Python✕AI 機械学習入門講座 CVに上坂すみれさんを起用!人気の機械学習講座を公開中!
paiza転職 paiza新卒 EN:TRY paizaラーニング Copyright Paiza, Inc, All rights reserved.