TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS 先頭にマーカーを表示させよう！CSSのlist-styleの使い方【初心者向け】
オーダーメイドコース
icon
icon
CSS

先頭にマーカーを表示させよう！CSSのlist-styleの使い方【初心者向け】

初心者向けにCSSで書く【list-style】の使い方(リストのマーカー表示)を解説しています。マーカーを表示させることで見栄えもよくなるので、ぜひ利用してみてください。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

今回の記事では、CSSでマーカー（リストの先頭の記号や数字）を設定するlist-styleについて解説します。

HTMLのリストを利用する際に、先頭に●や■などの記号や数字を表示したい場合があるでしょう。

そんな時はlist-styleを使って表示するのが最適です。

list-styleが分からない方やCSSを始めたばかりの方は参考になるでしょう。

 

目次

 

【動画の解説はこちら！】

 

田島悠介

今回はlist-styleの使い方を練習してみよう。

大石ゆかり

田島メンター！！list-styleは何をするプロパティなんですか～？

田島悠介

リストの先頭に、記号やa,b,c～などのマーカーを追加するものだよ。アルファベットや数字は、自動で順番に表示してくれるようになっているんだ。

大石ゆかり

リスト項目のあるコンテンツの場合、必要になりそうですね。お願いします！

 

list-styleとは

list-styleとは、マーカーを設定するプロパティです。

マーカーは、リスト内の各項目の先頭に表示される●や■のような記号です。

●や■のような記号の他に、数字やアルファベットなども指定できます。

li_t_p_1

また、画像をリストマーカー（リスト項目の先頭記号）に使用することも可能です。

list-styleを指定しておくことで、自動で画像付きリストマーカーを先頭に表示できます。

 

[PR] Webデザインで副業する方法とは

list-styleの書き方

リストマーカーの指定には”list-style-type”と”list-style-image”の2つのプロパティがあります。

  • list-style-type：記号やアルファベットなどをマーカーに表示する場合に指定します
  • list-style-image：画像をマーカーに表示する場合に指定します

list-style-type

list-style-typeは以下で指定します。

list-style-type: 指定する記号の値;

list-style-typeには●や■などの記号を連続して表示するものと、1,2,3…a,b,c…あ,い,う…のように特定の順番のものを連番で表示するものがあります。

 

記号を使用する場合の例

以下のコードを入力すると、■の記号が先頭に表示されます。

list-style-type: square;

squareの部分にdiscと入力した場合は●、circleと入力した場合は○が表示されます。

 

連番を使用する場合の例

以下を入力した場合リストの最初から1,2,3…と順番に表示されます。

list-style-type: decimal;

decimalの部分にlower-alphaと入力した場合はアルファベット小文字、hiraganaと入力した場合はひらがなが順番で表示されます。

他にも漢数字やギリシア文字等での表記が可能です。

表記の指定方法の詳細は以下のURLを参照してください。

list-style-type：MDN

 

list-style-image

list-style-imageは以下で指定します。

list-style-image : url("画像へのパス");

あらかじめマーカー用の画像ファイルをサーバーにアップロードしておき、画像へのパスを入力することでマーカーに指定します。

  • 画像のパスは絶対パス・相対パスどちらでも可です
  • list-style-typeとlist-style-imageが同時に設定されていた場合、list-style-imageの方が優先されます

 

田島悠介

list-styleの基本的な書き方になるよ。

大石ゆかり

list-style-typeは値によって、記号になったり順番になったりするんですね。

田島悠介

そしてlist-style-imageは画像を使う場合に使用するんだ。次はそれぞれの種類のマーカーを適用した場合の例を実際に見てみよう。

 

実際にlist-styleを書いてみよう

以下のリストにlist-styleを使用します。

(cssとhtmlファイルが同じディレクトリ内にあり、cssのファイル名が”list.css”である場合の例です)

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="list.css" type="text/css">
</head>
<body>
    <ul class="list1">
        <li>項目1</li>
        <li>項目2</li>
        <li>項目3</li>
    </ul>
