コーディングするときに覚えておきたい記号

Webデザイン・DTPデザイン

公開日

2023/02/21
最終更新日

2023/04/07

東秀亮

コーディングする際に欠かすことができない記号があります。コーディングで使う記号の呼び名は自分一人でコーディングする際にはなかなか呼ぶことがないため、なかなか覚えられません。『:』はコロン？？なんて結構曖昧になってしまうことも多いので、一度この記事で整理してみます。

記号	呼び方
.	ドット
,	カンマ
/	スラッシュ
‘	コーテーション（シングルコーテーション、引用符）
“	ダブルコーテーション（二重引用符）
:	コロン
;	セミコロン
–	ハイフン
_	アンダースコア（アンダーバー）
( )	丸カッコ（パーレン）
{ }	波カッコ（ブレース）
[ ]	角カッコ（ブラケット）
*	アスタリスク

. // ドット
, // カンマ
/ // スラッシュ
' // コーテーション（シングルコーテーション、引用符）

ドット（ . ）とカンマ（ , ）

.　ドット

ドット（ . ）は、HTMLを使う上では必須の記号です。日本語でいうと『。』にあたります。

https://emplos.jpのように、ドメインで使用したり、photo.jpgのように拡張子で使用したりします。

使用シーン	使用例
URLを表す	https://emplos.jpなど
ファイルを表す	photo.jpg　index.html　logo.pngなど
相対パス	../index.html　./images/photo.jpg
CSSのクラス名を表す	.title　.buttonなど
PHPの値を連結する	echo ‘今日は’ . $name . ‘の誕生日です’;
jQueryのメソッドに使う	$(function(){ $(“#main”).css(“color”,”red”) });
JavaScriptのオブジェクトとプロパティを繋ぐ	obj.title = ‘タイトル’;

後述で出てくるカンマ（ , ）と間違えて入力することが多く、記号自体が小さいため間違いに気が付きにくいので注意が必要です。

,　カンマ

カンマ（ , ）は、CSSやJavaScript、WordPress（PHP）を記述するようになってから活躍する記号です。日本語でいうと『、』にあたります。

キー配列がドット（ . ）の隣のために間違えて入力してしまいがちです。HTMLのコード内でカンマ（ , ）が出てきたら、ドット（ . ）と間違えて入力した可能性が高いと思っても問題ありません。ただし、HTMLのコード内にCSSやJavaScriptなど他の言語が記述されている場合は、カンマ（ , ）を使うこともありますが、例外と考えていてもいいでしょう。

ドット（ . ）とカンマ（ , ）はセットで覚えておきましょう。

使用シーン	使用例
CSSのセレクタを複数指定する	div,p,img {color: red;}
PHPの値を連結する	echo ‘今日は’, $name, ‘の誕生日です’;
配列に使う	const sports = { soccer:’サッカー’, tennis:’テニス’, baseball:’野球’ }

/* CSSのセレクタを複数指定する */
div, p, img {
    color: red;
}

// PHPの値を連結する
<?php echo '今日は', $name , 'の誕生日です'; ?>

// 配列に使う
const sports = {
    soccer: 'サッカー',
    tennis: 'テニス',
    baseball: '野球'
}

/　スラッシュ

スラッシュ（ / ）は、主にURLや閉じタグで使用します。

使用シーン	使用例
絶対URLを表す	http://　https://　など（2回連続で//）
ディレクトリーの階層を表す	../images/photo.jpg　など
HTMLの閉じタグ	<h1>タイトル</h1>　<p>ダミー文章</p>など

<!-- 使用例：絶対URLを表す ディレクトリーの階層を表す HTMLの閉じタグ -->
<a href="https://emplos.jp"><img src="../images/logo.svg" alt=""></a>

コーテーション（ ‘ ）とダブルコーテーション（ ” ）

コーテーション（ ‘ ）とダブルコーテーション（ ” ）は同じようなシーンで使用されることが多い記号です。ただし、使い分けが必要なシーンもあるので、理解して使っていきましょう。

‘　コーテーション（シングルコーテーション）

コーテーション（ ‘ ）は、HTMLでの使用シーンは少ないですが、CSSやPHP、JavaScriptで使用することが多い記号です。

使用シーン	使用例
CSSのbackground-imageのURL指定	background: url(‘../images/bg.jpg‘) no-repeat;などダブルコーテーションでも可
PHPのパラメータを囲む	echo esc_url( ‘/about/‘ );
PHPの文字列を囲む	echo ‘こんにちは‘; ダブルコーテーションでも可（ただし、コーテーションの方が都合が良い場合もある）

“　ダブルコーテーション

ダブルコーテーション（ ” ）は、シングルコーテーションと近い使用の仕方をします。

使用シーン	使用例
CSSのbackground-imageのURL指定	background: url(“../images/bg.jpg“) no-repeat;などコーテーションでも可
PHPの文字列を囲む	echo “こんにちは“; コーテーションでも可（ダブルコーテーションの方が都合が良い場合もある）

コロン（ : ）とセミコロン（ ; ）

コロン（ : ）は途中を表し、セミコロン（ ; ）は終了をあらわすことが多いです。

:　コロン

使用シーン	使用例
通信プロトコルに使用	http://　https://　ftp://
CSSのプロパティの末尾に使用	color: #000000;
CSSの擬似クラスで使用	a:hover　li:nth-child(even)など
CSSの擬似要素で使用	div::before　h1::afterなど
処理が完了していない関数の末尾で使用	<?php if ( empty ): ?> <?php endif; ?>など

;　セミコロン

使用シーン	使用例
CSSの値の末尾に使用	color: #000000;
処理が完了した関数の末尾で使用	<?php if ( empty ): ?> <?php endif; ?>や <?php echo ‘こんにちは’; ?>など

ハイフン（ – ）とアンダースコア（ _ ）

ハイフン（ – ）とアンダースコア（ _ ）は似たようなシーンで使われることが多いですが、使い分けをしていないと思わぬエラーが出たり注意が必要です。

-　ハイフン

使用シーン	使用例
ファイル名に使う	page–title.jpg　front–page.php(WordPressのファイル名は_より–を使う)
CSSのクラス名やID名に使用する	.main–title　#global–nav

_　アンダースコア

使用シーン	使用例
ファイル名に使う	page_title.jpg
CSSのクラス名やID名に使用する	.main–nav__active　#global-nav_primary
PHPやWordPressの関数に使用する	is_front_page()　esc_html()（関数に-を使うとエラーになります）

丸カッコ( )と波カッコ{ }と角カッコ[ ]

カッコには様々な種類があるので、しっかり使い分けができるようにしておきましょう。

( )　丸カッコ（パーレン）

使用シーン	使用例
CSSのbackground-imageのURL指定	background: url(‘../images/bg.jpg’) no-repeat;
PHPやWordPressの関数に使用する	is_front_page()　esc_html( home_url( ‘/about/’ ) )
jQueryの関数に使用する	$(function(){ $(“#main”).css(“color”,”red”) });
JavaScriptの関数に使用する	function sample()
配列に使用する（PHP）	$args = array(‘apple’, ‘orange’, ‘banana’);

{ }　波カッコ（ブレース）

使用シーン	使用例
CSSの記述に使用する	h1 { color: red; }
PHPやWordPressの記述に使用する	<?php if ( empty ) { echo ‘空っぽ’; } ?>

[ ]　角カッコ（ブラケット）

使用シーン	使用例
配列に使用する（JavaScriptやPHP）	const fruits = [‘りんご’ , ‘みかん’ , ‘ぶどう’]; $sports = [‘サッカー’ , ‘テニス’ , ‘野球’];

アスタリスク（ * ）

アスタリスク（ * ）は、いろいろ使い所がありますが、まずは覚えてほしい使用シーンのみご紹介します。

使用シーン	使用例
CSSですべての要素（タグ）を表す	*{ color: red; }

まとめ

それぞれの記号の意味がわかると、コードを覚えることが早くなったり、ミスに気が付きやすくなります。

一気に覚えていくのは大変だと思いますので、使いながら記号の意味を理解していくようにしていきましょう。

LINEをつかって友達や家族にこの記事を教える

シェアボタン

ドット（ . ）とカンマ（ , ）

. ドット

, カンマ

/ スラッシュ

コーテーション（ ‘ ）とダブルコーテーション（ ” ）

‘ コーテーション（シングルコーテーション）

“ ダブルコーテーション

コロン（ : ）とセミコロン（ ; ）

: コロン

; セミコロン