TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS 入門から始める！CSSを学習できるサイト18選【初心者向け】
オーダーメイドコース
icon
icon
CSS

入門から始める！CSSを学習できるサイト18選【初心者向け】

プログラミング初心者向けに入門向けのCSS学習サイトをまとめています。HTMLを勉強したら同様にCSSも覚えなければなりません。CSSの勉強をこれから始めるという人にもおすすめの学習サイトです。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

無料でプログラミングを学習できるサイトの中から、CSSを学べるものやそれに特化したものをまとめました。

どの学習サイトも初心者向けで挫折しないような作りになっているので、これから勉強してみようかなという人におすすめです。

CSSを覚えれば、Webサイトのデザインを自分で編集することができるのでぜひ学習してみてください。

 

そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。

 

田島悠介

今回は、CSSに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

CSSを学習できるサイトの使い方について詳しく説明していくね！

大石ゆかり

お願いします！

 

目次

 

動画やハンズオン形式

最近多い動画で学習するサイトやサイト上でソースコードを書きながら進めるスタイルの学習サイトをまとめています。本のように読み進めていくだけでなく、実際にその場で書きながら学習できるので、より早く習得できるでしょう。

 

css_ls_1

会員登録の必要もなく、ブラウザ上ですぐに始められる学習サイトです。
画面内にコード画面・プレビュー画面・解説のスライドが同時に表示されており、内容を確認しながら自分で入力して学ぶことができます。
レッスン用の教材サンプルをダウンロードして、オフラインでの練習もできるようになっています。

Markup

 

CODEPREP

css_ls_2

クイズ形式のようにCSSを操作して次に進んでいく、ゲーム感覚で楽しく学習できるサービスです。
画面左のヒントを見ながら右上のコード画面に入力し、右下に表示されるリアルタイムプレビューを見ながら進行していきます。
実際に入力しながらの練習なので、何となく分かっているような部分もしっかり覚えられるようになっています。

Progate

css_ls_3

スライドで学習した後に実践で確認するという二段階でのレッスンが基本です。
コードを入力する場面では現在の状態のプレビューと完成形の見本を同時に見ながら作業ができるようになっています。
実践中でもいつでもスライドを見直すことが可能なので、内容を確認しながら入力の練習をすることができます。

Progate

 

Codecademy

css_ls_4

基礎からひとつずつ実践を踏まえてレッスンを行います。英語サイトになります。
問題に関する解説やヒントが詳しく、しっかり理解しながら進行することができます。
また、分からないところは公式のフォーラムで他のユーザーなどに質問することもできます。

ドットインストール

css_ls_5

動画でプログラミングを学習することができるサービスです。
どの動画も3分前後なので、集中して学ぶことができます。
レッスン動画を見ながら「学習メモ」をとることも可能です。

Skillhub

css_ls_6

動画と解説記事両方で確認しながらレッスンを受けることができるサイトです。
レッスン動画は10分前後で、実際の操作を見ながら詳しく学ぶことができます。
Facebookとの連携にも対応しています。

schoo

css_ls_7

こちらも動画での学習サイトです。
各コースの動画の他に、生放送でのレッスンも受けることができます。
有料会員では過去の生放送の録画が見れたり、各職種に必要なスキルに特化したレッスンを受けることができるようになっています。

schoo

 

Dash

css_ls_8

依頼を受けているという設定で色々な課題をこなし、物語を進めていくというユニークなシステムになっています。英語サイトになります。
実践的な機能を最初から学んでいくことが可能です。
学習したセレクタやプロパティは一覧からいつでも復習・確認ができるようになっています。

 

読み物系

以下で紹介していくサイトは、記事など勉強したい内容ごとに文章でまとまっています。

自分のペースで読み進めていきたいという人に最適でしょう。

 

Webクリエイターボックス

nm_02_01

カナダのバンクーバーでWebの仕事をしていた女性が送るWebサイト。

女性ならではのきめ細やかさ、デザインの綺麗さが目立ちます。彼女からCSSを学べるというのはありがたいの一言に尽きます。サンプルコードもあります。感謝です。

Webクリエイターボックス

 

CSS. Design Sample

nm_02_02

サンプルを使ってCSSを学べるサイトです。

サイトの構成もシンプル。知りたい内容にすぐジャンプできてソースを学べるでしょう。

CSS. Design Sample

 

7日間でできるCSSベースのホームページの作り方

nm_02_03

1週間でCSSについてしっかり、ゆっくり理解できます。

早く自分のものにして自分のホームページを作りたい気持ちはわかりますが、プログラミングは堅実に一歩一歩やらないと身に付きません。焦らず進めていきましょう。

7日間でできるCSSベースのホームページの作り方

 

CSSレイアウト実践講座

nm_02_04

CSSの基本に加え2段組CSSレイアウトだったり3段組もあり、上級のことや意外に知らないことが書かれていたりします。

少しCSSを勉強した後にこちらを訪れてみるといいかもしれません。

CSSレイアウト実践講座

 

HTMLクイックリファレンス

「HTML」とついてしまっていますがCSSのリファレンスでもあるのです。

一通りCSSを勉強したてその後に「なんだっけな？」と思ったらここに来て探してみましょう！

