Project_OKI’s diary

エンジニアの勉強ブログ

HTML,CSS,Javascript6(idやclassについて)

HTML系

HTMLのidとclassについて

この記事では、HTMLのidとclassについて記載する。

 

1. 目的

　・HTMLで装飾する場合や、javascriptを使用する場合などに、idやclassがよく使われる。

　このidとclassの意味、使い方について理解する。

 

目次

 

2. idとは

　・HTMLで使用する属性の一つ

　・通常属性には機能があるが、idは機能がない空の属性で、名前を付けられる。

　・idで付けた名前にCSSやjavascriptで装飾や操作などが出来る。

　・1つのページに同じ名前のidは一つだけ設定が可能。

 　(同じ名前を使う場合はclassを使用する。)

 

3.idの使い方

<タグ　id="id名"> </タグ>

例：

<p id="test">test</p>

 　・これで、testという名前のidが作成される。

 

このidにCSSで修飾する場合

#id名{ スタイルを記述(CSS) }

例：

#test{
 color: red;
}

これで、testというidの名前が付いた所が赤色になる。

 

4.プログラムの作成(idを使用し、文字の装飾をする。)

<!DOCTYPE html>
<html lang="ja">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hellow world</title>
	<style>
		/* CSS記載 */
		#test{
			color: red;
			background: pink;
			width: 150px;
			height:150px;
			position:relative;
			top:50px;
			left:50px;
		}
	</style>
</head>

<body>
	<p>通常pタグ1</p>
	<p id="test">pタグに属性付与</p>
</body>

</html>

 

実行結果

 

　・idに、文字の色を赤、バックグランドをピンクに指定し、150px×150pxの背景を追加した。

　・このように、CSSによって、文字の装飾などが出来る。

 

5.classの使い方

　・HTMLで使用する属性の一つ

　・通常属性には機能があるが、idは機能がない空の属性で、名前を付けられる。

　・classで付けた名前にCSSやjavascriptで装飾や操作などが出来る。

　・idと違い、1つのページに同じ名前のclassを複数使用可能。

 

6.classの使い方

<タグ　class="class名"> </タグ>

例：

<p class="test2">test</p>

 　・これで、test2という名前のclassが作成される。

 

このclassにCSSで修飾する場合

.class名{ スタイルを記述(CSS) }

例：

.test2{
 color: red;
}

これで、test2というclassの名前が付いた所が赤色になる。

 

7.プログラムの作成(classを使用し、文字の装飾をする。)

<!DOCTYPE html>
<html lang="ja">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hellow world</title>
	<style>
		/* CSS記載 */
		#test{
			color: red;
			background: pink;
			width: 150px;
			height:150px;
			position:relative;
			top:50px;
			left:50px;
		}
		
		.test2{
			color: blue;
			background: pink;
			width: 15px;
			height:15px;
			position:relative;
			top:60px;
			left:60px;		
		}
		
	</style>
</head>

<body>
	<p>通常pタグ1</p>
	<p id="test">pタグに属性付与</p>
	<p class="test2">p2</p>
</body>

</html>

実行結果

　

 

 

　使いたい機能などから必要なタグと属性について、下記を見ると良い。

　・HTML Living Standardリファレンス

　HTMLの基本の参考：

　・HTML の基本 - ウェブ開発を学ぶ | MDN

HTMLのidとは？使い方やclassとの違いについても解説 | 侍エンジニアブログ

【HTML】id属性とは？ 使い方と特徴を解説 | ZeroPlus Media

 

関連記事

過去の記事：

HTML,CSS,Javascript5(装飾：CSSの追加)

HTML系

HTMLを装飾する方法、CSSの追加について

この記事では、HTMLを装飾するCSSの追加する方法について記載する。

 

1. 目的

　・HTMLの装飾(文字の色の変更や、バックグランドの変更など)するための、CSSを使用する方法について記載する。

 

目次

 

2. CSS（Cascading Style Sheets）とは

