スタッフブログ

2022/01/05

CSSの基礎

2021年度新人研修シリーズ 第2弾

今回は、『CSSの基礎』として、CSSについてご紹介します!

CSSとは

CSSとは、Webページのデザインを指定するものです。HTMLの文書構造とセットで扱い、色や位置関係などの見た目を整えます。

CSSには「セレクタ」という指定方法があります。基本的なセレクタは主に3つです。

  1. HTML要素:HTMLタグを指定する
  2. class要素:HTMLタグにclass属性をつけて指定する
  3. id要素:HTMLタグにid属性をつけて指定する
CSSの基本構造
セレクタ 見た目を変える「場所」を指定
プロパティ 見た目を変える「項目」を指定
指定した要素の、どの部分の見た目を変えるのか
文字サイズ、背景色、フォント、余白など
見た目を変える「程度」を指定
どのように見た目を変えるのか、具体的な種類・数値を指定
色は何色にするか、フォントの種類は何にするのか、どのくらい余白を空けるのかなど

セレクタ:HTML要素

HTMLのタグ名をセレクタに指定します。

セレクタ:class要素

HTMLのclass属性名をセレクタに指定します。指定するときは、class属性名の前に「.」を付けます

セレクタ:id要素

HTMLのid属性名をセレクタに指定します。指定するときは、id属性名の前に「#」を付けます

画面イメージ

 

このようにCSSではWebページの見た目を整えることができます。

CSSのプロパティについては以下のサイトを参考にしてみてください!

 スタイルシートリファレンス:http://www.htmq.com/style/

 

次回は『JavaScriptの基礎』として、JavaScriptについてご紹介いたします!

2021/12/27

HTMLタグの基礎ー3

2021年度新人研修シリーズ 第1弾

『HTMLタグの基礎-1』 はこちらから   http://www.kenes.co.jp/blog/detail/2-HTMLタグの基礎-1

『HTMLタグの基礎-2』 はこちらから   http://www.kenes.co.jp/blog/detail/3-HTMLタグの基礎-2

 

『HTMLタグの基礎-3』では、HTMLで「フォーム」を作成・表示する方法をご紹介します!

フォーム

フォームは入力欄や選択肢、ボタン送信など、入力されたデータをサーバーに送る際に使用します。

<input>、<textarea>、<select>、<button>などの様々なタグがあります。

特に、<input>タグについてはtype属性の種類が多いので、表形式にまとめました。

type属性名 機能
text 1行のテキストボックス
button ただのボタン(機能は持たない)
submit 送信ボタン
image 画像ボタン
password パスワード(入力された文字が●になる)
radio 選択肢の中から1つだけ選べる
checkbox 選択肢の中から複数選べる
file ファイルのアップロード
range スライダー
date 日付
time 時刻

こちらが、上の<input>タグの表のうち、type属性がtext~rangeまでのサンプルです。

こちらが、上の<input>タグの表のうち、type属性がdate・timeのサンプルと、その他タグ<textarea>、<select>のサンプルです。

その他

<sub>で下付き文字、<sup>で上付き文字を書くことができます。

subとsupでたったの1文字しか違いがないので、混乱しやすいですよね。

個人的には
  • sub:サブはメインの次 = 下
  • sup:up(アップ)が含まれている = 上
のような形で解釈してます。

こちらが、サンプルコードと画面イメージです。

 

以上、3回にわたってHTMLの基礎をご紹介してきましたが、いかがでしたでしょうか?

次回の「2021年度新人研修シリーズ 第2弾」をお楽しみに!

2021/12/24

HTMLタグの基礎-2

2021年度新人研修シリーズ 第1弾

『HTMLタグの基礎-1』 はこちらから

  http://www.kenes.co.jp/blog/detail/2-HTMLタグの基礎-1

 

『HTMLタグの基礎-2』では、HTMLで「テーブル、リスト、画像」を作成・表示する方法をご紹介します!

テーブル

<table>タグを<tr>タグ・<td>タグと合わせて使うと、簡単に表を作成できます。

テーブルは主に以下のタグ要素で構成されています。

  • <table>:テーブル全体
    border属性:表の外枠の枠線の太さ cellpadding属性:セル内の余白 cellspacing属性:セルとセルの間隔
  • <thead>:テーブルのヘッダー
  • <tbody>:テーブルの本体
  • <tfoot>:テーブルのフッター
  • <tr>:行の作成
  • <th>:見出しのセル
    文字が強調され、中央揃えで表示される
  • <td>:データのセル
    rowspan属性:縦のセルを結合 colspan属性:横のセルを結合

こちらが、サンプルコードと画面イメージです。

 

リスト

リストは<ul>で箇条書きリスト、<ol>で番号付きリストが作成できます。

ちなみに、私は<ol>タグに「o」が入っているので、箇条書きの「●」だと勘違いしそうになりました。

こちらが、サンプルコードと画面イメージです。

 

画像

<img>タグで画像の挿入ができます。<img>タグには以下のような属性があります。

  • src属性:画像ファイルのURL
  • alt属性:画像の説明文 画像が上手く表示されなかった場合、ここで指定した説明文が表示される
  • height属性:画像の高さ
  • width属性:画像の幅

こちらが、サンプルコードと画面イメージです。

2021/12/22

HTMLタグの基礎-1

こんにちは!前回より少々間が空いてしまいましたが、皆様いかがお過ごしでしょうか。

 

2021年度の新人研修にて、「HTML」「CSS & JavaScript」「jQuery」「VBA」「シェル」の5つについて調査・発表を行いました。

今後数回にわたって、当時作成した資料を各項目ごとに投稿していきたいと思います。

題して、「2021年度新人研修シリーズ」です!

 

第1弾は、HTMLタグについてのご紹介です!

 

HTMLとは

HTMLとは、主にウェブページを作成する際に使用する言語です。HTMLタグで文章を囲むことで、この文章の構造を表しています。

 

HTMLの基本構造

HTMLの基本構造として3つのタグ要素があります。

  • <html>
    「これはHTML文書ですよ」ということを示す
  • <head>
    文字コード、タブタイトルなど、文書全体の説明
  • <body>
    本文、実際に表示されている画面の内容

 

<p>タグ <div>タグ <span>タグ <h1>~<h5>タグ
  • <p>:段落(前後に改行が入る)
  • <div>:ブロック要素(前後に改行が入る)
  • <span>:インライン要素(前後に改行が入らない)
  • <h1>~<h5>:見出し(1から順に文字サイズが小さくなる)

試しに見出しを大きい順に並べると...

 

このように、HTMLは主にウェブページ作成で使用し、タグ要素で構成されています。

次回はよく使われるタグ要素をご紹介したいと思います!