答えは見つかるはずです。

HTMLクイックリファレンス

 

w3schools.com

nm_02_06

英語のサイトですが左サイドバーに綺麗に項目ごとに分かれていて勉強したいことがさっと勉強できます。

このようなデザインのものを見ること自体CSSの勉強にもなるでしょう。

w3schools.com

 

CSSデザインテンプレート

nm_02_07

CSSのデザインテンプレートが入手できるサイトを厳選して紹介してくれています。

デザインテンプレートとはだれかすごい人が作ったデザインがそのまま使えるという優れもの。でも、そのまま使っては能がないのでぜひとも自分なりに改造しましょう。

CSSデザインテンプレート

 

WebDesignLesson

nm_02_08

CSSの入門的なところからかなり深いところまでのっています。

基礎から着実にしっかり身につけたい人はおすすめです。

WebDesignLesson

 

Web programming Primer

nm_02_09

CSSについて親しみやすい口調で親切に丁寧に教えてくれます。

硬い文章が苦手な方は是非このサイトで勉強されていくことをおすすめします。

Web programming Primer

 

CSS BASICS

nm_02_10

こちらも英語サイトですがきちんとチャプターごとに分かれていて、基礎からハイレベルなところまで連れて行ってくれます。

英語サイトは抵抗があるかもしれませんが、英語で理解するとプログラミングはもっと簡単に理解できるという話もあります。ぜひ試してみてください。

CSS BASICS

 

いかがだったでしょうか。

最近では、動画学習や自分で書きながら覚える学習サイトがどんどん増えています。人それぞれ自分に合った学習方法があるはずなので、ぜひ使って試してみましょう。

自分のオリジナルのWebサイトを制作できるはずです！

 

大石ゆかり

内容分かりやすくて良かったです！

田島悠介

ゆかりちゃんも分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

TechAcademyでは、初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

記事を検索

関連するキーワード

関連する記事

色々な動きを表現できる！CSSのtransitionプロパティの書き方【初心者向け】

CSSのtransitionプロパティを使う方法について解説しています。 一定時間でプロパティを変化させ、アニメーションをつけたい時に便利です。メニューの...
CSS

スペースを作りたい！CSSでmarginの書き方【初心者向け】

初心者向けにCSSでmarginの書き方を解説しています。これからCSSを学習しようと思っている方でも実際に業務で使っている方でもmarginは必ず使用します。...
CSS

CSSでfont-weightを使って文字の太さを指定する方法【初心者向け】

CSS初心者向けに、font-weightを使って文字の太さを指定する方法を解説する記事です。 CSSの基礎がわからない場合は、CSSの書き方の記事を先に...
CSS

CSSでobject-fitを使った画像トリミング方法を現役エンジニアが解説【初心者向け】

CSSでobject-fitを使った画像トリミング方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します...
CSS

CSSの否定疑似クラス:notの使い方を現役エンジニアが解説【初心者向け】

CSSの否定疑似クラス:notの使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 CSS...
CSS

CSSのtransitionが効かない原因と対処法【初心者向け】

CSSのtransitionが効かない原因について解説します。transitionプロパティを使うと変化の速度を調節することが出来てアニメーションのように表示す...
CSS

あわせてよく読まれている記事

スマホ対応！CSSでメディアクエリの書き方【初心者向け】現役エンジニアが解説

