1. ホーム
  2. コース一覧
  3. CSS入門講座

CSS入門講座

全2コース/12講座

正しい文章構造でホームページをデザインするCSS。
記述方法から基本的なスタイル、段組や表の装飾などの必須デザインテクニックまで、SEOにも役立つCSSの記述方法を優しく伝授いたします!

 

CSS入門講座 前編


練習データをダウンロードする

全講座まとめて再生する

「CSS入門講座 前編」の全講座を、まとめて受講することが出来ます。

 
全て受講

再生時間:59分50秒 

 

これから必須の「CSS」とは?

CSS(スタイルシート)が、ホームページ制作の上でどのような役割を果たすのかご紹介しています。また付属の練習用データの扱い方についてもご案内しています。

 
受講する

再生時間:3分24秒 

 

基本情報を入力

CSS(スタイルシート)を使ってスタイルを設定する前に、HTMLソースを整え下準備をします。「DOCTYPE(ドックタイプ)宣言」や「meta(メタ)データ」といった、ホームページの基本情報を入力します。

 
受講する

再生時間:7分27秒 

 

CSSの書き方~直接記述~

CSS(スタイルシート)の基本的な記述方法を図を用いて解説します。HTMLファイルに直接記述する方法をお伝えします。

 
受講する

再生時間:5分49秒 

 

CSSの書き方~外部ファイル~

CSS(スタイルシート)のプログラムをHTMLファイルに直接記述せずに、外部ファイルとして分離させる方法を解説します。外部ファイルにし複数ページから参照させることで、修正や更新などの作業効率を大幅にアップさせることが可能になります。

 
受講する

再生時間:4分28秒 

 

フォントの設定 1 ~色と大きさ~

フォント(文字)の色や、大きさを設定する方法を解説します。

 
受講する

再生時間:6分15秒 

 

フォントの設定 2 ~太さと行間~

フォントの太さと、文章の行間を設定する方法を解説します。行間の設定によりホームページの文章を読みやすく調整します。

 
受講する

再生時間:3分0秒 

 

背景画像の挿入/繰り返し

背景に画像を表示する方法を解説します。HTMLだけでは表現できなかった、水平/垂直一定の方向のみ背景画像を繰り返す、という設定方法をご紹介します。

 
受講する

再生時間:3分5秒 

 

ボックス 1 ~ボーダー~

「ボックス」と呼ばれる重要な概念について図解します。ボックスの構造と、幅・高さの計算方法を正しく理解することで、ホームページのデザイン崩れを防ぐことができます。また、ボーダー要素を使った罫線の装飾を行います。

 
受講する

再生時間:6分26秒 

 

ボックス 2 ~余白をつける~

ボックスの要素の「margin(マージン)」「padding(パディング)」を使って、余白を設定する方法を解説します。あわせて、ボックスとボックスが隣あった場合の余白の計算方法も図解します。

 
受講する

再生時間:7分24秒 

 

クラス名

CSS(スタイルシート)を使う上で、大変便利な書き方「クラス指定」についてご説明します。特定の範囲にのみ、スタイルを適用させたい場合に利用されます。

 
受講する

再生時間:9分7秒 

 

<span>で特定の文字列を指定

タグを使って、特定の文字列にのみスタイルを適用させる方法をご紹介します。

 
受講する

再生時間:2分19秒 

 

まだまだ続くCSSの世界

CSS(スタイルシート)に記述することができる「コメント文」についてお伝えしています。このコメント文は、ホームページ上には表示されない、制作者用のメモとして使用されます。

 
受講する

再生時間:1分6秒 

 

CSS入門講座 前編


 

企業・公共機関向けラーニングシステム「eトレーニング for company」
Back To Top