</body>
</html>

list-style-type

list-style-typeを利用して、リスト項目の先頭にリストマーカーを表示させます。

記号の場合の例

list-style-typeでcircle（白い丸）を設定します。

list.css
.list1 {
    list-style-type : circle;
}

白い丸が表示されます。

li_t_p_2

 

連番の場合の例

list-style-typeでlower-alpha（小文字アルファベットの連番）を設定します。

list.css
.list1 {
    list-style-type : lower-alpha;
}

小文字のアルファベットが順番で表示されます。

li_t_p_3

 

list-style-image

html・cssと同じディレクトリ内にマーカー用の画像”icon_1.png”がアップロードされている場合の例です。

list.css
.list1 {
    list-style-image : url("icon_1.png");
}

指定した画像が先頭に表示されます。

li_t_p_4

 

まとめ

以上、list-styleの使い方について解説しました。

リストを見やすくするためにリストマーカーは便利です。

簡単に設定できるので、CSSに慣れていないという人でも使えます。

list-style-typeとlist-type-imageである2つのプロパティを理解することで、デザイン性を考慮したリストを作成できるので覚えておきましょう。

執筆してくれたメンター

メンターSS

文系・未経験でIT企業に就職して、9年目。

環境構築から開発・設計・テストまで何でも屋さんをやっていました。

テックアカデミーではJavaコースを担当しています。

 

田島悠介

ちなみに何も指定していない場合は”disc”、黒丸が表示されるようになっているよ。

大石ゆかり

そういえば普通にリストを作成したときは、いつも黒丸が表示されていました。マーカーはこんな風に設定することができたんですね。

田島悠介

画像と記号が同時に指定されている状況では、画像が優先されるということも覚えておこう。

大石ゆかり

了解です。ありがとうございました！

 

[お知らせ]TechAcademyでは初心者でもオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。

記事を検索

関連するキーワード

関連する記事

CSSだけでマウスクリック時に画像が変わる方法を現役エンジニアが解説【初心者向け】

CSSだけでマウスクリック時に画像が変わる方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
CSS

要素の表示の仕方を覚える！CSSのdisplayとvisibilityの使い方【初心者向け】

CSSで書くdisplayとvisibilityの使い方について解説しています。 要素の表示を自在にコントロールするためには重要な知識になります。特に難し...
CSS

CSSの設計指針FLOCSSの導入方法を現役エンジニアが解説【初心者向け】

CSSの設計指針FLOCSSの導入方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそ...
CSS

CSSで偶数や奇数の要素にだけプロパティを適用させる方法【初心者向け】

CSSで偶数や奇数の要素にだけプロパティを適用させる方法について解説します。 そもそもCSSについてよく分からないという方は、CSSの書き方について解説し...
CSS

三角ジェネレータを応用してCSSで矢印を作る方法を現役エンジニアが解説【初心者向け】

三角ジェネレータを応用してCSSで矢印を作る方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
CSS

CSSで画像の下に文字を配置する方法を現役エンジニアが解説【初心者向け】

CSSで画像の下に文字を配置する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 &nb...
CSS

あわせてよく読まれている記事

Javaでカードゲームを作成する方法を現役エンジニアが解説【初心者向け】