今回はBootstrapなどを使わずにレスポンシブページを実現する方法であるメディアクエリについて説明します。 Webサイトを作る上でスマホ対応は当たり前になってきています。 メディアクエリとはメディアタイプやメディア特性によって表示を変えるレスポンシブデザインで利用する設定です。 レスポンシブデザインではスマホやタブレットやPCによって変わるメディアタイプやメディア特性に応じた最適な表示にするデザインを言います。 メディアクエリを理解することはレスポンシブデザインへの理解へとつながる基礎的な部分になります。 メディアクエリを理解することで、Web制作において様々な端末で最適な表示を可能にできます。 これからWebサイトを作る上では必ず必要になる知識なので、ぜひ今のうちに習得しましょう。 目次 動画で学ぶ！メディアクエリとは メディアクエリとは Web制作で推奨されているメディアタイプ メディア特性 メディアクエリの書き方 複雑なメディアクエリの組み合わせを実現する方法 実際に書いてみよう   田島悠介 今回はメディアクエリを利用する方法を解説しよう。 大石ゆかり 田島メンター！！メディアクエリというのは何ですか〜？ 田島悠介 スクリーンや印刷などのメディアタイプに加えて、さらに縦横の長さなどによるスタイルの適用範囲を決めることができるものなんだ。 大石ゆかり なるほど、いろいろな条件に対応して見え方を変えるという感じでしょうか？よろしくお願いします！ 動画で学ぶ！メディアクエリとは 今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。 [PR] Webデザインで副業する方法とはメディアクエリとは 今や、Webページを閲覧する際にレスポンシブデザインであることは当たり前になりつつあります。 メディアクエリはCSSを用いて、レスポンシブなWebページを作ることができます。 CSS3になってから登場した新しい表現なのでぜひ習得していきましょう。   メディアタイプの種類 メディアタイプ 対応デバイス all すべてのデバイス braille 点字用ディスプレイ embossed 点字用プリンター handheld モバイルデバイス print プリンター projection プロジェクター screen ディスプレイ speech 音声出力デバイス tty 固定幅フォントで出力するデバイス tv テレビ   なお、メディアクエリ4からは、screen, print, speech, all を除くすべてのメディアタイプを非推奨に指定されています。   Web制作で推奨されているメディアタイプ Web制作で推奨されているメディアタイプは以下の4つです。 all screen print speech について詳しく解説していきます。   all すべてのメディアタイプに適用されます。   コード例 @media all { p { color: green; } } 表示結果   解説 次のように@media allで宣言して{}内で指定のcssを記載すると適用されます。 allで適用すると結果的にすべてのメディアタイプで同じ処理になります。 今回はcolor: white;で色が緑色になります。   screen ディスプレイが存在するメディアタイプに適用されます。 PC、スマホ、タブレットはscreenです。   screenの動作 See the Pen medis by マインクラフトゲームアプリプログラミング学校 (@programjp) on CodePen. 解説 screenのcolor:redという指定で文字が赤色で表示されています。   print 印刷用に適用されます。 印刷プレビュー画面で確認できます。   print表示結果 解説 screenのコードを印刷プレビューすると、青色になります。   speech 音声読み上げ機能の際に適用されます。 今回は、次のコードで「メディアタイプによる、色、処理の変化」音声出力した場合、「、」の部分で空白時間が発生し、自然な語り口になります。 @media speech { p { speak: literal-punctuation; } }   メディア特性 メディア特性名 メディア特性 any-hover マウスを該当要素の上に移動させた場合に処理をします。この移動をホバーと言います。 any-pointer ポインティングデバイスの性能に応じて表示するcssを変更できます。 aspect-ratio ビューポートの幅対高さのアスペクト比に応じて表示するcssを変更できます。 color 機器の表示色数性能に応じて表示するcssを変更できます。 color-gamut 機器の表示色域に応じて表示するcssを変更できます。 color-index 機器の色参照テーブルの項目数に応じて表示するcssを変更できます。 device-aspect-ratio 機器の幅対高さのアスペクト比に応じて表示するcssを変更できますが非推奨です。 device-height 機器のレンダリング面の高さを指定できますが、非推奨です。 device-width 機器のレンダリング面の幅を指定できますが、非推奨です。 display-mode cssのdisplay-modeで指定した内容に応じて表示するcssを変更できます。 forced-colors カラーパレットを制限している場合に応じて表示するcssを変更できます。メディアクエリ5以降の追加機能です。 grid 機器がグリッドとビットマップ画面のどちらを利用するか指定できます。 height ビューポートの高さを指定できます。 hover マウスホバーした際のcssを指定できます。 inverted-colors 色が反転している場合にcssを適用できますが、Safariのみ利用可能です。メディアクエリ5以降の追加機能です。 light-level 明るさに応じて表示するcssを変更できますが、メディアクエリ5以降の追加機能です。 monochrome 機器のモノクロ出力情報に応じて表示するcssを変更できます。 orientation ビューポートの向きに応じて表示するcssを変更できます。 overflow-block ブロック軸方向にあふれたコンテンツの扱いに応じて表示するcssを変更できます。 overflow-inline インライン軸方向にあふれたコンテンツがスクロールできるかに応じて表示するcssを変更できます。 pointer ポインティングデバイスの性能に応じて表示するcssを変更できます。ただし、 any-pointerのほうがより正確に処理できます。 prefers-color-scheme ユーザーが表示させたい明るさに応じて表示するcssを変更できます。メディアクエリ5以降の追加機能です。 prefers-contrast 隣接色のコントラスト量の増減に応じて表示するcssを変更できます。ただ、実験段階のため表示できるブラウザは存在しません。 prefers-reduced-motion ユーザーが表示上で動きを少なくしたい場合に適用できます。前庭運動障害をお持ちの方向けの設定です。メディアクエリ5以降の追加機能です。 prefers-reduced-transparency ユーザーが透明度を下げたいと希望している場合に適用できます。メディアクエリ5以降の追加機能です。 resolution 機器のピクセル解像度に応じて表示するcssを変更できます。 scan 機器のスキャン処理方式に応じて表示するcssを変更できます。 scripting JavaScriptなどのスクリプト利用に応じて表示するcssを変更できます。メディアクエリ5以降の追加機能です。 update コンテンツ表示更新頻度に応じて表示するcssを変更できます。 width ビューポートの幅に応じて表示するcssを変更できます。   メディアクエリの書き方 メディアクエリの書き方は以下の通りです。 link要素として指定する場合 スタイルシートに指定する場合 CSS内で@importする時に記述する CSS内で@mediaを記述する 詳しく解説していきます。   link要素として指定する場合 headerのlink要素でメディアクエリを指定する方法を解説します。 サンプルコード <link rel="stylesheet" href="./media.css" media="screen and (max-width: 780px)"> 解説 href=”./media.css”では、読み込むファイルのパスを、同じ階層にあるmedia.cssで指定しています。 media=”screen and (max-width: 780px)”では、メディアタイプの指定 and (メディア特性の指定)を行っています。 今回は表示デバイスの最大幅が780pxの場合適用されます。 つまり実際の表示の変化はmedia.cssの実装が適用されます。   CSS内で@importする時に記述する スタイルシート内に@importを利用してメディアクエリを適用する方法について解説します。 サンプルコード @import url('media.css') screen and (max-width: 780px); 解説 @importでインポートすることを宣言しています。 url(‘media.css’)でmedia.cssをインポートしています。 screen and (max-width: 780px)では、メディアタイプの指定 and (メディア特性の指定)を行っています。 今回は表示デバイスの最大幅が780pxの場合、media.cssが適用されます。 つまり実際の表示の変化はmedia.cssの実装が適用されます。   CSS内で@mediaを記述する スタイルシート内に@mediaを利用してメディアクエリを適用する方法について解説します。 サンプルコード @media screen and
CSS

