スタッフブログ

2022/02/22

jQueryの基礎

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

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

jQueryとは

jQueryとは、JavaScriptのライブラリの一つです。

JavaScriptのコードをシンプルに書けるようになるので、開発の効率化や保守性の向上が期待できます。

jQueryの導入方法は2つあります。 練習用で使用する場合は、2つ目のScriptを入れ込む方法が手軽にできておすすめです!
  1. jQueryをダウンロードする(オフラインでも使用できる)
  2. 以下のScriptを<body>タグの最後に書き込む(オフラインでは使用できない)
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    ※<head>タグの中に書くと正常に動かない場合があるので注意!
jQueryの基本構造

jQueryはJavaScriptのライブラリなので、jsファイルに書きます。

基本構造は「$(function(){ 処理 };」となっています。

コードサンプル

ここでは、ボタンイベントと表示・非表示関数を紹介します。

画面イメージ

このように、jQueryはJavaScriptでは複雑になってしまう処理も、ライブラリとしてシンプルに書くことができます!

2022/02/08

JavaScriptの基礎

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

『CSSの基礎』はこちらから

  http://www.kenes.co.jp/blog/detail/5-CSSの基礎

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

JavaScriptとは

JavaScriptは、主にブラウザ上での表示に動きを持たせる際に使用するプログラミング言語です。

JavaScriptを読み込む方法は2つあります。
  1. HTMLファイルの中に書き込む
  2. 外部ファイル(jsファイル)として読み込む
ここでは、HTMLに書き込む方法を使用しています。
JavaScriptの書き方

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年度新人研修シリーズ 第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は主にウェブページ作成で使用し、タグ要素で構成されています。

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