スタッフブログ
2022/02/08
JavaScriptの基礎
2021年度新人研修シリーズ 第２弾
『CSSの基礎』はこちらから
http://www.kenes.co.jp/blog/detail/5-CSSの基礎
今回は『JavaScriptの基礎』として、JavaScriptについてご紹介します！
JavaScriptは、主にブラウザ上での表示に動きを持たせる際に使用するプログラミング言語です。
- HTMLファイルの中に書き込む
- 外部ファイル(jsファイル)として読み込む
JavaScriptでは要素を取得し、その取得した要素に対する処理を書いていきます。
JavaScriptで作成した処理はイベントハンドラというもので実行します。
イベントハンドラとは、何か動作(=イベント)が起こったときに処理を実行する、というものです。
よく使用されるイベントハンドラをいくつかご紹介します。
| イベントハンドラ | 動作 | 指定できるHTML要素 |
|---|---|---|
| onClick | 要素やリンクをクリック | <button> <input> など |
| onChange | フォーム要素の選択 入力・入力内容の変更 |
<input> <select> <textarea> |
| onBlur | フォーム要素からフォーカスが外れた時 | <a> <area> <label> <input> <select> <textarea> <button> |
| onFocus | フォーム要素にフォーカスが当たった時 |
対応する部分を同じ色の枠で囲んでいます。
●HTML側
●JavaScript側
このように、JavaScriptではボタンイベントやアラート表示など、画面に動きを持たせる処理を実現できます！
2021年度新人研修シリーズ 第2弾『CSS・JavaScriptの基礎』は以上になります！
CSSはデザイン編集、JavaScriptはイベント処理に関わっています。
前回のHTMLと合わせてCSS・JavaScriptを使用することで、Webページ作成の幅がグググっと広がります！
2022/01/05
CSSの基礎
2021年度新人研修シリーズ 第２弾
今回は、『CSSの基礎』として、CSSについてご紹介します！
CSSとは、Webページのデザインを指定するものです。HTMLの文書構造とセットで扱い、色や位置関係などの見た目を整えます。
CSSには「セレクタ」という指定方法があります。基本的なセレクタは主に３つです。
- HTML要素：HTMLタグを指定する
- class要素：HTMLタグにclass属性をつけて指定する
- id要素：HTMLタグにid属性をつけて指定する
| セレクタ | 見た目を変える「場所」を指定 |
|---|---|
| プロパティ | 見た目を変える「項目」を指定 指定した要素の、どの部分の見た目を変えるのか 文字サイズ、背景色、フォント、余白など |
| 値 | 見た目を変える「程度」を指定 どのように見た目を変えるのか、具体的な種類・数値を指定 色は何色にするか、フォントの種類は何にするのか、どのくらい余白を空けるのかなど |
HTMLのタグ名をセレクタに指定します。
HTMLのclass属性名をセレクタに指定します。指定するときは、class属性名の前に「.」を付けます。
HTMLのid属性名をセレクタに指定します。指定するときは、id属性名の前に「#」を付けます。
このようにCSSではWebページの見た目を整えることができます。
CSSのプロパティについては以下のサイトを参考にしてみてください！
スタイルシートリファレンス：http://www.htmq.com/style/
次回は『JavaScriptの基礎』として、JavaScriptについてご紹介いたします！
2021/12/27
HTMLタグの基礎ー３
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 | 選択肢の中から１つだけ選べる |
| checkbox | 選択肢の中から複数選べる |
| file | ファイルのアップロード |
| range | スライダー |
| date | 日付 |
| time | 時刻 |
こちらが、上の<input>タグの表のうち、type属性がtext～rangeまでのサンプルです。
こちらが、上の<input>タグの表のうち、type属性がdate・timeのサンプルと、その他タグ<textarea>、<select>のサンプルです。
<sub>で下付き文字、<sup>で上付き文字を書くことができます。
subとsupでたったの１文字しか違いがないので、混乱しやすいですよね。
- sub：サブはメインの次 ＝ 下
- sup：up(アップ)が含まれている ＝ 上
こちらが、サンプルコードと画面イメージです。
以上、３回にわたって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属性：画像の幅
こちらが、サンプルコードと画面イメージです。