基礎から学ぶ！HTMLにCSSを適用（読み込み）させる方法【初心者向け】

基本的にHTMLだけでは文字を表示するだけで、リッチなデザインが整ったWebデザインを制作することは難しいです。 そんな時に必要になってくるのがCSSです。 HTMLでCSSを読み込むためには、2つの方法があります。 今回は、その方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 本記事はテックアカデミーのはじめての副業コースのHTMLカリキュラムの内容をもとに解説しています。 目次動画やハンズオン形式MarkupCODEPREPProgateCodecademyドットインストールSkillhubschooDash読み物系WebクリエイターボックスCSS. Design Sample7日間でできるCSSベースのホームページの作り方CSSレイアウト実践講座HTMLクイックリファレンスw3schools.comCSSデザインテンプレートWebDesignLessonWeb programming PrimerCSS BASICS そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 HTMLにCSSを適用（読み込み）させる方法について詳しく説明していくね！ 大石ゆかり お願いします！   CSSの読み込み方（適用方法） HTMLでCSSを読み込むためには、次の2つの方法があります。 外部CSSファイルをHTMLから読み込む方法 HTMLファイル内に直接CSSを記述する方法   1.外部CSSファイルを読み込む方法 外部CSSファイルを読み込む方法は、Webデザインの現場で一般的に使用されている方法です。 事前に拡張子が「.css」のファイルを用意し、HTMLに以下のタグを記述します。 <link rel="stylesheet" href="sample.css"> HTMLファイルに上記のコードを1行追加することで、sample.cssという名称のファイルに記述されたCSS定義をHTMLに適用することができます。   また、この1行をHTMLファイルのどこに記述するかという点についてですが、場所はHTMLファイルの<head>タグ内に記述します。 以下のようにHTMLファイルに記述しましょう。 HTML <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="sample.css"> <title>HelloTechAcademy</title> </head> <body> <p>ここにHTMLの文章などが入ります</p> </body> </html> ここで、CSSファイル読み込み処理のhrefの値は、HTMLファイルとCSSファイルの配置場所によって変化するので気を付けましょう。 上記サンプルの場合は、HTMLファイルとCSSファイルは同じディレクトリに配置する必要があります。   また、HTMLファイルと同じディレクトリにcssというフォルダがあり、その中にsample.cssというファイルが配置されている場合、CSSファイル読み込み処理は以下のように記述します。 <link rel="stylesheet" href="css/sample.css">   2.HTMLファイル内に直接CSSを記述する方法 HTMLファイル内に直接CSSを記述する方法は、一般的にはほとんど使う機会の無い方法ですが、このような適用のさせ方もあります。 まず、以下のようにCSS定義を<style>タグの中に記述します。 <style type="text/css"> p { color : red; } </style>   用意した<style>タグは、HTMLファイルの<head>内に以下のように記述します。 HTML <html> <head> <meta charset="UTF-8">
HTML

今さら聞けない！CSSとは【初心者向け】現役Webデザイナーが解説