　・Webサイトの背景の色の変更や画像の設置、文字のフォントや色などを設定するために使用する。

　・CSSは「シーエスエス」や「スタイルシート」などと呼ばれる。

 

3.CSSの使い方

　・CSSの記載箇所：CSSは、headタグの中の、styleタグの中に記載する。

<head>
 <style>
 /* CSSを記載 */
 </style>
</head>

 

　・CSSの使用方法

セレクタ{プロパティ:値;}

例：

p{
  color: red;
}

・セレクタ：h1,h2,h3,p,bodyなどのタグや、idやclassで指定した属性を指定する。

　例の場合、pタグすべてを赤色に変更している。

・プロパティ：CSSで設定する役割の指定。　colorによって、色の変更を行っている。

　→プロパティの種類などについて：CSS3リファレンスなどを参照。

・値：プロパティの設定値。　数値や、色の指定などが入る。

 

3.プログラムの作成(属性付与で文字列を真ん中にし、文字の色を赤にする。)

<!DOCTYPE html>
<html lang="ja">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hellow world</title>
	<style>
		/* CSS記載 */
		p {
			color: red;
		}
	</style>
</head>

<body>
	<p>通常pタグ1</p>
	<p align="center">pタグに属性付与</p>
</body>

</html>

 

実行結果

 

　・ｐタグに、色を赤にするCSSを追加した。それにより、全てのpタグが付いてる部分が赤文字になっている。

　・このように、CSSによって、文字の装飾などが出来る。

　・基本的にpタグなどを使用せず、idやclassなどを使用する。

 

　使いたい機能などから必要なタグと属性について、下記を見ると良い。

　・HTML Living Standardリファレンス

　HTMLの基本の参考：

　・HTML の基本 - ウェブ開発を学ぶ | MDN

 

関連記事

過去の記事：

HTML,CSS,Javascript4(属性による機能追加について)

HTML系

HTMLのタグについて

この記事では、HTMLの属性について記載する。

 

1. 目的

　・HTMLの属性について理解する。

 

目次

 

2. 属性とは

　・HTML タグの内容や動作を調整するために追加する値のこと

　・タグにつけることにより、色々な機能を追加することが出来る。

 

3.属性の使い方

　・下記のように開始タグの要素名の後ろに半角スペースを開けて、「属性名=”属性値”」と記載。

 <開始タグ 属性名=”属性値”> </終了タグ>

　例：

 <p align="center">pタグに属性付与</p>

 

3.プログラムの作成(属性付与で文字列を真ん中にする。)

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hellow world</title>
</head>

<body>
    <p>通常pタグ1</p>
    <p align="center">pタグに属性付与</p>
</body>

</html>

 

実行結果

　・<p align="center">pタグに属性付与</p>の alignが属性名 centerが属性値

　　これはｐタグに、中央に配置という属性を付与した。

　・このように、タグに属性を付与することによって、色々な機能を付けることが出来る。

 

　使いたい機能などから必要なタグと属性について、下記を見ると良い。

　・HTML Living Standardリファレンス

　HTMLの基本の参考：

　・HTML の基本 - ウェブ開発を学ぶ | MDN

 

関連記事

過去の記事：

C言語基礎知識40(配列の要素数算出)

C言語

配列の要素数算出方法

この記事では、配列の要素数を算出する方法について記載する。

 

配列に関しては下記記事を参照

→・C言語基礎知識3(配列) - Project_OKI’s diary

 

1. 目的

　・配列の要素数を算出する方法について理解する。

　・配列の要素数を算出する簡易関数を作成する。

 

目次

 

2. 要素数の算出方法

　・1次配列の要素数の算出方法

　配列の要素数 = 配列の全体のデータサイズ/配列1個当たりのデータサイズ

　配列全体のデータサイズ = sizeof(配列);

