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を始めたばかりの方は参考になるでしょう。

 

目次

1時間でできる無料体験！

 

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

 

田島悠介

今回は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

 

コラム

コスパとタイパ、両方結果的に良くなる良くなる学び方とは？

「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ 結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。

コスパ・タイパ最適化の参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。

  • ・困ったときに、質問や相談できる相手がいるため挫折しなかった
  • ・プロとして必要なスキルのみを深く学べたので無駄がなかった
  • ・副業案件の提供と納品までのサポートがあったので目的を達成できた

安価・短期間で広く浅く学んでも意味がありません。 本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に 無料相談 に参加してみませんか？

カウンセラー・現役のプロへ、何でも気軽に無料相談可能。 30分か60分お好きな時間が選べて、かつ3回まで すべて無料で ご利用できます。
無理な勧誘は一切ない ので、お気軽にご参加ください。

今なら相談した方限定の割引・参加特典付き！ 無料相談はこちら

まとめ

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

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

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

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

執筆してくれたメンター

メンターSS

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

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

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

 

田島悠介

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

大石ゆかり

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

田島悠介

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

大石ゆかり

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

 

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

初心者・未経験でもできる。まずはテックアカデミーに相談しよう

プログラミングを独学で学習していて、このように感じた経験はないでしょうか？

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう カウンセラーやエンジニア・デザイナー があなたの相談に真摯に向き合います。

「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）

今なら参加者限定の割引特典付き！ 無料相談を予約する

記事を検索

関連するキーワード

関連する記事

CSSのlinear-gradientの使い方を現役デザイナーが解説【初心者向け】

CSSのlinear-gradientの使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
CSS

CSSのfixedで要素をディスプレイの中央に配置する方法【初心者向け】

CSSのfixedで要素をディスプレイの中央に配置する方法について解説します。HTML要素は左上が基準になっているために、画面半分に配置した後に、要素の大きさの...
CSS

CSSのスクロールバーを表示、非表示にする方法を現役デザイナーが解説【初心者向け】

CSSのスクロールバーを表示、非表示にする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
CSS

CSSでテキストを縦書き中央揃えする方法を現役エンジニアが解説【初心者向け】

CSSでテキストを縦書き中央揃えする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 CS...
CSS

CSSのspecificityでスタイルの詳細度を計算する方法を現役エンジニアが解説【初心者向け】

CSSのspecificityでスタイルの詳細度を計算する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解...
CSS

CSSでfirst-letterを使って最初の一文字を指定する方法【初心者向け】

CSSの「first-letter」について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 「first-...
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

【未経験でも】メーカー勤務から異業種に転職する上でおすすめの仕事