CSSとは何かについて、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   「CSSが分からないけど今さら聞けないよな…」 「CSSってなんで必要なんだろう…」 「どうやってCSSを書いたらいいんだろう…」   上記のような疑問や悩みを感じている方は、最後まで読んでいただければ「CSSとは何か」を理解できますのでぜひ参考にしてみてください。 目次動画やハンズオン形式MarkupCODEPREPProgateCodecademyドットインストールSkillhubschooDash読み物系WebクリエイターボックスCSS. Design Sample7日間でできるCSSベースのホームページの作り方CSSレイアウト実践講座HTMLクイックリファレンスw3schools.comCSSデザインテンプレートWebDesignLessonWeb programming PrimerCSS BASICS そもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。   大石ゆかり 田島メンター！！CSSは何を行うものなんですか～？ 田島悠介 CSSの役割はサイトの「見た目」を作ることだよ。 音声による読み上げや印刷時に関する設定もできるけれど、一番多く使われる役割はWebページのデザインやレイアウトなど「見た目」に関する指定だね。 大石ゆかり 見た目というと文字や画像の大きさ、色などですか？ 田島悠介 そうだね。 実際のサイトで、CSSが適用されている場合とそうでない場合の違いを見てみよう。   CSSとは CSSとは「Cascading Style Sheets」 の頭文字をとったものであり、スタイルシートとも呼ばれます。   HTMLは見出しやヘッダー情報などWebページの文書構造を形作るための言語です。 対してCSS言語は、HTMLで作られた文書構造にデザインを加えて見栄えを整える役割を担っています。   WebページはHTMLとCSSが組み合わさって作られているのです。     実際に、ブラウザでWebページを表示してみましょう。 （ここでは、例としてテックアカデミーのWebサイトを開いています） 上記のページはHTMLとCSSとの両方を使って作られています。 画像が入っていたりリンク部分をボタンのように装飾したり、見栄えが良くなるようデザインされていますよね。     試しに上記のページからCSSを除き、HTMLの文書構造のみを表示させてみましょう。 かなり簡素なページになりましたね。   たまにWebページの読み込みがうまくいかない場合など、このような画面が表示されたことがある人もいるのではないでしょうか。   キレイに整ったデザインのWebページを表示するためには、HTMLにCSSを加える必要があるのが分かりますね。   田島悠介 CSSを適用していない場合のサイトを見るとどうかな？ 大石ゆかり 見出しと文字がただ順番に書かれただけになって、画像の位置や大きさもなんだか変わっちゃいましたね。 田島悠介 これらのレイアウトやデザインを指定しているのがCSSになるんだ。 今見ているのは、HTMLだけで構成された状態の文書だね。 大石ゆかり 見やすいページを作るのに、CSSはとても大事なんですね。   CSSファイルの作り方 CSSファイルの作り方の手順をご紹介しましょう。 ファイル名に拡張子の「.css」をつけることで、CSSファイルとしてコンピュータが認識してくれます。   拡張子とは 拡張子とは、ファイルの種類を分かりやすく判別するために使われる文字列です。 みなさんも普段使うWordやExcelなども以下のような拡張子で表示されます。 Word：.docx Excel：.xlsx 文書：.pdf 画像ファイル：.jpeg   CSSファイル作成の手順 CSSファイルの作成は以下の手順で行います。 新規フォルダを作成 作成したフォルダ名の最後に「.css」と書く 練習でCSSファイルを作成する場合は「test.css」や「style.css」など、分かりやすい名前を付けてあげましょう。   実際に以下の画像のように「.css」のファイルを作成してみます。 上記のように簡単にCSSファイルが作成できますので、実際に手を動かしてみて作成してみましょう。   [PR] Webデザインで副業する方法とはCSSを実際に書く方法 先ほど作成した「style.css」ファイルを使って、実際にCSSを書いてみましょう。   まずは、HTMLファイルを用意します。 CSSをHTMLファイルに読み込ませるために、<head>と</head>で囲まれた部分に <link rel="stylesheet" href="style.css"> といった一文を以下の画像のように入れます。 <link rel="stylesheet" href="style.css">を書くことで、HTMLに「style.css」ファイルがリンクされ、CSSの指定をHTMLでも読み込んでくれるようになります。     では実際に、以下のような緑色の背景に白色で「TechAcademy」という文字を表示させるCSSの指定を書いてみましょう。   編集は以下の手順で行います。 HTMLファイルを編集 CSSファイルを編集 では、順番に見ていきましょう。   HTMLファイルの編集 まずはHTMLファイルの編集です。 <body>と</body>で囲まれた部分に表示させたい文章を書いていきましょう。   コードを書く際、CSSを適用させる場所を分かりやすくするため、緑色の背景を表示させるための「main」という枠と、文字を表示させる「text」という枠を用意します。 完成されたページで見ると、以下のように分けています。   用意した枠にそれぞれ「クラス名」を設定してあげます。 クラス名とは「class=”○○”」というように表記されたCSSを適用させるためのタグのことです。     今回はbodyタグ内に、「main」と「text」のクラス名をそれぞれ以下のように記述します。 （HTMLの記述に自信がない方は「HTMLとは」という記事も合わせてお読みください。） 以上でHTMLの編集は終了です。   CSSファイルの編集 続いて、CSSファイルの編集です。   HTMLの編集で全体を囲む「main」クラスと、文字を表示させる「text」クラスを用意しましたね。 それぞれのクラスに幅や配色などのデザインを「style.css」に指定していきましょう。   今回は背景と文字のデザインを以下のように指定しましょう。 背景色：緑 高さ：200px 幅：100％ テキストの位置：センター フォントサイズ：36px テキストの色：白 上記の内容を「style.css」に以下のように記述していきます。 CSSファイル内では、クラス名の名前の前に「.」を付けて表現するのが決まりですので覚えておきましょう。     上記のようにCSSを指定すると以下のようなページが表示されます。   はじめはCSSの記述と完成イメージがうまく結びつかず、思うようにレイアウトやデザインが出来ない場合も多々あるでしょう。 しかし、繰り返し練習していくと慣れていきますので何度も試しながら学習していきましょう。   執筆してくれたメンター ノマ リカ 印刷会社の校閲部門に半年、DTPオペレータとして4年間経験を積んだ後、Web制作会社にて8年間デザイナーとして従事。 現在は住宅メーカーに勤務しながら社内のSE及びWeb担当として従事しています。   田島悠介 CSSに関する基本的な構造だよ。 大石ゆかり 「main」の部分、「text」の部分それぞれに色や大きさの指定をしているんですね。 田島悠介 この「.main」「.text」のようなスタイルを適用させる範囲の指定を「セレクタ」というんだ。 まずはこれを覚えておこう。 大石ゆかり 頭に入れておきます。 ありがとうございました！   CSSを実際に書いてみたい場合は、CSSの書き方の記事も合わせてお読みください。 また「HTMLとは」という記事も読んでおくと、よりHTMLの理解も深まりますのでおすすめですよ。   CSSを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい CSSを学習していて、このように思ったことはありませんか？ テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。 まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
CSS