　配列1個当たりのデータサイズ = sizeof(配列0番目

 

例：

       int a[] = {7,8,9};     //配列を宣言

       //sizeof：データ型の大きさを求める単項の演算子
       int b = sizeof(a);     //配列a(全ての合計)のデータの大きさを求める。
       int c = sizeof(a[0]);  //配列1個当たり(a[0])のデータの大きさを求める。
       int d = b/c;           //配列の要素数を求める。

 

3. プログラムの作成(1次元配列の要素算出)

#include <stdio.h>
int main(void){
    //要素数を求める。
    //配列の宣言
     int array[] = {1,2,3};             //配列を宣言
     
     //sizeof：データ型の大きさを求める単項の演算子
     int arraysize = sizeof(array);     //配列array(全ての合計)のデータの大きさを求める。
     int array0size = sizeof(array[0]); //配列1個当たり(array[0])のデータの大きさを求める。
     int elm = arraysize/array0size;    //配列の要素数を求める。
     
     //値の出力
     printf("配列arrya(全ての合計)のデータの大きさ：%d\n",arraysize);
     printf("配列1個当たり(array[0])のデータの大きさ：%d\n",array0size);
     printf("配列arrayの要素数：%d個\n",elm);
}

実行結果：https://paiza.io/projects/iswXlhdIebCbnSQZn_RaCg?language=c

 

　今回は、int型の配列を作成している為、この配列1個のデータの大きさは、

　int型つまり、4byteとなる。　(byte数は、環境によって変動する。)

　それが、3つあるので、配列のサイズとしては、12となった。

　そのため、12/4となり、要素数は3と求められる。

 

4.プログラム作成(#defineで要素数を算出する)

　配列の要素数を算出しようとした場合、関数では算出が出来ない。

　→理由については下記ブログ参照

　そのため、#define で要素数を算出する簡易関数を作成する。

#include <stdio.h>

// 要素数を算出する簡易関数の作成
#define Elm(d) sizeof(d)/sizeof(d[0])

int main(void){
    //要素数を求める。
    //配列の宣言
    int array[] = {1,2,3,4};             //配列を宣言
    //関数を使用して、要素数を算出     
    int elm = Elm(array);
    //値の出力
    printf("配列arrayの要素数：%d個\n",elm);
}

実行結果：https://paiza.io/projects/kl9N6iWshyRUWhTyt8VBAg?language=c

　このように、#defineを使用すれば、配列の要素数を算出する関数を作成できる。

　#defineについては下記記事を参照

　→C言語基礎知識11(#define) - Project_OKI’s diary

 

5. プログラム作成(2重配列のサイズ確認)

#include <stdio.h>

// 要素数を算出する簡易関数の作成
#define Elm(d) sizeof(d)/sizeof(d[0])

int main(void){
    //要素数を求める。
    //配列の宣言
    int array[][10] = 
    {{1,2,3},
     {1,2}};
    
    int arraysize = sizeof(array);          //int 10×2個分(4×10×2バイト)
    int array0size = sizeof(array[0]);      //int 10個分(4×10バイト)
    int array00size = sizeof(array[0][0]);  //int 1個分(4バイト)  
    
    //関数を使用して、要素数を算出     
    int elm = Elm(array);
    //値の出力
    printf("配列arrayのサイズ：%d個\n",arraysize);
    printf("配列array[0]のサイズ：%d個\n",array0size);
    printf("配列array[0][0]のサイズ：%d個\n",array00size);
    printf("配列arrayの要素数：%d個\n",elm);
}

実行結果：https://paiza.io/projects/NngifPPqQtHk3elmUVdmOg?language=c

配列arrayのサイズ：80個
配列array[0]のサイズ：40個
配列array[0][0]のサイズ：4個
配列arrayの要素数：2個

　・以上の事から、多次元配列だと、arrayの要素数は取得できるが、

　{1,2,3}や、 {1,2}など、内部の配列の要素数を算出する事はできない。

 

もしも、内部の配列の要素数を算出したい場合、多次元配列ではできない為、

配列ポインタを使用して行う。

 

6. プログラム作成(配列ポインタを使用した要素数の取得)

・array1,array2の配列を用意する。

・その2つの配列をarraysumのポインタ配列に格納し、それぞれの配列の要素数を取得する。

#include <stdio.h>

// 要素数を算出する簡易関数の作成
#define Elm(d) sizeof(d)/sizeof(d[0])

int main(void){
    //要素数を求める。
    //配列の宣言
    int array1[] = {1,2,3};
    int array2[] = {1,2,3,4};
    
    int *arraysum[]={
        array1,
        array2
    };
    
    int arraysize = sizeof(arraysum);          //int 10×2個分(4×10×2バイト)
    int array0size = sizeof(arraysum[0]);      //int 10個分(4×10バイト)
    //サイズの出力
    printf("配列arrayのサイズ：%d個\n",arraysize);
    printf("配列array[0]のサイズ：%d個\n",array0size);
    
    //要素数の取得
    int Array1Elm = Elm(array1);
    int Array2Elm = Elm(array2);
    int ArraySumElm = Elm(arraysum);
    //要素数の出力
    printf("配列array1の要素数：%d個\n",Array1Elm);
    printf("配列array2の要素数：%d個\n",Array2Elm);
    printf("配列arraysumの要素数：%d個\n",ArraySumElm);
}

実行結果：https://paiza.io/projects/VcgHeE8wVlgzVuG31oVkOw?language=c

配列arrayのサイズ：16個
配列array[0]のサイズ：8個
配列array1の要素数：3個
配列array2の要素数：4個
配列arraysumの要素数：2個

 

　・以上の結果より、配列ポインタを使用することによって、5.二重配列では、取得できなかった、中の要素array1とarray2をそれぞれ取得できる。

　　ただ、arraysumからarray1とarray2の要素を取得できる訳ではない。

 

7. プログラム作成(配列ポインタの値を出力)

#include <stdio.h>

// 要素数を算出する簡易関数の作成
#define Elm(d) sizeof(d)/sizeof(d[0])
#define ARRAYSUMELMMAX 10

int main(void){
    //配列の宣言
    int array1[] = {1,2,3};
    int array2[] = {2,3,4,5};
    
    int *arraysum[]={
        array1,
        array2
    };
    //それぞれの配列の要素数を格納する配列。
    int setElm[ARRAYSUMELMMAX] = {
        Elm(array1),
        Elm(array2)
    };
    //arraysumの要素数の取得
    int ArraySumElm = Elm(arraysum);

    //格納されている配列の値を出力
    for(int i=0;i<ArraySumElm;i++){     ///arraysumの配列の要素数分ループ
        for(int j=0;j<setElm[i];j++){
            printf("arraysum[%d][%d]=%d\n",i,j,arraysum[i][j]);
        }
    }
}

実行結果：https://paiza.io/projects/uibn38RNX2dGx86Eim8-AA?language=c

arraysum[0][0]=1
arraysum[0][1]=2
arraysum[0][2]=3
arraysum[1][0]=2
arraysum[1][1]=3
arraysum[1][2]=4
arraysum[1][3]=5

　・以上のように、それぞれの要素を取得し、配列の中の値を出力した。

 

・参考記事：aDLcme - Online C Compiler & Debugging Tool - Ideone.com

 

 

組み込みC言語：

 

C言語基礎知識39(構造体、typedefを使う際の注意点)

C言語

構造体、typedefを使う際の注意点

この記事では、構造体、typedefを使う際の注意点ついて記載する。

typedefで置き換えたものを引数として使用する場合の注意点がある。

その注意点について記載する。

 

1. 目的

　・typedefで置き換えたものや構造体を引数として使用する場合の注意点

 

目次

 

2. 注意点

　・ヘッダファイルで、typedefで置き換えたものや構造体等を引数で使用する場合、

　　そのヘッダファイルは、関数を使う全てのファイルでインクルードする必要が出る。

 

　・又はヘッダ側でファイルをインクルードする。

　　(基本的に、ヘッダファイルのインクルードはソースファイルで行う。

　　これは、ヘッダファイルにヘッダファイルをインクルードすると

　　そこで、結びつきができてしまい、バグの発生要因となるためである。

　　しかし今回の場合、その結びつきが絶対に必要な為、

　　例外的にヘッダファイルにヘッダファイルをインクルードすることもある。)

 

3. プログラムで確認

　(1) signed intをtypedefで置き換えた場合
//main.cファイル
/* 
 typedefを使う際の注意点
 sub.hのインクルードをコメントアウトすると、
 Func2はエラーになる。
 sub.hで引数にtypedefで作成したSINTが使用されており、
 sub.hを使用する場合、先にtypedefをインクルードする必要がある。
 Func1の方は、sub.hで使用していないため、sub.hだけで動作する。
*/

#include <stdio.h>
//#include "sub.h" //ここでインクルードするとFunc2がエラーする。
#include "typedef.h"       
#include "sub.h"

int main(void){
    Func1();
    Func2(100);
}

//typedef.hファイル
typedef signed int SINT;
//sub.cファイル
#include<stdio.h>
#include "typedef.h"
#include "sub.h"

void Func1(){
    SINT num;
    num = 10;
    printf("func1=%d\n",num);
}

void Func2(SINT num){
    printf("func2=%d\n",num);
}
//sub.hファイル
extern void Func1();
extern void Func2(SINT num);

 

実行結果：https://paiza.io/projects/L9PX7QfdNTXHcCI-siD-YQ?language=c

 

 

　(2) 構造体を引数に使用した場合
//main.c
/* 
    typedefを使う際の注意点
    typedef.hのインクルードをコメントアウトすると、
    Funcはエラーになる。
    sub.hで引数に構造体が使用されている為、
    sub.hをインクルードする場合は、事前にtypedef.hを
    インクルードしておく必要がある。
*/

#include <stdio.h>
#include "typedef.h"       
#include "sub.h"

int main(void){
    // Your code here!
    SETG setg;
    setg.setA = 200;
    setg.setB = 400;
    Func(setg);
}
//typedef.hファイル
typedef struct{
    int setA;
    int setB;
}SETG;

//sub.cファイル
#include<stdio.h>
#include "typedef.h"
#include "sub.h"

void Func(SETG setg){
    printf("func_setg.setA=%d\n",setg.setA);
    printf("func_setg.setB=%d\n",setg.setB);
}

//sub.hファイル
extern void Func(SETG setg);

実行結果：https://paiza.io/projects/fmM_vF3zb5SE_eOpbusw_w

　

　・上記のように、typedefや構造体を複数のファイルで使用する場合注意が必要。

　・小規模であれば殆ど問題ないが、大きい規模になり、多くのファイルがあると

　　後々修正などが大変になる可能性がある。

 

　構造体の関連記事：

　・C言語基礎知識7(構造体1) - Project_OKI’s diary

　・C言語基礎知識17(構造体とポインタとアロー演算子の使い方) - Project_OKI’s diary

　・C言語基礎知識26(構造体の配列) - Project_OKI’s diary

　・C言語基礎知識27(構造体を複数の別ファイルで使用する) - Project_OKI’s diary

　・C言語基礎知識28(構造体の中で構造体を宣言する) - Project_OKI’s diary

　※基本的な使い方は構造体と同じ為、他の使い方については構造体の記事を参照

 

 

組み込みC言語：

 

ランキング参加中
プログラミング初心者

 

 

HTML,CSS,Javascript3(タグについて)

HTML系

HTMLのタグについて

この記事では、HTMLのタグについて記載する。

 

1. 目的

　・HTMLのタグについて理解する。

 

目次

 

2. タグとは

　・タグは角括弧（< >）で囲まれ、開始タグと終了タグのペアで構成される。

　・開始タグは要素を開始し、終了タグは要素を終了する。

　　例：

　　　・開始タグ：<p>

　　　・終了タグ：</p>

　・タグの間にはコンテンツが配置される。

　・タグにはそれぞれ機能がある。

　・タグとコンテンツの組み合わせによってWebページの構造や意味が形成される。

 

　タグの例：

　　<p>Hellow world </p>とあった場合

　(a)  タグ：　<p> </p>

　(b) コンテンツ：Hellow world 

　(c) 要素：<p>Hellow world</p>

　(d) <p> </p>は、ページのタイトル(タブ部分)を指定する機能がある。

　(e) この場合は、<p>Hellow world</p>の為、

　　 Hellow worldの段落が出来る。

　　参考：

 

3.タグの種類

　基本的に使用されるタグの種類とその機能を下記に示す。

　タグには、主に2種類のタグに分かれる。

　　(1) ブロックレベル要素

　　　(a)HTML文書内で独立したブロックを作成するために使用されるタグ。
    　　(b)通常、段落、見出し、リストなどのコンテンツをグループ化するために使用される。
    　　(c) ブロックレベル要素は通常、新しい行で始まり、水平方向に全幅を占める。

　　(2) インライン要素

　　　(a) HTML文書内でテキストや他のインライン要素と同じ行に表示される要素。

　　　(b) 文書内の一部のスタイルや意味を変更するために使用される。

　　　(c) ブロックレベル要素の内部に配置されることもある。

 

　　(3) 良く使われるブロックレベル要素

タグ名 内容

<p>

 段落を表す要素
<h1> 見出しを表す要素
<ul> 順序なしリストを表す要素
<ol> 順序付きリストを表す要素
<div>
 ブロックをグループ化するための汎用要素

 

　(4) インライン要素

タグ名 内容
<span> インライン要素をグループ化するための汎用要素
 <a>  ハイパーリンクを表す要素(urlのリンク)
<strong> 重要なテキストを表す要素
<em> 強調されたテキストを表す要素
<img> 画像を表示するための要素

 

　そのほか、色々なタグについて、下記サイトに載っているので、

　参考になる。

　使いたい機能などから必要なタグを見つけられる。

　・HTML Living Standardリファレンス

 

関連記事

過去の記事：

エラーの対処2(expected ';' after top level declarator)

C言語

エラーの対処(;がない)

1. 目的

この記事では、エラーが発生した時に、どう対処したのか、またその理由について記載する。

　出たエラー文

　　・expected ';' after top level declarator

 

目次

 

2. エラー理由

　　・expected ';' after top level declarator

 

　これは、";" がトップレベルの宣言子の後ろに必要ということ。

 　expected ';' 　が  ;が期待される。　つまり、;がないという意味。

　after top level declarator

 　トップレベルの宣言子の後という意味。

 

　トップレベルとは何かというと、関数の外側のこと。

　つまり、関数の外側の宣言しているところに;が足りないといっている。

 

　expected 'xxx' after top level declarator

　xxxの部分が、{}だったり、;だったり色々ある。

 

エラー発生個所

typedef struct {
     unsigned long  a;
 } hoge1

 

3. 対処

　;をつける。

 

修正した内容

typedef struct {
     unsigned long  a;
 } hoge1;

 

3. プログラム全体

　今回の場合、プログラム全体を見た方が分かりやすいので、下記に示す。

#include <stdio.h>
typedef struct {
     unsigned long  a;
 } hoge1
 
 int a;
 
 int main(){
     printf("hoge1_サイズ：%lu\n",sizeof(hoge1));
 }

　ここのhoge1に;が付いてないので、エラーが発生する。

　hoge1や、int a;　がある所が、top level 。

　int a;　の ; がなくても同じようなエラーが発生する。

 

　参考：

　　・ unsigned long aの後ろに;がない場合は

　　　expected ';' at end of declaration list

　　　というエラーが発生する。

　　　これは、宣言リストの終わりに;がないということ。

関連記事

過去の記事：