今回は家電メーカーから異業種に転職する方法を解説します。 メーカー勤務からの転職においてのメリットや注意点、前職の経験が活かせる職業の例をいくつか挙げて解説します。また最後に、おすすめの転職サービスをいくつか紹介しています。転職活動の際に役立ててください。   本記事はエンジニア転職を保証するTechAcademy Proの就職実績を元に制作しています。   田島悠介 今回は、キャリアに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 メーカー勤務から異業種に転職する方法について詳しく説明していくね！ 大石ゆかり お願いします！   家電メーカーを辞める人の理由 思い通りの部署に配属されない 家電メーカーに就職する方は、基本的に相当優秀な方です。 売り手市場の現在出会っても、家電メーカーは人気の就職先です。 そもそも、人気の就職先になる理由として、学生の目に止まりやすい知名度の高さがあります。 家電メーカーは、テレビCM、雑誌・新聞、インターネット広告、看板、量販店と、いたるところで広告を掲載しています。 従って、就職したいという学生や、転職したい求職者が多いです。 人気があるということは、能力が高くても、希望の部署に配属されるとは限らないという事を意味しています。 理系の学生であれば、家電メーカーの開発部門を希望したが、販売部門で営業をすることになったとう不満が多いでしょう。 しかし、企業側からすると、会社の様々な業務を経験させることで、適正を判断し、より良い人材に育ってほしいという社員教育の意味も含んだ采配となっています。 そうはいっても、学生からすると、希望の部署に配属されないため、入社一年目で辞めることもあるようです。 なお、中途採用者に関しては、採用初年から希望部署に配属されます。 これは、その部署で働くために採用されているためです。   経営統合によるリストラ 家電メーカーは国際競争にさらされ、経営統合することも多くなっています。 シャープ シャープは2016年に台湾の鴻海という企業に買収されました。 東芝 東芝の白物家電を担当する東芝ライフスタイルは2016年に中国の美的集団に買収されました。 白物家電というのは、個人宅で利用する、洗濯機、冷蔵庫等の家電代表とする、家電製品を意味します。 三洋電機 三洋電機とはパナソニックの創業者である松下幸之助氏の義理の弟が設立した家電メーカーです。 そして、日本を代表する家電メーカーでもありました。 2011年に中国のハイアールに買収されました。   どの家電メーカーも、国際的に知名度の高いメーカーでした。 買収後は当然のように数千人単位でリストラが行われます。 リストラ自体発表されず、なぜか数千人単位で社員が辞めていることもあるでしょう。   もっと給料がほしいという希望 「電機業界の年収」ランキング（＝グローバルウェイ調べ）　itmadia 経営統合によるリストラで、リストラさせたくない社員が、自ら会社をやめることもあります。 家電メーカーの給与は決して悪いわけではありません。 しかし、家電メーカーで数十年培った研究開発や技術は、世界的に見ても非常に価値がある技術です。 もちろん、国際的にも知名度が高く、研究開発に潤沢な資金と時間を注ぐことができたからこそ、社員の技術力が高くなったという経緯があります。 会社からしてみると、すぐに売上にならない技術への先行投資へ、多額の資金と時間を投資しているため、社員の給料を安易に増やすことは難しいでしょう。 これに対して、社員からすると、自ら持つ技術を高く評価してくれる海外企業へ転職できれば、給料は3倍になることが現実的です。 ただし、3倍の年収で海外大手に転職した技術者、3年後に解雇された理由 という記事にも有るように、実際3倍の年収で転職すること自体は可能です。 ただ、記事内でも言われているように、働き方によっては3年で簡単に解雇されます。 とはいっても、3倍で3年働いたら9年分の年収を獲得できるという考え方もできるため、最初から3年だけ働いて、次の転職に活かすという考え方もできるかもしれません。   転職するメリット 給与 日本の全都道府県で1番給料が高いのは平均年収2478万円のあの会社！2019年最新版 先程家電メーカーの年収を示しましたが、日本の企業でも年収2478万円を提示している企業があります。 M&Aキャピタルパートナーズの75人という社員数から考えると、就職転職共に難しいかも知れません。 キーエンスの2089万円であれば、すこしは現実的な2253人という社員数のようです。 日本を代表する家電メーカーで、第一線で働いている方にとっては、高い給与を国内企業で受け取れることは、非常にメリットが大きいと言えます。 なぜなら、先ほど紹介した記事のように、海外企業の場合使い捨てのような扱いを受けることも有るためです。   希望の仕事ができる 家電メーカーから転職する場合は、転職先の企業で希望の仕事をすることができる可能性が高いです。 理由としては、転職先企業としては、希望の仕事で成果を上げてもらうために中途採用しているためです。 なお、希望の仕事を割り振られない可能性としては、単純に人が欲しくて採用されてしまったという可能性や、転職先企業の都合により該当の仕事がなくなってしまう場合も有る点に注意が必要です。   [PR] Webデザインで副業する学習方法を動画で公開中家電メーカーから転職でおすすめの職種 製造業 家電メーカーに新卒段階から入社された方は、工場での勤務経験や、生産管理業務を行った経験も豊富だと思います。 その様な経歴を活かす場合製造業に転職することが良いです。 製造業の場合は、大手メーカーに比べると給料が下がるかも知れません。 次の内容は、平成29年厚生労働省が発表した賃金構造基本統計調査における製造業の月給平均です。 20代　約23万円 30代　約29万円 40代　約36万円 50代　約41万円 大手メーカーに比べると決して高いわけではありません。 しかし、大手メーカーで製造の仕事をしたかったが、様々な理由で営業の職種に配置転換を行われ、現在に不満を抱えている方であれば、好きな仕事に従事できることは何よりの喜びかと思います。   営業 家電メーカーで営業職をやり続けたかったが、工場勤務などの非営業職に配置転換された場合は、営業職への転職がおすすめです。 完全歩合制の営業職であれば、給料も1000万円を超えることも現実的です。 また、営業中心の企業に転職すれば、工場勤務部門自体が存在しないため、営業だけに集中して仕事を続けることが可能です。   海外のメーカー職 国内での経験を生かして海外のメーカー職に転職する事も可能です。 海外メーカーであれば、給与が2倍、3倍に増える可能性も高いです。 むしろ、給与が3倍以上にならなければ、あえて海外メーカーで働くことは危険なのかも知れません。   管理職 国内の企業で、家電メーカーの管理方法を取り入れたい企業は多くあります。 とくに中小企業にとっては、管理職を育成する時間もノウハウもないため、家電メーカーの管理職ノウハウを喜ばれるでしょう。   プログラマー 家電メーカーで、Webサイトを担当したり、家電自体のプログラミングを担当したりしていた場合は、プログラマーへの転職がおすすめです。   役立つ転職サービス メイテックネクスト 製造業専門の転職サービスです。 家電メーカーの製造ノウハウをは、製造業全般で喜ばれるノウハウです。 メイテックネクスト   いい求人NET 営業特化型転職サービスです。 家電メーカーの営業職としての経験を他社で活かしましょう。 いい求人NET   海外転職スカウトサービス 海外で働きたい方向けの、海外転職用サービスです。 日本の家電メーカーの品質管理技術を海外メーカーで活かすことが可能です。 海外転職スカウトサービス   日経エグゼクティブ転職 管理職として家電メーカーでの経験を活かしたい向けの転職用サービスです。 日経エグゼクティブ転職   エンジニア転職保証コース TechAcademyが行っているエンジニア転職保証コースです。 プログラミング未経験・初心者でも12週間で東京のIT企業へエンジニアとして転職を目指せるコースです。 現役エンジニアとキャリアカウンセラーが学習から転職までサポートしています。 家電メーカーでのプログラミング経験を、最新のプログラマーとして生かしていきましょう。 エンジニア転職保証コース   コラム コスパとタイパ、両方結果的に良くなる良くなる学び方とは？ 「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。 もちろん、時間も費用もかかることは間違いありません。 ただ 結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。 コスパ・タイパ最適化の参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。
エンジニア転職