誰でも簡単にできる！HTMLで文字の色を指定する方法【初心者向け】

文字や背景の色を指定するにはCSSを使用するのが一般的です。しかし、簡単な色設定だと、HTMLのみでも可能です。 そこで今回はHTMLで色の指定をする方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 本記事はテックアカデミーのはじめての副業コースのHTMLカリキュラムの内容をもとに解説しています。 目次動画やハンズオン形式MarkupCODEPREPProgateCodecademyドットインストールSkillhubschooDash読み物系WebクリエイターボックスCSS. Design Sample7日間でできるCSSベースのホームページの作り方CSSレイアウト実践講座HTMLクイックリファレンスw3schools.comCSSデザインテンプレートWebDesignLessonWeb programming PrimerCSS BASICS そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。 なお、今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。   HTMLだけで文字の色を変える 文字の色を変える方法は複数あります。 今回は2通りの方法をご紹介します。   fontタグを使う方法 1つは、fontタグを使用する方法です。 色を変えたい文字をfontタグで囲ってから、タグ内にcolor=”xxx”と記述します。 h1タグを使って、大きな文字で色の変更もできます。 色はred, blue, green, brown など、好きな色を指定しましょう。 HTML <h1><font color="red">こんにちは！</font></h1>   style指定をする方法 もう1つは、style指定をする方法です。 CSSの記法で、HTMLタグに直接スタイルを適用できます。 色を変えたい文字を囲っているタグに、style=”color : xxx”と記述します。 囲うタグが特にない場合は、spanタグで囲いましょう。 HTML <h2 style="color:blue">こんにちは！</h2> <span style="color:brown">こんにちは！</span>   <font>タグ利用方式とstyle属性指定方式の違いとメリット おすすめは、style属性を指定する方式です。 それぞれの方式の違いを詳しくご説明します。   <font>タグを使う方式の特徴 覚えやすくて簡単な方式です。 文字フォント専用に、タグを用意する点が特徴です。 しかし、これはCSSの利用が一般的になる前の方式で、現在は非推奨となっています。 使う場合は、趣味のページや非公開ページに限定したほうが良いでしょう。   style属性を使う方式の特徴 CSSファイルを用意せずにHTMLだけでスタイルを変更する場合に、最良の方法です。 HTML構造に影響を与えずに、既存のタグの中に「style=”xxx”」と追記するだけで良いのも特徴です。 また、HTMLを扱う場合はCSSを別途用意するのが本来のあり方なので、style属性を使いながらCSSに慣れることができるのも長所と言えるでしょう。   実際に書いてみよう それでは実際にHTMLで色を変更してみましょう。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HelloTechAcademy</title> </head> <body> <p>Hello TechAcademy !</p> <h1><font color="red">こんにちは！</font></h1> <h2 style="color:blue">こんにちは！</h2> <p style="color:green">こんばんは！</p>
HTML

スタイルシート（CSS）の基本的な書き方【初心者向け】