Javaでカードゲームを作成する方法について解説します。 実際にプログラムを書いて説明しているので、ぜひ理解しておきましょう。   そもそもJavaについてよく分からないという方は、Javaとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプJava講座の内容をもとに作成しています。   田島悠介 今回は、Javaに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 カードゲームを作成する方法について詳しく説明していくね！ 大石ゆかり お願いします！   Javaでカードゲームを作成 Javaでババ抜きを実装します。コンソールに出力し、カードの描写は”[” + カードの数値 + “]”で簡易化して表示します。 プレイヤーと相手のそれぞれが保持しているカードの情報はString型のリストに格納します。最初に分配するカードや、相手によって選ばれるカードはMath.random()を用いてランダムに選びます。 例えば1,2,3,4,5という5つの要素が格納されたリストから、ランダムにひとつの要素を取得する場合は (int) (Math.random() * リストの要素数) で得られる値を要素番号に指定してリストから取得します。 相手のカードを選んだら、自分のリストに追加します。自分の保有するリストに同じ値が2つある場合はその2つの要素をリストから削除します。プレイヤーと相手で交互に繰り返し、どちらかのリストが0件になったら終わりです。   実際に書いてみよう import java.util.ArrayList; import java.util.List; import java.util.Scanner; public class Babanuki { //相手のカードのリスト static List<String> player1_cards = new ArrayList<String>(); //プレイヤーのカードのリスト static List<String> player2_cards = new ArrayList<String>(); //ゲーム継続降らす static boolean continue_game = true; public static void main(String[] args) throws Exception { initGame(); Scanner sc = new Scanner(System.in); System.out.println("-------------------------------------------------------------"); System.out.println("重複を削除します: y:yes"); String s = sc.next(); if (s.equals("y")) { displayCardsReverse(clearCards(player1_cards)); displayCards(clearCards(player2_cards));
Java

動的配列を覚える！UnityでListを使う方法【初心者向け】

ほとんどのプログラミング言語には配列という、同じデータ型の変数をまとめる機能が備わっています。 Unityで使用されているC#では、その配列のほかにListという配列に似た機能が備わっています。 UnityでListを使うことで、要素の数を不特定な状態で利用することが可能です。 実務でも、UnityでListを使うことで、要素数を限定しない実装が可能になりますので、ぜひ学習してみてください。 今回はそのListを使用する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次list-styleとはlist-styleの書き方実際にlist-styleを書いてみようまとめ執筆してくれたメンター そもそもUnityについてよく分からないという方は、Unityとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回はC#のList型について勉強しよう。 大石ゆかり 田島メンター！！List型とは何ですか～？ 田島悠介 役割としては配列と同じなんだけれど、これは動的に要素の数を増減できる便利なものなんだ。簡単な例で実際に確認してみよう。 大石ゆかり はい！   Listとは Listは配列ととてもよく似たものです。 違いは、配列の長さが動的か静的かだけです。 動的というのは、値が固定されていないということを意味します。 静的というのは、値が固定しているという意味です。   メリット 配列を宣言するときは、初めから配列の個数は決められています。 しかし、Listの場合は長さを決めずに宣言できます。 つまり、Listにはその時によって要素数を増減させるメリットがあります。   デメリット 注意点として、Listは配列に比べ処理負荷が必要です。 配列は、最初の段階で個数が決まっているため、初期段階で領域の確保が終了しています。 Listは要素の追加をするたびに、領域計算を行うため、処理負荷がかかってきます。 つまり、配列で良い処理にもすべてListを使い続け、様子の追加をする必要がない処理に追加することで、パフォーマンスが低下するデメリットがあります。 FPS値を見ながら、配列とListをうまく使い分けると良いでしょう。   Listの書き方 それではListの書き方を解説していきたいと思います。   配列の書き方 次のコードでは、静的な要素を10個指定して配列を作成しています。 int[] intArray = new int[10];    Listの書き方 ここでは基本的なListの書き方を解説します。 サンプルコード using System.Collections; using System.Collections.Generic; using UnityEngine; public class list : MonoBehaviour { void Start() { List<int> myList = new List<int>(); myList.Add(10); Debug.Log(string.Join(", ",myList));
Unity

PHPのエスケープ処理について現役エンジニアが解説【初心者向け】

PHPのエスケープ処理について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次list-styleとはlist-styleの書き方実際にlist-styleを書いてみようまとめ執筆してくれたメンター そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   大石ゆかり PHPでダブルクォーテーションを表示しようとしたらエラーがでます。どうしたらいいですか？ ソースコード： <?php echo "私は"りんご"が好きです"; ?> エラー画面： PHP Parse error: syntax error, unexpected identifier "りんご", expecting "," or ";" in /workspace/Main.php on line 2 田島悠介 PHPでのダブルクォーテーションは「文字列の始まりや終了」を表す特別な意味がある記号だから、そのままでは表示できないんだ。 ダブルクォーテーションのような、特別な記号の働きをなくすエスケープ処理が必要だね。 大石ゆかり エスケープ？何の処理ですか？ 田島悠介 エスケープ処理をすると機能を無効にしたり、違う機能をさせたりできるんだ。 「エスケープ」の英語には「脱出する」という意味があるから、本来の機能から「脱出」させるのがエスケープ処理と覚えるのもいいね。 大石ゆかり そういえば、スマホのゲームに「エスケープ」ってタイトルが付いたゲームがありましたけど脱出ゲームでしたね。 田島悠介 プログラミング言語でのエスケープ処理には特殊記号を表示することと、HTMLタグなどの命令を無効にする2つの役割があるんだよ。 大石ゆかり そうなんですね。その「エスケープ処理」について教えてください！ 田島悠介 じゃあ、特殊記号を表示させる方法から見ていこうか。   この記事は、エスケープ処理の概要や、PHPプログラムでエスケープ処理を行う方法について解説しています。PHPを使用した開発にまだ慣れていないという方でも、理解できる内容になっています。 エスケープ処理とは エスケープ処理とは、特殊記号（あるいはタグなどの命令）で行われる処理を回避して単なる文字として表示したり、逆に普通の文字に改行などの特別な機能を持たせます。 たとえば、「”」（ダブルクォーテーション）をPHPのコードから文字列として表示させたい場合、通常なら「”」は文字列の始まりか終わりを指す特殊記号なのでPHPでは表示ができません。 特殊記号を表示するには、バックスラッシュ(\)または円記号に続けて特殊記号を記述します。 バックスラッシュのようなエスケープ処理に使う文字をエスケープ文字といいます。 エスケープ処理には特殊記号を表示させるだけでなく、HTMLコードやJavaScriptの命令を無効化して安全に表示する使い方もあります。 このようなエスケープ処理はPHPに限らず、他のプログラム言語でも共通に存在する処理です。 ※バックスラッシュ(\)を入力しても円記号(¥)がそのまま表示される場合もありますが、PHPでは円記号はバックスラッシュと同じ役割です。 ※ダブルクォーテーションをWebページ上に表示するには、HTMLの特殊文字コード「&quot;」を使う方法もあります。   バックスラッシュの入力方法について Windowsで標準的なキーボード配列の場合、バックスラッシュ(\)は日本語キーボードだとバックスペースキーの左側のキー（キーボードの刻印は「¥」）を押すか、右下にある「\」キー（日本語かな表記だと「ろ」の刻印のキー）を押します。 ※Windowsでは使用しているアプリやフォント（書体）により、バックスラッシュが円記号で表示される場合があります。 ※バックスラッシュの入力はPHPの命令と同じように漢字入力オフ（漢字が入力できない状態）で入力してください。 ※URLで使われるスラッシュ(/)と、エスケープ文字のバックスラッシュ(\)は違う記号なので注意してください。   またMacの場合だと、「option」キーを押しながら右上の「¥」キーを押すだけで、半角のバックスラッシュが入力できます。 【参考】文字列の囲み方 PHPで文字列を囲むには、(“)ダブルクォーテーションで囲む方法と(‘)シングルクォーテーションで囲む方法があります。 (“)ダブルクォーテーションを文字列の中で使用する場合、(‘)シングルクォーテーションで囲んで「’私は”りんご”が好きです’」のように指定します。 違う記号で囲む方法は、コードの中で文字列を囲む記号が統一できないので、エスケープ処理をするのがおすすめです。   特殊記号を表示する PHPでダブルクォーテーションを含んだ文字列をバックスラッシュでエスケープして表示します。 サンプルコード ダブルクォーテーションを含んだ「私は”りんご”が好きです」という文章を表示します。 ソースコード <?php echo "私は\"りんご\"が好きです"; ?> 実行結果 解説 上記のプログラムでは、「”」の前にバックスラッシュ(\)を使用して「”」を単に文字として扱うようにしています。 このようにダブルクォーテーションのような特別な意味を持つ文字の前に「\」のエスケープ文字を使用して「文字列の開始と終了」という特別な効果を打ち消す処理がエスケープ処理です。   エスケープシーケンス 上記のように、特殊な記号を文字として出力するためにエスケープ文字を使用した文字の組み合わせをエスケープシーケンスといいます。 エスケープシーケンスを使用することで、文字列の途中で「改行」したり「タブ」を挿入したりといった特殊な処理を行うことも可能です。 エスケープシーケンスを有効にするにはダブルクォーテーションで文字列を囲みます。 以下は、主なエスケープシーケンスの一覧です。 \n 改行 \’ シングルクォーテーション(‘) \” ダブルクォーテーション(“) \¥ 円記号 \$ ドル記号 \t 水平タブ \\ バックスラッシュ ※PHPの他のエスケープシーケンスについて、詳しくは公式のドキュメント「エスケープシーケンス」をご覧ください。 ※エスケープシーケンスが含まれた文字列をシングルクォーテーションで囲むと、「\’」「\\」以外のエスケープシーケンスは機能せずエスケープ文字が表示されてしまいます。   エスケープシーケンスを使った例 それでは、実際にエスケープシーケンスを使用する例を見ていきましょう。 サンプルコード エスケープシーケンスを使った例として、以下の記号の表示をしてみましょう。 (‘)シングルクォーテーション 改行 タブ ドル記号 バックスラッシュ ソースコード //preタグで通常のテキストとして表示 echo "<pre>"; // ダブルクォーテーションの表示 echo 'PHPの文字列は「"」か「\'」で囲みます。'; // 改行 echo "\n"; echo "\nりんご\nみかん\nれもん\n"; echo "\n"; // タブ echo "1\t2\t3\n"; echo "りんご\tみかん\tれもん\n"; echo "\n"; // ドル記号 echo "りんごの価格：\$1\n"; echo "\n"; //バックスラッシュ echo "PHPで改行するには「\\n」と記述します"; //preタグの終わり echo "</pre>"; 実行結果 解説 2行目のpreタグは出力した改行などをHTML表示でも反映させるためのタグです。 5行目では文字列をシングルクォーテーションで囲っているのでダブルクォーテーション(“)はそのまま表示でき、シングルクォーテーションはエスケープシーケンスで表示します。 8から10行目でエスケープシーケンス「\n」により文字列の途中で改行しています。 13と14行目は文字をそろえる時に便利なタブ文字「\t」（一定間隔の空白を空ける文字）を入力しているので、数字とフルーツの名前がそろっています。 18行目は変数名などで使われるドル記号($)をエスケープして表示しています。 また22行目にあるように、バックスラッシュ（または円記号）自身を表示するときは「\\」と記述します。 ※シングルクォーテーションで文字列を囲ったときに機能するエスケープシーケンスは、「\’」と「\\」だけです。   [PR] Webデザインで副業する方法とはHTMLタグのエスケープ(htmlspecialchars) エスケープ処理の中にはHTMLタグを無効化する処理も含まれます。 たとえば、エスケープ処理をしていないフォームに「<script>alert(‘Hello!’)</scprit>」と入力すると、入力された文字を表示するときにアラート画面を表示するJavaScriptがそのまま実行されてしまう可能性があります。 エスケープ処理を行うとタグで使われるHTMLの命令であるHTMLエンティティに変換されるので「<」や「>」などの記号は単なる文字として表示する「&lt;」「&gt;」に変わります。 PHPでHTMLタグをエスケープ処理するにはhtmlspecialchars関数を使います。 ※HTMLエンティティとは、アンパサンド(&)で始まりセミコロン(;)で終わる記号を表示するHTMLの命令を表す文字です。たとえばコピーライトの記号「©」を表示させるHTMLエンティティは「&copy;」です。 ※エスケープ処理する関数は、他に特殊記号なども変換できるhtmlentities関数やタグを取り除くstrip_tags関数などもあります。   書式 エスケープ処理された文字 = htmlspecialchars( 対象文字列 ); htmlspecialchars関数の第1引数には、エスケープ処理したい文字列を指定します。 ※第2引数は省略できますが、ダブルクォーテーションなどを変換するかどうかなどの変換パターンを指定します。詳しくは公式ドキュメント「PHP: htmlspecialchars – Manual」のパラメータflagsの項目をご覧ください。 ※第3引数も省略できて、文字を変換するときの文字コードを指定します。   サンプルコード HTMLタグを含んだ文字列「<b>太字</b><br>」をhtmlspecialchars関数でエスケープ処理して、HTMLタグとして認識されない文字（HTMLエンティティ）に変換します。 ソースコード <?php //HTMLタグをそのまま表示（太字になる） $tag = "<b>太字</b><br>"; echo $tag; //HTMLタグをエスケープして表示（HTMLエンティティに変換される） $tag_escape = htmlspecialchars($tag); echo $tag_escape; ?> 実行結果 解説 変数 $tagを表示すると、HTMLタグが有効なので<b>タグが有効になり太字で表示され<br>タグで改行されます。 htmlspecialchars関数にエスケープ処理したい変数 $tagを渡します。 エスケープ処理されて「<」「>」の記号がHTMLエンティティに変換され、変数 $tagの文字列は「&lt;b&gt;太字&lt;/b&gt;&lt;br&gt;」になります。 エスケープ処理された変数 $tag_escapeを表示するとHTMLエンティティに変換されているので、太字にも改行にもならず単なる文字として表示されます。   まとめ バックスラッシュ(\)に続けて記述されたエスケープシーケンスを使用することで、特別な効果を持つ「’」や「$」を文字として出力したり、改行やタブのような特殊な処理を行えます。 HTMLタグを無効にするhtmlspecialchars関数でエスケープ処理することで安全な表示が行えます。 エスケープ処理は実務でもよく使いますし、PHP以外のプログラム言語でも使用する処理です。 エスケープ処理とは何か、その使用方法について確実にマスターして実際の開発に役立てましょう。   大石ゆかり 内容が分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   PHPを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい プログラミングを学習していて、このように思ったことはありませんか？ テックアカデミーのPHP/Laravelコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、PHP/Laravelを使ったWebアプリケーション開発を学べます。 まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
PHP

コレクションを扱う！JavaでListを使う方法【初心者向け】

初心者向けにJavaで書くListについて解説。Listの書き方から実際に書いてみたサンプルを紹介しながら説明しています。 Javaエンジニアを目指している人は今のうちに覚えておきましょう。 Javaについてそもそもよく分からないという方は、Javaとは何なのか解説している記事をまずご覧ください。   なお本記事は、TechAcademyのJava講座の内容をもとに作成しています。   田島悠介 今回はJavaのListを使ってみよう。 大石ゆかり 田島メンター！Listは何に使うんですか～？ 田島悠介 これはデータ構造のひとつで、複数の要素を扱うものなんだ。まずはどういった性質のものなのか見ていくよ。 大石ゆかり お願いします！ Listとは Listとは、順序付けられたコレクションで、「シーケンス」とも呼ばれます。 コレクションは要素となる同じ型のデータの集合体です。コレクションにはList以外にも他にもMapやSetと言ったものもあります。 Listのイメージは配列に近いです。配列も同じ型の要素の集まりで、前から順番に連なっている形になっています。 順序付けられた、と言うのはそういう意味になります。   田島悠介 Listの基本的な概要だね。 大石ゆかり こうやって見ると、配列との違いがよく分かりませんね。 田島悠介 では次は、Listと配列の違いについても解説しよう。 配列との違い Listと配列は似ている、と感じるかもしれませんが、いくつか違いがあります。 最大の違いは、配列は一度要素の数を決めたら変更できないのに対し、Listは後から要素の数を変えることが可能です。 また、配列は宣言時に配列にしたいデータ型は必ず決まっていますが、Listは決めることもできますし、決めないようにもできます。 Listの方が配列より柔軟なのです。   [PR] Webデザインで副業する方法とはListの書き方 Listはインターフェース（メソッドの戻り値、メソッド名、引数だけ規定したもの）なので、実際に使う場合はListインターフェースを実装したクラスを使います。 一番代表的な実装クラスはArrayListで可変長の配列のような実装クラスです。その他は、LinkedListやStackなどの実装クラスがあります。 書き方ですが、 List list = new ArrayList(); という形で宣言します。 <String>の部分がジェネリクスといい、必要ならこのListに入るデータ型を指定します。ここにはIntegerや自分で定義したクラス名などを指定します。 （ジェネリクスの指定は必須ではありませんが、指定するようにしましょう。） 注意点としては、基本データ型はここに指定することができませんので気をつけましょう。   Listに規定されているメソッドはたくさんありますが、代表的なものは、以下になります。最低限書き方を覚えておくと良いでしょう。 // 要素の追加 List#add // 特定の要素の削除 List#remove // すべての要素を削除 List#clear // 要素の参照 List#get // 現在の要素の数を返す List#size // リストに何も要素がない場合trueを、一つでもあった場合はfalseを返す List#isEmpty   実際に書いてみよう ここでは、Listを生成し、要素を追加、参照、削除といった一連の処理を例にコードを書いてみます。 List list = new ArrayList(); list.add("Hello"); list.add("Bonjour"); list.add("Guten Tag"); list.add("Hola"); list.add("こんにちは"); int size = list.size(); for(int i = 0; i < size; i++) { System.out.println(list.get(i)); } list.remove(3); //４番目の要素を削除 size = list.size(); for(int i = 0; i < size; i++) { System.out.println(list.get(i)); } list.clear(); //要素を全て削除 System.out.println(list.isEmpty());   配列とは違い、Listを使うと要素の追加や削除などは簡単に行うことができます。 入門向けJavaの学習サイトもまとめているので、合わせてご覧ください。   田島悠介 文字列をいくつか格納したListを作成し、そこから指定の項目を削除してみたよ。 大石ゆかり このようにあとから要素の数を変更できるのが、Listの特徴なんですね。 田島悠介 そして逆に、生成時の要素数がそのまま固定されるのが配列ということだね。状況に応じて使い分けてみよう。 大石ゆかり はい！ありがとうございます！ また、オンラインのプログラミングスクールTechAcademyでは、Java講座を開催しています。 JavaやServletの技術を使ってWebアプリケーションの開発を学ぶことができます。 現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、習得することが可能です。
Java

JavaでListをコピーする方法を現役エンジニアが解説【初心者向け】

JavaでListをコピーする方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次list-styleとはlist-styleの書き方実際にlist-styleを書いてみようまとめ執筆してくれたメンター そもそもJavaについてよく分からないという方は、Javaとは何なのか解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、Javaに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 Listをコピーする方法について詳しく説明していくね！ 大石ゆかり お願いします！   Listとは まずは、List型について簡単に説明しておきます。 Listは、複数の要素を順序付けて保持できるデータ型です。 同じように複数の値を保持できるデータ型として、通常の変数を使って次のように定義できる配列もあります。 int[] しかしListには、保有データに対して使えるメソッドが各種用意されています。   Listの定義は次のように行います。 List<データ型名> オブジェクト名 = new ArrayList<データ型名>();   Listは複数の値を保持できますが、データの型は揃っている必要があります。 データ型は初期化時に指定します。   例えば文字列データを保持するListの場合は、以下のように定義します。 List<String> sample = new ArrayList<String>();   Listをコピーする時の注意点 Listのコピーには、「ディープコピー」と「シャローコピー」の2種類があります。 コピーの種類を間違えるとデータの値が想定通りでないなどの問題が生じることがあります。   ディープコピー 元のListのデータがコピーされ、元のListと作成したListは2つの異なるListとして動作します。 普段パソコン上で行っているファイルのコピーと同じ要領です。   シャローコピー 元のListの参照先をコピーしたListを作成します。 2つのListの参照先は同じであるため、片方に変更を加えるともう片方にも反映されます。   [PR] Webデザインで副業する方法とはListをコピーする方法 ディープコピー Listに付属するclone()メソッドを利用します。 Listオブジェクト.clone() もしくは、コンストラクタに元のListを代入します。 new ArrayList<データ型名>(元のListオブジェクト)   シャローコピー 代入演算子イコールを使って代入します。 List<データ型名> 新しいListオブジェクト = 元のListオブジェクト   実際に書いてみよう では、実際にコードを書いてみて、ふるまいを確認してみましょう。 1つのListから、ディープコピーとシャローコピーを使って2つのListを作成します。 その後、元のListの値を変更し、その変更がディープコピーで作成したリストには反映されず、シャローコピーで作成したListには反映されることを確認します。   import java.util.ArrayList; import java.util.List; public class ListCopy { public static void main(String[] args) { //コピー元のリストを作成 List originalList = new ArrayList(); originalList.add("赤");
Java

Pythonで空のlistに値を代入する方法【初心者向け】

Pythonで空のlistに値を代入する方法についてテックアカデミーのメンター（現役エンジニア）が実際のコードを用いて初心者向けに解説します。 そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。     Pythonでlistを使うことは頻繁にあります。 listを利用することで、複数の値を一括して取り扱うことが可能です。 listの基本は、listに値を代入することです。 この記事では、実務でも日々利用するlistに値を代入する方法を学び、Pythonでlistの取り扱い方の基本を学習できます。     田島悠介 今回は、Pythonに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 空のlistに値を代入する方法について詳しく説明していくね！ 大石ゆかり お願いします！   Pythonのlistの書き方 listとは、複数の要素をまとめて扱うことができる変数の型です。 Pythonでのlistの書き方は以下の通りです。 listsというのは変数の名前です。 listの要素の型は、文字型や数値型と混ざっていても構いません。   サンプルコード lists = [1, 2, 3, 4] lists = list(range(1, 5)) lists = list("happy") #1文字ずつ分解されて5つの要素のlistになる   解説 1行目のlists = [1, 2, 3, 4]では、変数listに1, 2, 3, 4という値を代入しています。 もし、listsを表示した場合は次の内容になります。 [1, 2, 3, 4]   2行目のlists = list(range(1, 5))では、range関数を利用して変数listに1, 2, 3, 4という値を代入しています。 つまり中身は1行目と同じです。 もし、listsを表示した場合は次の内容になります。 [1, 2, 3, 4] range関数についてはこちらの記事を参考にしていただくと良いですよ。 いくつか書き方を紹介！Pythonでrange関数を使う方法 | TechAcademyマガジン   3行目のlists = list(“happy”) では、1文字ずつ分解されて、5つの要素のlistにして代入しています。 もし、listsを表示した場合は次の内容になります。 ['h', 'a', 'p', 'p', 'y']   では、listを使うとどんなメリットがあるのでしょうか。 例を見てみましょう。 listを使わない場合 はじめにlistを使わない場合です。 要素の数が増えると、どんどんプログラムが長くなりますね。   item1 = "a" item2 = "b" item3 = "c" item3 = "d" item3 = "e" print(item1) print(item2) print(item3) print(item4) print(item5) listを使う場合 listを使うと以下の通りです。   要素の数が増えても、listの部分を変更するだけで済みます。 サンプルコード items = ["a","b","c","d","e"] for
Python

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

Webエンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

オーダーメイドコース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS 先頭にマーカーを表示させよう！CSSのlist-styleの使い方【初心者向け】