動的配列を覚える！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

Pythonで配列を結合する方法を現役エンジニアが解説【初心者向け】

Pythonで配列を結合する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 Pythonで配列を結合できると、配列を使ったプログラムをより柔軟に実装可能になります。 実務でも配列を結合することは多いので、ぜひ学習してみてくださいね。 目次list-styleとはlist-styleの書き方実際にlist-styleを書いてみようまとめ執筆してくれたメンター そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、Pythonに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 Pythonで配列を結合する方法について詳しく説明していくね！ 大石ゆかり お願いします！   演算子を利用した配列の結合方法 複数の配列（リスト）を結合する場合には 以下の方法があります。 + :2つのリストを結合する +演算子を利用することで2つのリストaとbを結合できます。 a+b   * : 指定したリストを複数回結合する *演算子を利用することで2つのリストaとbを複数回結合できます。 a*b   append関数の結合方法 append関数はリストの最後に、指定した要素を追加する関数です。 リストや辞書を追加した場合には、そのままの型でリストが作成されます。 使い方は以下の通りです。 ここでは、listに対してelementを追加しています。 list.append(element)   [PR] Webデザインで副業する学習方法を動画で公開中extend関数の結合方法 extend関数はリストの最後に、指定したリストなどのイテラブルの各値を追加する関数です。   イテラブルとは イテラブルとは、含まれているもの1つ1つの値を返していけるものです。 for文を使えるものという言い方もできます。 イテラブルの型としては、list, string, tupleがあります。 listはリストです。 stringは文字列です。 tupleはリストや辞書型といった複数の要素を管理するデータ型の一種です。 リストを含むイテラブルのものを指定する必要があります。   使い方は以下の通りです。 ここでは、listに対してiterableを追加しています。 list.extend(iterable)   コラム コスパとタイパ、両方結果的に良くなる良くなる学び方とは？ 「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。 もちろん、時間も費用もかかることは間違いありません。 ただ 結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。 コスパ・タイパ最適化の参考として、 テックアカデミー卒業生がスクールを選んだ理由
Python

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オブジェクト   コラム コスパとタイパ、両方結果的に良くなる良くなる学び方とは？ 「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。 もちろん、時間も費用もかかることは間違いありません。 ただ 結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。 コスパ・タイパ最適化の参考として、
Java

コレクションを扱う！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

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

副業したい方

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

はじめての副業コース

転職したい方

未経験から16週間で
エンジニアに

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

スキルアップしたい方

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

Pythonコース

※ 経済産業省の第四次産業革命スキル習得認定講座で、厚生労働省指定の専門実践教育訓練給付制度の対象です。条件を満たすことで支払った受講料の最大70％（最大306,460円）が給付金として支給されます。詳しくは エンジニア転職保証コース のページ内の注意事項をご確認ください。

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

1時間でできる無料体験
挫折しない学習方法とは？
TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS 先頭にマーカーを表示させよう！CSSのlist-styleの使い方【初心者向け】