本記事ではCSS（カスケーディングスタイルシート）の基本的な書き方について初心者向けに解説します。 目次動画やハンズオン形式MarkupCODEPREPProgateCodecademyドットインストールSkillhubschooDash読み物系WebクリエイターボックスCSS. Design Sample7日間でできるCSSベースのホームページの作り方CSSレイアウト実践講座HTMLクイックリファレンスw3schools.comCSSデザインテンプレートWebDesignLessonWeb programming PrimerCSS BASICS 【動画の解説はこちら】   田島悠介 今回はCSSの基本的な書き方について勉強していこう。 大石ゆかり 田島メンター！！CSSの構文ではどんなものを使うんですか〜？ 田島悠介 まず覚えておきたいのが「セレクタ」「プロパティ」「値」の3つだね。これをおさえておけばだいたいのことはできるようになるよ。一番基本の形を見てみよう。 大石ゆかり はい！   CSSでできること CSSは、HTMLで作成された文書に対して主に色や大きさなどの見た目の指定を行います。 以下のようなHTML文書があるとします。CSSが適用されていない場合の状態です。 CSSをHTMLで読み込み、スタイルを適用すると画面ではこのようになります。 背景色や文字の色が変更されたり、画像やボタン・文字列などが中央寄せになったり、ボタンにマウスカーソルを合わせるとアニメーションによって浮き上がったりします。このようなレイアウト・デザインに関する役割をCSSが行います。   スタイルシートが必要な理由 以前はHTMLのタグによってスタイルの指定も行われていました。 文字の大きさと色をHTMLで変更した場合の例 <font size="20px" color="red">テキスト</font> 現行のHTML5では<font>(文字の大きさや種類、色を指定する)などのスタイルに関するタグは廃止され、CSSで指定するのが基本となっています。 HTMLが文書の内容、CSSが見た目というように役割をはっきり分けてサイトを構成していきます。 同じ内容をHTMLとCSSで指定した場合の例 HTML <p>テキスト<p> CSS p{font-size:20px; color:red;}   [PR] Webデザインで副業する方法とはCSSでまず最初に覚えておきたい3つの要素 Webページの見栄えを整えるにあたり、CSSでは次の3つの要素を用います。 セレクタ – どのHTMLタグに対して見合えを調整するか プロパティ – どういった内容のデザインを施すか 値 – プロパティはどの程度か   簡単に言えば、「何に、どのように、どのくらい」デザインを施すかということを示します。 説明だけではわかりにくいと思うので、実際にスタイルを作ってみましょう。 たとえば、「h1タグ」に対して、文字の大きさを20ピクセルにしたいときは次のように設定します。 ほかのタグに設定したいときも同様です。 例）pタグ p {color: red; }   最初はややこしく感じるかもしれませが、一度覚えてしまえば簡単です。「:」や「;」を書き忘れないようにしましょう。   田島悠介 セレクタはスタイルの指定を行う範囲、プロパティは実行する内容、値は具体的な指定となるよ。 大石ゆかり この場合段落<p>のcolor、文字色をredの赤にするということですね。 田島悠介 そうだね。また、ひとつのセレクタに複数のプロパティを指定できるんだ。次の例を見てみよう。   プロパティを複数指定したいとき ひとつのセレクタに対して、プロパティは複数指定することができます。 たとえば、フォントサイズを20px・文字の色を青にしたいときには、 h1{font-size: 20px, color: blue;} のように書きます。 また、コードには空白部分は無視されるという性質があるので、{  }で囲んだ設定を見やすく並列に並べてもいいでしょう。 h1{ font-size: 20px, color: blue; }   プロパティの種類 プロパティにはほかにも、文字幅の調整や背景色の指定など目的別にたくさんの種類があります。「CSS リファレンス」などで検索すれば、様々なサイトが出てくるのでいろいろ試してみましょう。   下記の表は、CSSを書く上でよく使われるプロパティをまとめています。プロパティ自体は他にも多くありますが、紹介しているものは覚えておくと作業効率も上がるでしょう。 プロパティ 説明文 color 文字色を指定する background 背景の指定をする background-color 背景の色を指定する font-family フォントの種類を指定する font-weight フォントの太さを指定する line-height 行の高さを指定する text-align 行の揃え位置を指定する width 幅を指定する height 高さを指定する margin マージンの指定をする padding パディングの指定をする border ボーダーの色や太さを指定する position 要素の配置方法を指定する display 要素の表示形式を指定する float 左か右に寄せて配置する z-index 要素の重なりの順序を指定する   実践〜スタイルを作ってみよう〜 では実際に、プロパティを駆使して、簡単なスタイルを作ってみましょう。 今回は、次のHTMLコードをもとに進めます。 <!DOCTYPE html> <html lang=“ja”> <head> <meta charset=“UFT-8”> <title>CSS</title> </head> <body> <h1>CSS入門</h1> <p>はじめてのCSS</p>
CSS

【すぐに使える！】CSSのアニメーションをまとめたサイト・記事20選

今回はCSSのアニメーションをまとめたサイトや記事を紹介します。 サイトを作っていく上でアニメーションの実装は必須と言えるでしょう。より目立たせたり、クールな印象を持ってもらうためにアニメーションの書き方を覚えておくとサイトの表現に幅が出るはずです。 そもそもCSSが何かよく分からない場合は、先にCSSの書き方をご覧ください。   なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。   CSSアニメーションの素晴らしいアイデアのまとめ このサイトはデモページもセットであるために1ページでいくつかのデモを見ることができます。 上記のゲームボーイカラーの生成HTML、CSSなど真似したくなるアニメーションが多くあります・。 他にも動的なコンテンツが多くあるので必見のサイトでしょう。 CSSアニメーションの素晴らしいアイデアのまとめ   Hover.css アニメーションの実装でまず参考にしたいサイトの代表例ですね。 マウスオーバー時に関するアニメーションについては、このサイトを見れば十分表現ができるでしょう。書き方もすべてまとまっているので、初心者の方でも気軽に使用できるはずです。 Hover.css   [PR] Webデザインで副業する方法とはCSS3アニメーションをらく～に実装！オンラインツール7選 このサイトでは実装結果が分かった状態で、使いたいものを選ぶことができます。アニメーションを再現できる便利ツールをまとめているので、表現したいアニメーションが見つかるはずです。 CSS3アニメーションをらく～に実装！オンラインツール7選    ここまで動かせる！楽しいcss アニメーションのサンプル集 ここには動くサンプルが多く乗っています。 文字が奥にスクロールするものは実行してみたくなりますね。 ここまで動かせる！楽しいcss アニメーションのサンプル集   ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！ ここに乗っているサンプルは、オリジナルを作る際に参考になると思います。シンプルなアニメーションから3Dを用いた難易度の高いものも紹介されているので、ぜひ試してみましょう。 ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！   CSS3でアニメーション！transitionとanimationまとめ（サンプル付き） 上記にあげたようにオリジナルを作るための基礎になります。サイト内のアニメーションの動きとソースコードの書き方がどちらも載っているので、CSSでアニメーションを書いたことがないという人でも記載されているコードをペーストするところから始められるでしょう。 CSS3でアニメーション！transitionとanimationまとめ    初心者にもコピペで使えるCSSジェネレーター8個 紹介されているのはCSSジェネレータで、コピーして使えるという点が優れています。それぞれのアニメーションがGIFで紹介されているので、サイト上でどんな動きをするのか一目で確認することができるでしょう。 初心者にもコピペで使えるCSSジェネレーター8個   CSSのみでエフェクト・アニメーションを実装する方法 ここではいろいろなCSSアニメーションの書き方が書いてあります。アニメーションを実装したことがないという人は、この記事で書き方を見ておくと良いでしょう。 CSSのみでエフェクト・アニメーションを実装する方法    css3アニメーションのレパートリーがきっと増える！動きの参考になる22サイト ここではCSSのボタンがメインで紹介されています。 ボタンはマウスオーバーした時にアニメーションを施すWebサイトが多いですが、サイト制作をする上で役に立つでしょう。 css3アニメーションのレパートリーがきっと増える！動きの参考になる22サイト    【保存版】CSS3アニメーションを簡単に利用できるライブラリのまとめ ここではCSS3のライブラリのまとめが乗っています。 ライブラリとして導入する場合には見ておくとよいでしょう。 【保存版】CSS3アニメーションを簡単に利用できるライブラリのまとめ   【Webサイトに動きと個性を】CSSでアニメーションを駆使する方法！   CSS3でアニメーションを作る際の細かな調整方法などが紹介されています。 動きにこだわったサイトを作る際、活用できそうですね。 【Webサイトに動きと個性を】CSSでアニメーションを駆使する方法！   CSSアニメーション 入門   CSSを使ったアニメーションについて、分かりやすくまとめられています。 デモも確認できるので、リファレンスとしても活用できますね。 CSSアニメーション 入門   担当サイトが受賞したので、アニメーションの演出に使ったJavaScriptライブラリ、webツールを晒してみる ここではCSSを使ったアニメーションについて、プロの技を見ることができます。 全てを理解することは難しいかもしれませんが、いろんなテクニックが紹介されており、参考になりますね。 担当サイトが受賞したので、アニメーションの演出に使ったJavaScriptライブラリ、webツールを晒してみる   最近のWebサイトで見かけるHTML/CSSスニペット・JSライブラリ33個まとめ CSS3を使った、特に視覚効果の高いアニメーションが紹介されています。 インクが広がるエフェクト等、CSSでここまでできるんだと思うようなものばかりです。 最近のWebサイトで見かけるHTML/CSSスニペット・JSライブラリ33個まとめ   【CSS】最新マウスオーバーアニメーションスニペットサイト６選。 マウスオーバーアニメーションに特化したアニメーションが紹介されています。 スニペットを貼り付けるだけで利用できるので、自分のサイトに簡単に取り入れることができますね。 【CSS】最新マウスオーバーアニメーションスニペットサイト６選。   CSSでのロールオーバーアニメーションのチュートリアル集まとめ ここではCSS3を使ったロールオーバーアニメーションが紹介されています。 チュートリアルの紹介なので、初学者にも分かりやすく確認することができます。 CSSでのロールオーバーアニメーションのチュートリアル集まとめ   コピペで使えるアニメーションcss集 比較的シンプルなアニメーションがコード付きで紹介されています。 コピペで使えるアニメーションcss集   コピペで簡単！ローディングアニメーションの参考になるサイトまとめ ここではCSS3を使ったローディングアニメーションが紹介されています。 ローディング画面はユーザが良く目にするものなので、いろいろあって助かりますね。 コピペで簡単！ローディングアニメーションの参考になるサイトまとめ   CSS3アニメーションを手軽に作成できるオンラインツール9選 ここではCSS3アニメーションを手軽に作成できるオンラインツールが紹介されています。 ツールを活用して、効率的にアニメーションを作りたいですね。 CSS3アニメーションを手軽に作成できるオンラインツール9選   ちゃちゃっとCSSで色々とやりたい時に激しく便利なサイトとまとめ記事 ここではCSS3を使ったアニメーションを作成する時に参照できるサイトが紹介されています。 覚えておくと便利なサイトばかりですね。 ちゃちゃっとCSSで色々とやりたい時に激しく便利なサイトとまとめ記事   以上、CSSでできるアニメーションまとめサイト・記事を紹介しました。 CSSを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい CSSを学習していて、このように思ったことはありませんか？ テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を完全オンラインでしっかり習得できます。 まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
CSS

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

Webエンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

オーダーメイドコース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS 入門から始める！CSSを学習できるサイト18選【初心者向け】