TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS CSSのword-breakプロパティを使った文章の改行の仕方を現役エンジニアが解説【初心者向け】
icon
icon
CSS

CSSのword-breakプロパティを使った文章の改行の仕方を現役エンジニアが解説【初心者向け】

初心者向けにCSSのword-breakプロパティを使った文章の改行の仕方について解説しています。word-breakプロパティを使うと、テキストの改行に関する規則を指定することができます。使い方と利用例を見ていきましょう。

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

CSSのword-breakプロパティを使った文章の改行の仕方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。

 

田島悠介

今回は、CSSに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

word-breakプロパティを使った文章の改行の仕方について詳しく説明していくね！

大石ゆかり

お願いします！

 

目次

 

word-breakプロパティとは

word-breakプロパティとは、要素からテキストがはみ出る場合の改行方法を制御するものです。word-breakプロパティの指定方法は以下のとおりです。

word-break: キーワード

キーワードには以下の種類があります。

  • normal：既定値です。既定の改行規則を適用します
  • break-all：要素の幅に合わせて単語の途中であっても改行します
  • keep-all：CJK（中国語、台湾語、日本語、韓国語）の改行を許可しません

 

[PR] Webデザインで副業する学習方法を動画で公開中

活用場面

日本語の場合、単語の途中で改行してもそれほど違和感はありません。

こんにちは！今日はとても良い天
気で青空ですね！

しかし英語などの場合、単語の途中で区切ってしまうと意味が通じなくなってしまいます。

Hello! It's very nice wea
ther and blue skies today!

このように文章を適切に表示させるためにword-breakプロパティは利用されています。

 

ブラウザによる対応の違い

word-breakプロパティは全てのブラウザで対応しています。詳しくは以下の記事も参考にしてください。

MDN – word-break

 

word-breakを使って文章を記述してみよう

今回のサンプルプログラムではword-breakを使った文章の改行方法について確認します。なお、文章は青空文庫から夏目漱石の吾輩は猫であるを使用しています。英語翻訳はDeepL翻訳を使用しています。

青空文庫 – 吾輩は猫である

DeepL

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Sample</title>
  <style>
    div {
      width: 500px;
    }
    .jp {
      word-break: break-all;
    }
    .en {
      word-break: normal;
    }
  </style>
</head>
<body>
  <div class="jp">
  吾輩わがはいは猫である。名前はまだ無い。<br>
  どこで生れたかとんと見当けんとうがつかぬ。<br>
  何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。<br>
  吾輩はここで始めて人間というものを見た。<br>
  しかもあとで聞くとそれは書生という人間中で一番獰悪どうあくな種族であったそうだ。
  </div>
  <br>
  <div class="en">
  I am a cat. No name yet.<br>
  I have no idea where I was born.<br>
  All I remember is meowing and crying in the dimly lit, dull place.<br>
  This is the first time I have seen what human beings are.<br>
  What's more, I was told later that it was a shosei, the most vicious and vicious race of humans.
  </div>
</body>
</html>

実行結果は以下のとおりです。word-breakの設定を変えて試してみましょう。

 

まとめ

今回の記事ではCSSのword-breakプロパティを使った文章の改行の仕方について学習しました。

 

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

監修してくれたメンター

太田和樹（おおたかずき）

ITベンチャー企業のPM兼エンジニア

普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。

開発実績：画像認識技術を活用した駐車場混雑状況把握、音声認識を活用したヘルプデスク支援システム、ロボットアプリの開発、大規模基幹系システムの開発・導入マネジメント。著書「知識ゼロからの機械学習入門（技術評論社）」。

地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。

 

大石ゆかり

内容分かりやすくて良かったです！

田島悠介

ゆかりちゃんも分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

記事を検索

関連するキーワード

関連する記事

CSSで!importantを使った優先順位の変更【初心者向け】

今回はCSSで!importantを使った優先順位の変更を説明します。 CSSの記述が多くなると思い通りのスタイルが適用されなくなる場合があったりしますが...
CSS

CSSで画像に指定色の透過カラーを重ねる方法を現役エンジニアが解説【初心者向け】

CSSで画像に指定色の透過カラーを重ねる方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 CSS...
CSS

CSSでボタンやボックスの角を丸くする方法を現役デザイナーが解説【初心者向け】

今回は、角を丸くするborder-radiusプロパティについて解説します。 CSSについてそもそもよく分からないという方は、CSSの書き方について解説し...
CSS

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

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

CSSでマウスクリックで画像を切り替える手法を現役エンジニアが解説【初心者向け】

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

CSSのリンクの色を変えない方法を現役エンジニアが解説【初心者向け】

CSSのリンクの色を変えない方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも...
CSS

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

改行を自動で！CSSで文字列を折り返しする方法【初心者向け】現役Webデザイナーが解説

今回はCSSで文字列を折り返しする方法を紹介します。   目次 折り返す書き方 実際に書いてみよう   田島悠介 ここでは、文字列の改行方法について勉強していくよ。 大石ゆかり 田島メンター！！改行にも指定するものがあるんですか〜？ 田島悠介 例えば英単語の途中でボックスの右端に到達したとき、その単語の中で折り返すかどうかなどを決めることができるんだ。 代表的な例を見てみよう。 大石ゆかり はい！   折り返す書き方 CSSを使って、1つの要素の中で文章を折り返して表現する方法として以下の2つがあります。 overflow-wrap（文章が領域の端に来た時に、単語の途中で改行するかどうかの設定） word-break（長い単語が領域の端に来た時に、単語の途中で改行するかどうかの設定）   CSSの公式ドキュメントを見ると、このように記載されているはずです。 注意してほしいのは、ここで言う単語 というのは、英文における英単語のこと。   そして、実際に辞書に登録されている英単語かどうかは関係ありません。 英文でスペースなどの記号で区切られている一つのかたまりを、英単語と捉えて動作します。 単語の区切りとして解釈される記号は「スペース」「？」「-」「、」「。」などがあります。   そして日本語は、「単語」や「文章」で説明されている上記の動きとは、まったく異なります。 それぞれ詳しく見ていきましょう。     See the Pen wordbreak by TAKAYOSHI (@lspuwbkv) on CodePen. overflow-wrap 文章が領域の端に来た時に、単語の途中で改行するかどうかの設定です。 単語の途中で改行しない normal と、単語の途中で改行する break-word の2つから選べます。 break-spaces という値も設定できますが、normalを設定した場合と 同じ挙動になります。   実際の動きを見てみましょう。   英文が、表示領域の右端までいったときの挙動が変わります。 normalを選ぶと、次の単語の区切りで改行するため、少しはみ出してしまいます。 break-wordを選ぶと、単語の途中でもはみ出さないように改行します。 日本語は、どちらを選んだとしても、はみ出さないように改行されていますね。   break-wordは、表示領域を絶対にはみ出さないようにしながら、可能な限り「句読点を文頭にしない」など文章を読みやすくなる位置で折り返してくれます。 しかし、親要素の幅がautoの場合や、テーブルには使うことができませんので、注意してくださいね。   overflow-wrapは、以前マイクロソフトの拡張機能としてword-wrapというプロパティ名でした。 CSS標準機能になるにあたり、overflow-wrapというプロパティ名に変わっています。 ただし、古いIEでも動作させるために、word-wrapも合わせて指定したほうが無難です。     CSSサンプルコード p.nomal{ overflow-wrap normal; } p.break{ overflow-wrap: break-word; } word-break 長い単語が領域の端に来た時に、単語の途中で改行するかどうかの設定です。 normal、keep-all、break-all、break-word 4つから選択でき、それぞれ下記のような動きと説明されています。 normal：その言語の習慣的な規則に従って適宜改行する break-all：文字列のどこでも、単語の途中でも改行する keep-all：単語の途中では改行しない break-word：単語の区切りで改行するが、場合によっては単語の途中でも改行する   実際の動きを見てみましょう。   normalは、英語は単語単位ではみ出さないように改行しますが、長い単語ははみ出していますね。 日本語はどこでも改行します。 break-allは、英語日本語どちらも、はみ出さないように、どんな位置でも改行します。 keep-allは、単語の途中で改行しないよう、区切り記号でのみ改行します。 日本語も区切り記号でのみ改行になるので、はみ出してしまいます。 break-wordは、できるだけ単語の区切りで改行するようにしつつ、どうしてもはみ出す場合は単語の途中でも改行しています。   英文を見やすい位置で改行するためには、break-wordがシンプルで使いやすいですね。     CSSサンプルコード1 p.nomal{ word-wrap: break-word; } p.break{ word-wrap: break-word; } CSSサンプルコード2 p.nomal{ word-break: normal; } p.break{ word-break: break-all; } p.keep{ word-break: keep-all; }     田島悠介 word-wrapとword-breakの基本の書き方になるよ。 大石ゆかり ちなみに初期値ではどうなっているんですか？ 田島悠介 両方とも”normal”、単語の途中では改行しない状態だね。 値を変えた場合の状態も画面で確認してみよう。   [PR] Webデザインで副業する学習方法を動画で公開中実際に書いてみよう 実際にコードを書いてみましょう。   HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS 折り返し</title> <link rel="stylesheet"
CSS

新潟のパソコンスクール20選｜自分にあった教室の選び方も紹介

新潟県のパソコンスクール（教室）をピックアップしました。 田島悠介 今回は、なにか相談受けたんだって？ 大石ゆかり 新潟に住んでる友達がパソコンの知識つけたいって言ったんですが、どこ選べばいいかわからなくて・・・ 田島悠介 それじゃあ自分にあったパソコン教室の選び方と新潟にあるパソコンスクールを紹介していくね！ 大石ゆかり お願いします！ 目次 パソコン市民講座 ハロー！パソコン教室 パソコン教室アビバ Winスクール パソコン教室わかるとできる よくわかるパソコン教室 ヤマダパソコンスクール新潟校 おこじょパソコンスクール 新潟市のパソコン教室ダイマック パソコン教室くりっく モリパワーキャリアアップスクール スタディPCネット パソコンサプリ ヤマダ教育機器 市民パソコン塾 富士通オープンカレッジ グラフィックセンター新潟 パソコンスクールファーストクリック パソコン教室ＩＣａｎ パソコンＢｉｎｉ まとめ 自分にあったパソコンスクールの探し方 まず最初にパソコンスクールを探すにあたって大事なのは、自分にあったパソコンスクールの条件やポイントは何かということです。ただ単にお金や立地といった単純な比較で決めてしまうと、自分が通う目的や目標に合致しない場所を選んでしまう危険性があります。 まずはなんのためにパソコンスクールに通うかを明確にしましょう。そのうえで参考となる基準を紹介します。 学習内容 価格 学習スタイル（通学かオンラインか） サポート体制 これらをもとに自分がパソコンスクールに通うもっとも重要な理由を当てはめて考えてみましょう。 ではここからは、新潟の20カ所のパソコンスクールを紹介していきます。 [PR] Webデザインで副業する学習方法を動画で公開中パソコン市民講座 特徴と向いている人 個別指導で自分のペースにあわせて学習が可能 映像授業も豊富のため、復習でより深く身につけることが可能 気軽に質問できる環境で疑問をすぐに解決 100教室、54万人以上の実績があり安心 自宅学習中に疑問に思ったこともすぐに電話で質問可能 スクール内だけでなく、映像授業や電話サポートなど自宅で学習できる環境もサポートされています。パソコンに関して初心者から中級者まで、学習意欲旺盛な方に向いています。 プラン・コース一覧 Office基本系 Office資格系 その他 Word講座 Word タッチタイピング習得 Excel講座 Excel PowerPoint講座 Outlookメール講座 料金 受講料＋月会費＋テキスト教材費＋年会費の月謝制 受講料：1500円/1時間 月会費：2204円 割引制度 大学生まで対象の学割 1ヶ月8時間の定額受講料：9091円（税別） 住所・アクセス 【NSGけやき通り教室 住所：新潟県新潟市中央区笹口1-20-8 小林ビル2Ｆ パソコン市民講座 ハロー！パソコン教室 特徴と向いている人 全国200校 オリジナル教材 全国1位の「MOS公認パートナー」 安価な料金 振り替え制度で柔軟なスケジュール カウンセリング可能 基本ソフト講座や水彩講座、WordPress講座まで講座内容が幅広く、初心者から中級者はもちろん、転職やフリーランスを目指す方にとってもおすすめのスクールです。 プラン・コース一覧 Office基本系 Office資格系 Web系 その他 Word講座 MOS試験対策講座 ブログ作成講座 iPhone講座 Excel講座 ホームページ作成講座 iPad講座 PowerPoint講座 WordPress講座 Android講座 Access講座 デジカメ講座 ペイント講座 年賀状講座 料金 月謝制 講座料：1200円（税別）/1時間 住所・アクセス 【イトーヨーカドー丸大新潟校】 住所：新潟県新潟市中央区本町通り6-1122-1　イトーヨーカドー丸大新潟店4F 【イオン長岡校】 住所：新潟県長岡市古正寺1-249-1　イオン長岡2F 【イオン新潟青山校 住所：新潟県新潟市西区青山2-5-1　イオン新潟青山ショッピングセンター2F ハロー！パソコン教室 パソコン教室アビバ 特徴と向いている人 全国に102校 受講満足度97％ 年間受講者数33000人以上 習慣づくりをサポートするプラットフォームが充実 習慣の記録、レポート、クイズ、コミュニティ、カウンセリング 質問に回答するだけで自分の強みや弱みをデータ化するサービスあり 身につけたいスキルが項目として出てくる 目標との距離がわかる 対面、個人実践演習 一斉授業形式、オンデマンド形式など充実 受講満足度の高いスクールで、豊富なサービスが展開されています、なかでも、質問に回答するだけで自分の強みや弱み、身につけたいスキルが何なのか、目標との距離がどれだけあるのかなどを明確にしてくれます。 初心者から転職希望者、フリーランスを目指す方まで幅広くおすすめできるスクールです。 プラン・コース一覧 Office基本系 Office資格系 グラフィック系 Web系 プログラミング系 その他 Excel MOS Photoshop マークアップエンジニア Javaプログラミング AutoCAD Word 日商PC検定 Illustrator HTMLベーシック jw_CAD PowerPoint サーティファイ認定 Dreamviewer Webサーバーベーシック CAD利用技術者 Access VBAエキスパート Photoshopクリエイター Webクリエイター VBA Illustratorクリエイター 料金 入学金＋受講料＋テキスト代 受講料金：3500円〜（受講内容におうじる　平均4000円、5000円程度） 入学金：22000円（税込） 割引制度 Web経由で入学金無料 学生は受講料20％オフ 住所・アクセス 【パソコン教室アビバ新潟校】 住所：新潟県新潟市中央区万代4-1-8 文光堂ビル3F パソコン教室アビバ Winスクール 特徴と向いている人 200講座以上の豊富な講座バリエーション 全国55校展開 企業研修実績あり年間1480社　8374人 資格一発合格率99.3％ 新しいスキルが豊富で最先端ソフト対応 合格率が高く、資格取得を考えている人に特に向いているスクールです。 講座内容も基礎から最先端ソフトにかんするものまであり、初心者から転職・フリーランス志望の方まで向いています。 プラン・コース一覧 Office基本系 Office資格系 グラフィック系 Web系 その他 Word MOS グラフィックデザイン Webデザイン CAD Excel 映像デザイン Webプログラミング 3DCAD インテリア 料金 受講料＋入学金＋テキスト代 受講料：内容におうじて30000円〜90000円程度 入学金：9000円 テキスト代：内容におうじて2000円〜5000円程度 住所・アクセス 住所：新潟市中央区東大通2-5-1カープ新潟ビル 6階 Winスクール パソコン教室わかるとできる 特徴と向いている人 映像授業 個別学習 専任インストラクター 200教室ほど 月謝制 映像授業で視覚的にわかりやすい講座がうけられます。講座のバリエーションが豊富で、マウスの動かし方から、視覚取得まで対応しており、初心者や中級者に向いています。 プラン・コース一覧 Office基本系 Office資格系 インターネット系 その他 Windows10導入 MOS Microsoft Edge スマホ・タブレット講座 Windows10活用 Internet Explorer11 Google マップ Windows8基礎 クラウドサービス講座 Yahoo!天気 Windows8活用 LINE Word LINE Pay Excel PowerPoint 料金 講座料＋入会金＋テキスト代 講座料：1700円（税別）/1時間 入会金：10000円（税別） テキスト代：講座におうじて 割引制度 ホームページにて、ホームページ閲覧者限定クーポンあり 住所・アクセス 【糸魚川校】 住所：新潟県糸魚川市南寺町1-10-3 【佐和田校】 住所：新潟県佐渡市東大通853 【新発田校】 住所：新潟県新発田市新栄町1-9-5 【上越アコーレ校】 住所：新潟県上越市富岡3458 【中条校】 住所：新潟県胎内市新和町2-4 【イオン県央校】 住所：新潟県燕市井土巻3-148 【長岡今朝白校】 住所：新潟県長岡市今朝白2-5-15 【リバーサイド千秋校】 住所：新潟県長岡市千秋2-278 【アピタ亀田校】 住所：新潟県新潟市江南区鵜ノ子4-466 【イオン新潟西校】 住所：新潟県新潟市西区小新南2-1-10 【イオン白根校】 住所：新潟県新潟市南区能登409-2 【村上プラザ校】 住所：新潟県村上市仲間町200 パソコン教室わかるとできる よくわかるパソコン教室 特徴と向いている人 ひとりひとりにあわせた少人数制パソコンスクール 個別指導 低料金 完全予約制 無料振替え対応 少人数制個別指導で、通いやすいことが特徴のパソコンスクール。講座内容は比較的、初心者から中級者向けとなっています。 プラン・コース一覧 Office基本系 Office資格系 インターネット系 その他 Wordコース 検定コース（MOS） インターネットコース メールコース Excelコース デジカメコース PowerPointコース 年賀状 Excel関数コース 料金 講座料金＋入会金 テキスト代：無料 入会金：5000円（税抜） 通い放題コース Excel、Word、PowerPoint 1ヶ月コース：12000円/月　（90分） Excel、Word、PowerPoint 3ヶ月コース：33000円/月　（90分） マンツーマンコース Excel、Word、PowerPoint 2回コース：12000円　（90分〜120分）  Excel、Word、PowerPoint 4回コース：24000円　（90分〜120分） 住所・アクセス 住所：新潟市中央区出来島2-12-10 よくわかるパソコン教室 ヤマダパソコンスクール新潟校 特徴と向いている人 ヤマダ電機のなかにあるパソコンスクール ICTプロフィエンシー検定試験対応 ロボットプログラミング・ゲームプログラミング講座 プライベートレッスン対応 ホームページやブログ作成（Jimdo） 無料振替え 個別指導 何度でも質問可能 電話サポート ヤマダポイントを支払いにあてることが可能 月謝制 ヤマダパソコンスクール新潟校はヤマダ電機店内にあり、通いやすいことが特徴です。フォトショップやホームページ作成を取扱う講座まであり、初心者から独立を目指すフリーランスまで幅広い人におすすめできるスクールです。 プラン・コース一覧 Office基本系 Office資格系 インターネット系 グラフィック系 Web系 その他 Word サーティファイ対策 インターネット基礎 Photoshop ホームページ・ブログ作成 電子メール講座 Excel P検対策 インターネット応用 Illustrator Facebook PowerPoint MOS資格取得対策 デジタルカメラ Access iPhone 料金 受講料＋入学金＋月会費＋テキスト代＋機材費 入会金：5000円（税別） 月会費：1000円（税別） 機材費：500円（ご自身のパソコン持参であれば機材費不要） テキスト代：講座におうじて別途 プライベートレッスンは1回4000円（税別） 4回コース：8000円（税別） 8回コース12000円（税別） 12回コース17000円（税別） 16回コース22000円（税別） 20回コース25000円（税別） 追加1回2000円（税別） 住所・アクセス 【新潟関新校】 住所：新潟市中央区関新3-4-27　ヤマダ電機新潟関新店２F 【上越校】 住所：新潟県上越市富岡3439　ヤマダ電機テックランド上越店内 【三条校】 住所：新潟県三条市大字上須頃293-1　ヤマダ電機テックランド三条店内2階 ヤマダパソコンスクール新潟校 おこじょパソコンスクール 特徴と向いている人 入会金無料キャンペーンあり 独自のテキスト 個別指導 月謝制 お茶とお菓子で休憩できる イベント多数 転職、再就職、スキルアップ向け講座あり リフレッシュルームあり ロビーが綺麗でコミュニケーションに最適 オフィスに関する講座から、CAD入門といった専門的な講座まであり、初心者から転職を考えている方までおすすめできるパソコンスクールです。 教室内にはリラックスしてコミュニケーションを取れる環境が整っており、人脈づくりにも役立ちます。 プラン・コース一覧 Office基本系 Office資格系 グラフィック系 Web系 その他 Word 日商PC検定 画像加工 ホームページ作成 CAD入門 Excel PowerPoint Access 就職・転職サポート 職業訓練コース無料（テキストは別途） 募集に応募で参加可能 料金 月謝制で別途テキスト代が必要になります。 富士通オープンカレッジの例 月謝9000円税別　月3回（1回2時間） 割引制度 入会金無料キャンペーン実施中 住所・アクセス 【燕三条校】 住所：新潟県三条市須頃2-106 【長岡西校】 住所：新潟県長岡市喜多町770-1 【新潟万代校】 住所：新潟県新潟市中央区万代1-6-1 おこじょパソコンスクール 新潟市のパソコン教室ダイマック 特徴と向いている人 メルカリ講座あり 少人数制個別指導 全ページカラー図解入りのオリジナルテキスト 毎月何回受講しても安心定額制 基本ソフトから、日商簿記まで幅広いニーズに対応した講座バリエーションがあります。独学に限界を感じた方などは、カラー図解入りのオリジナルテキストでわかりやすく解説してくれるのでおすすめです。初心者から転職、フリーランス志望の方に広くおすすめできるパソコンスクールです。 プラン・コース一覧 Office基本系 Office資格系 グラフィック系 Web系 その他 Word P検 ビデオ編集・音楽CD作成 ホームページ作成 インターネット・メール Excel 日商PC検定 年賀状・ラベルシール作成 PowerPoint MOS スマートフォン・タブレット VBAプログラミング 日商簿記講座 料金 マンツーマンプラン（月5時間） 受講料：2000円/1時間 入学金：10000円 テキスト代：無料 通常プラン（月8時間） 受講料：1200円/1時間 入学金：10000円 テキスト代：無料 通い放題プラン 受講料：無料 入学金10000円 月会費：3000円 テキスト代：講座におうじて 割引制度 一期一会キャンペーン中は入会金無料 住所・アクセス 【小新教室】 住所：新潟県新潟市西区小新大通2-3-20 【亀田教室】 住所： 新潟県新潟市江南区早苗2-2-31 新潟市のパソコン教室ダイマック パソコン教室くりっく 特徴と向いている人（初心者・中級者・転職志望者・フリーランス志望etc マンツーマン指導 体系的でないフリーレッスンも可能 入学金無料 ノートパソコン持ち込み可能で難しい設定も手伝ってくれる 要望に合わせてJavaScript、php、jquery、ブートストラップも提供 あらかじめ設定されている講座内容は初心者向きのものが多いですが、ホームページ作成講座もあります。要望におうじてJavaScript、php、jquery、ブートストラップも提供してくれます。転職志望者やフリーランス志望者に必要なスキルも、相談することで教えてくれます。 プラン・コース一覧 Office基本系 インターネット系 Web系 プログラミング系 Office一般 クラウドストレージ ホームページビルダー ExcelVBA Office上級 Googleスプレッドシート HTML/CSSによるウェブサイト作成 Word入門 ブログ・SNS Word応用 Excel入門 Excel応用 PowerPoint入門 PowerPoint応用 Access基礎 Excelマクロ/VBA 料金 受講料＋テキスト代 受講料：講座におうじて 入学金：無料 月会費：無料 テキスト代：講座におうじて HTML  CSSによるWebサイト構築（16〜20時間） 受講料：44000円〜55000円 テキスト代：2640円 クラウドストレージ（4〜8時間） 受講料：11000円〜22000円 エクセル応用（12〜16時間） 受講料：33000円〜44000円 テキスト代：2200円 Microsoft ExcelVBAプログラミング（16〜20時間） 受講料：44000円〜55000円 テキスト代：2640円 住所・アクセス 住所：新潟県南魚沼市黒土118 パソコン教室くりっく モリパワーキャリアアップスクール 特徴と向いている人 提供型のコースに縛られず自由プランが組める アットホームな授業と空間 個別指導 月謝制 テキスト代無料 プラン・コース一覧 Office基本系 Web系 その他 オフィスソフト ブログで作る簡単ホームページ IT活用 はじめてのパワーポイント 自分でやってみようアクセス解析SEO 就活相談サポート はじめてのエクセル 料金 受講料＋入学金＋月会費 受講料：1940円/1時間 入学金：3240円 月会費：1080円（通った月のみ） 割引制度 学生会員は1510円/1時間 住所・アクセス 住所：新潟市中央区米山4丁目1-31　紫竹綜合ビル4F モリパワーキャリアアップスクール スタディPCネット 特徴と向いている人 受講生満足度No.1認定 ロボットプログラミングスクール人気1位 経験豊富なプロインストラクター 全国300教室展開 デジタル学習教材 安定の実績をほこります。 講座内容は初心者から中級者向けとなっており、初心者から中級者におすすめできるパソコンスクールです。 プラン・コース一覧 Office基本系 Office資格系 インターネット系 その他 Word超入門 MOS対策Word インターネット入門 電子メール Excel超入門 MOS対策Excel インターネット応用 PowerPoint超入門 MOS対策PowerPoint やさしく学べるWord やさしく学べるExcel やさしく学べるPowerPoint Word基礎・応用 Excel基礎・応用 PowerPoint基礎・応用 Access基礎・応用 料金 受講料＋入学金＋テキスト代 受講料：講座におうじて（回数指定の月謝制） 入学金：11000円 住所・アクセス 【長岡校 住所：新潟県長岡市四郎丸4丁目10-1 スタディPCネット パソコンサプリ 特徴と向いている人 要望におうじてカリキュラムを作成してくれる スタッフさんは親身な対応 短い時間にみっちり自分にあった講座内容 短く深い内容のカリキュラムとなっていますので忙しい人におすすめのスクールです。資格取得を独学でやっていたがつまづいてしまったという方はぜひ。内容によって初心者から転職志望者、フリーランス志望者の方まで親身に教えてくれます。 プラン・コース一覧 それぞれの方におうじたカリキュラム内容となっており、独学していてもこれがどうしてもわからないといった方におすすめです。やや初心者から中級者向けの内容を得意としています。 料金 マンツーマン 50分1回コース3000円/50分 50分3回コース8000円/50分×3 80分1回コース5000円/80分 110分コース6000円/110分 短期集中1日コース 半日コース 割引制度 ペア割引あり LINE友達追加割引 住所・アクセス 住所：新潟県三条市桜木町 12-38　三条ものづくり学校１０１号室 パソコンサプリ ヤマダ教育機器 特徴と向いている人 実践的な授業 完全予約制のマンツーマンレッスン 経験豊富な講師陣 日商検定が短期間で 実践的な授業を特徴とするパソコンスクールです。検定対策が充実しており、より短期間で資格取得が可能です。初心者から転職志望者まで幅広い講座バリエーションがあります。 プラン・コース一覧 Office基本系 Office資格系 Word完全マスター 日商PC検定コース Excel完全マスター PowerPoint完全マスター Word＆Excel完全マスター Word入門 Excel入門 Word＆Excel入門 就職・転職サポート 公共職業訓練カリキュラムの介護員養成コースでは就職率100％を誇っています。 事務基本科 介護員養成科 料金 入校金5000円（税別） テキスト代は講座料に含まれます。 会費は無料です。 コース名 講座回数 料金（税込） Word完全マスター 12回 ¥69,300 Excel完全マスター 12回 ¥69,300 Word＆Excel完全マスター 18回 ¥101,750 PowerPointマスター 6回 ¥35,200 Office活用術Word・Excel・PowerPoint 10回 ¥57,200 Word速習 5回 ¥29,150 Excel速習 5回 ¥29,150 パソコン超入門　初めの一歩 6回 ¥29,700 なるほど楽しいWord入門 8回 ¥39,600 なるほど楽しいExcel入門 8回 ¥39,600 なるほど楽しいWord・Excel入門 12回 ¥59,400 Wordで楽しく自分史作成 6回 ¥29,700 なるほど楽しいはがき印刷＆宛名印刷 6回 ¥29,700 文書作成分野3級 10回 ¥61,600 テータ活用分野3級 10回 ¥61,600 プレゼン資料作成3級 4回 ¥25,300 文書作成分野2級 10回 ¥71,500 データ活用分野2級 10回 ¥71,500 プレゼン資料作成2級 10回 ¥71,500 文書作成お急ぎ速習3級 4回 ¥25,300 データ活用お急ぎ速習3級 4回 ¥25,300 オリジナルレッスン60分 1回 ¥5,400 住所・アクセス 住所：新潟県新潟市西蒲区巻甲4222番地3 ヤマダ教育機器 市民パソコン塾 特徴と向いている人 最安値級1講座1000円 Webキーワードでオリジナルテキストプレゼント 2画面学習方式（操作方法を実際に見て学べる） 動画学習においては、2画面学習方式を行なっており、じっさいにどのようにやるのかがわかりやすい内容となっています。わかりやすさを追求した初心者向けの講義内容となっています。 プラン・コース一覧 初心者講座 Word講座 エクセル講座 ネット活用・趣味講座 キッズ講座 PowerPoint講座 料金 入学金：1000円 講座料：1000円 月会費：1000円 ※表記は税別になります 住所・アクセス 住所：新潟県新発田市緑町2ー2ー11 アーバンエンジェルス2F 市民パソコン塾 富士通オープンカレッジ 特徴と向いている人 特別講座や、ランチバイキングなどイベントが充実 主に中高年者や小学生向けのパソコンスクールになり、講座内容も初心者向けになります。 プラン・コース一覧 中高年向けパソコンiPad教室 小学生向けプログラミング教室 料金 月謝制で別途テキスト代が必要になります。 月謝9000円（税別）　月3回（1回2時間） 住所・アクセス 住所： 新潟県新潟市中央区万代１丁目６−１ 富士通オープンカレッジ グラフィックセンター新潟 特徴と向いている人 Adobe認定トレーニングセンタ グラフィックデザイナー志望者向け講座内容 Webデザイナ志望者向け講座内容 公共職業訓練募集中 資格取得に長けている Adobe認定アソシエイト Webサイト更新業務に携わる人からAdobe製品を使えるようになりたい人、デザインクリエイターに転職したい人など、初心者向けというよりもデザインに特化して転職や独立をしたい転職志望者やフリーランス志望者向けの内容となっています。 プラン・コース一覧 グラフィック実践科　6ヶ月 Web DTP  Design 応募については公式サイトより募集がかかっていますので、公式サイトをチェックしましょう。 料金 講座料：10800円/90分 住所・アクセス 住所：新潟県新潟市中央区西堀通6-884 第一カトウビル4・5F グラフィックセンター新潟 パソコンスクールファーストクリック 特徴と向いている人 少人数制指導スタイル 気軽に立ち寄れるネットスペースとして開放 実際に各種制作を行なっている実績のある教室 パソコントラブルにも対応 未入会の単発レッスンも対応 カフェとしても開放してておしゃれ カフェとしても開放しているおしゃれな空間で学習に取組むことができます。スクール生だけでなく人の出入りがありますので人脈づくりに最適かもしれません。講座内容としては基本から検定対策コースまであり初心者から中級者向きです。 プラン・コース一覧 初心者コース オフィスコース FCコース（課題持ち込み、ここだけ教えてに対応） 検定対策コース 料金 入会金：8000円 基本料金 5回券 10回券 初心者コース ¥3,500 ¥14,000 ¥26,000 オフィスコース ¥3,500 ¥13,000 ¥25,000 FCコース ¥4,000 ¥16,000 ¥28,000 検定対策コース ¥4,000 ¥15,000 ¥27,000 住所・アクセス 住所： 新潟県新潟市西区２ 大学南2-2-12 マツビル107号 パソコンスクールファーストクリック パソコン教室ＩＣａｎ 特徴と向いている人 完全個別指導 人とのつながりを大切にする教室 短期で単価に資格取得可能 資格取得に力を入れているパソコンスクールです。初心者の方でも資格取得から始めたいと考えていればこのスクールがおすすめです。転職志望者やフリーランス志望の方でも、この資格を取っておきたいと考えている方におすすめです。 プラン・コース一覧 Windows総合 就業前のワードエクセル特訓 日商PC検定資格習得 今時ITもの習得（Twitter Facebookホームページ） スマホタブレット徹底活用 エキスパート養成 料金 講座をとわず月謝制で10000円 入学金：無料 テキスト代：無料 住所・アクセス 住所：新潟市西区寺尾上4-4-15ベスト電器2F パソコン教室ＩＣａｎ パソコンBini坂井輪スクール 特徴と向いている人 ※パソコンBini坂井輪スクールの情報はネット上に記載がありませんでした。 以下の内容は同じスクールの神奈川校を基にしています。 詳細を知りたい方は問い合わせなどで対応ください。 グラフィック制作講座あり 実際にアルバムやマイブック、フォトムービを作れる 実際にブログやホームページ制作が可能 制作型の講座に力を入れているスクールです。じっさいに作ってみることで自身の自信や経験につながります。グラフィック制作講座もあり、初心者からグラフィックデザイナーを目指す転職志望者やフリーランス志望者におすすめできるスクールです。 プラン・コース一覧 パソコン入門コース お仕事＆キャリアアップコース Web＆グラフィックコース Web＆グラフィック資格対策講座（イラストレータークリエイター能力認定試験など） 料金 講座料＋入学金 講座料：講座におうじて 入学金：5500円（税込） 月4回券 月8回券 1回追加 初級・中級講座 ¥8,800 ¥16,500 ¥2,200 上級講座 ¥13,200 ¥25,000 ¥3,300 マンツーマン ¥13,200 ¥25,000 ¥3,300 カスタム講座 1回3300円～見積り ピンポイントレッスン 3850円/回 割引制度 月5回券がお得 初級中級5回券：10500円 上級5回券：16000円 住所・アクセス 住所：新潟県新潟市西区寺尾上２丁目３−７１ パソコンＢｉｎｉ まとめ 向いている人 料金 就職・転職サポート 資格取得 県内教室数 初心者 中級者 転職志望者 フリーランス志望者 パソコン市民講座 ◯ ◯ △ × 1500円/60分　月会費：2204円 × △ 1 ハロー！パソコン教室 ◯ ◯ ◯ △ 1200円/60分 × △ 2 パソコン教室アビバ ◯ ◯ ◯ ◯ 1回3500円から × ◯ 1 Winスクール ◯ ◯ ◯ ◯ 入学金：22000円（税込） ◯ ◯ 1 パソコン教室わかるとできる ◯ ◯ ◯ △ 1コース30000円から × △ 12 よくわかるパソコン教室 ◯ ◯ ◯ △ 入学金：9000円 × △ 1 ヤマダパソコンスクール新潟校 ◯ ◯ ◯ ◯ テキスト代：2000円～5000円程度 × ◯ 3 おこじょパソコンスクール ◯ ◯ ◯ △ 1700円/60分 × ◯ 3 新潟市のパソコン教室ダイマック ◯ ◯ ◯ ◯ 入会金：10000円 × ◯ 2 パソコン教室くりっく ◯ ◯ ◯ ◯ テキスト代：講座におうじて × △ 1 モリパワーキャリアアップスクール ◯ ◯ ◯ △ 入学金：5000円 × △ 1 スタディPCネット ◯ ◯ △ × 10000円から × △ 1 パソコンサプリ ◯ ◯ ◯ ◯ テキスト代：無料 × △ 1 ヤマダ教育機器 ◯ ◯ △ × 入学金：5000円 × △ 1 市民パソコン塾 ◯ △ × × 月会費：1000円 × × 1 富士通オープンカレッジ ◯ △ × × 回数別4回8000円から × × 1 グラフィックセンター新潟 △ △ ◯ ◯ 1コース9000円から ◯ ◯ 1 パソコンスクールファーストクリック ◯ ◯ △ △ 入学金：10000円 × △ 1 パソコン教室ICan ◯ ◯ ◯ △ 60分1200円から × △ 1 パソコンBini坂井輪スクール ◯ ◯ ◯ ◯ 1講座10000円程度から × ◯ 1   大石ゆかり たくさん比較してもらえたので、自分にあった教室が分かったそうです！ 田島悠介 それは良かったね！ 大石ゆかり はい！ありがとうございます！   TechAcademyでは、さらにPCスキルを学習して転職をしたい方向けに、新潟で学べるプログラミングスクールを運営しています。 現役エンジニアの学習サポートと、キャリアカウンセリングを通じてエンジニアへの転職を支援します。
プログラミング

JavaScriptのbreak文の使い方を現役エンジニアが解説【初心者向け】

JavaScriptのbreak文の使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 break文とは、ループ処理などの途中で処理を抜ける場合に利用します。 処理を抜けるとは、処理を終了するという意味です。 実務でも、break文を活用してループ処理から抜ける実装をするので、ぜひ学習してみてください。 目次word-breakプロパティとは活用場面ブラウザによる対応の違いword-breakを使って文章を記述してみようまとめ監修してくれたメンター そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptのbreak文の使い方について詳しく説明していくね！ 大石ゆかり お願いします！   break文とは break文とは、繰り返し処理中に処理を抜けたいときに使用する文法です。 10回のループ処理の5回目で処理を抜けたり、特定の値にマッチした際に処理を抜けることが可能です。   break文の使い方 breakが利用できるのは、繰り返し文やswitch文などです。 関数を抜け出す時などには利用できませんので注意してください。 例えば、配列の内容を確認しながら、条件にあてはまる値があった場合に処理を止めたいときなどに利用します。   [PR] Webデザインで副業する学習方法を動画で公開中for文におけるbreak文の使い方 ここでは、for文におけるbreak文の使い方について解説します。 サンプルコード for (let i = 1; i<10; i++) { if (i > 6) { break; } console.log(i); } 表示結果 解説 for (let i = 1; i<10; i++) {では、変数iの初期値に1を代入して、変数iが10より小さい間for文を繰り返し、繰り返すたびに変数iに1を加算する処理をしています。 if (i > 6) {では、変数iが6より大きい時という条件を指定しています。 break;では、変数iが6より大きい時breakしてfor文の処理から抜けます。 }ではif文を終了します。 console.log(i);では、変数iを表示します。 }では、for文を終了します。   while文におけるbreak文の使い方 ここでは、while文におけるbreak文の使い方について解説します。 サンプルコード let i=1; while (i<10) { i++; if (i > 6) { break; } console.log(i); } 表示結果 解説 let i=1;では、変数iの初期値に1を代入しています。 while (i<10)
JavaScript

JavaScriptでメソッドを使う方法【初心者向け】

JavaScriptをプログラミング初心者向けに紹介した記事です。 今回は、JavaScriptでメソッドを使う方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 また、入門向けのJavaScriptを学習できるサイトも紹介しているので、あわせてご覧ください。   本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発できます。 目次word-breakプロパティとは活用場面ブラウザによる対応の違いword-breakを使って文章を記述してみようまとめ監修してくれたメンター そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。   メソッドとは メソッドとは、オブジェクトに関連付けられた関数のことを言います。   あるオブジェクトのプロパティに関数を定義した場合、関数と呼ばずに、そのオブジェクトのメソッドと呼びます。 つまりメソッドとは、オブジェクトとして定義したデータの専用の関数です。 では、なぜ関数ではなくメソッドにしたほうが良いかというと、分かりやすいプログラムになるからです。   オブジェクトとはその名の通り、プログラム上で「モノ」を表現します。 /* 信号機のオブジェクト */ var traffic_light = { /* 信号機 状態の定義 */ blue: "go", yellow: "slow down", red: "stop", /* 信号機 現在の状態データ */ current: " " }   関数やメソッドは、プログラムで「動き」やふるまいを表現していますね。 /* 信号機の光る色を変える関数 */ function change_light(){ /* 現在の状態を変更する処理 */ }   この世の中では「モノ」と「動き」はセットになっていることが多いです。 オブジェクト「モノ」 メソッド「動き」 信号機 光る色が変わる モンスター 攻撃する 車 走る 合計金額 消費税を課税 プログラムで表現するときも、セットでまとまったほうが分かりやすいですね。   オブジェクトにメソッドとして処理を関連付けておくことで、オブジェクト専用の処理としてまとめます。 /* 信号機のオブジェクト */ var traffic_light = { /* 信号機 状態の定義
JavaScript

サイズ指定に役立つ！CSSでcalc( )を使う方法【初心者向け】

CSSで書くcalcファンクションの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 要素の水平や垂直のセンタリング、可変的な幅の指定や均等に要素を配置したい場合にもcalcファンクションを使えます。 異なる単位で複雑な計算も簡単に指定できます。 レイアウトやサイズ指定を楽に行うことができるので、少し応用的な使い方ですが、覚えておくと便利でしょう。 目次word-breakプロパティとは活用場面ブラウザによる対応の違いword-breakを使って文章を記述してみようまとめ監修してくれたメンター そもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。   大石ゆかり CSSで3等分にした要素の幅を設定するにはどうしたらいいですか？ 田島悠介 いろいろ方法があるけどcalcファンクションを使えば簡単だよ。 大石ゆかり calc？CSSで計算ができるんですか？ 田島悠介 その通り！たとえば全体の幅から3等分した要素を作りたいならwidth: calc(100% / 3)のように指定できるよ。 大石ゆかり へぇー。わかりやすいですね。 田島悠介 そうなんだ。まずはどういった記述の仕方をするか見てみよう。 大石ゆかり はい！   calcファンクションとは CSSのcalcファンクションとは、レイアウトやサイズ指定に計算式を使えるようにしてくれるファンクションです。 通常だと100pxや3emのようにレイアウトやサイズを指定しますが、calcファンクションを用いることで、100px + 50pxや、3em – 1em のように四則演算を使えるようになります。 たとえば、縦横150pxの要素をブラウザの表示領域で中央に配置するには以下のように記述できます。 width: calc(100vw / 2 - 150px / 2); height: calc(100vh / 2 - 150px / 2); このように指定すれば、中央位置（50vw, 50vh）から150pxの要素の端から中心までの距離（150px / 2）だけずらした位置を求めて中央にセンタリングできます。   calcファンクションを使うメリット 異なる単位で計算することができる 計算が明白になる calc()は結果の値ではない 異なる単位で計算することができる CSSのcalcファンクションは、異なる単位の値で計算式を作成できます。 異なる単位で計算できれば、相対的な長さの単位（%、em、vwなど）と絶対的な長さの単位（pxやptなど）を組み合わせて、要素をセンタリングするなどの指定が簡単に記述できます。 %、em、pxなどいろいろな単位を組み合わせた計算が可能です。 たとえば、表示領域全体から固定幅 80pxの要素の残りの幅を calc(100% – 80px) のように計算式で求められます。 このように、固定幅の要素と幅が可変する要素を並べたいときに便利です。 計算が明白になる calcファンクションを使うと、値が何を意味しているかが分かりやすくなります。 たとえば3等分の幅にしたい場合、「width: 33.333333333%;」と指定するよりも「width: calc(100% / 3);」としたほうが、3等分の幅にしたいことが明白にわかります。 固定された値を指定するよりもわかりやすく、3分割や7分割などの割り切れない値も設定できます。 calc()は結果の値ではない calcファンクションの計算結果は固定されているわけではなく、ブラウザの幅などに合わせてリアルタイムに計算されます。 たとえば「height: calc(100vh – 50px);」と指定すれば、ブラウザの表示領域に合わせて常に高さが表示領域の半分より50pxだけ少なくなるように調整されます。   [PR] Webデザインで副業する学習方法を動画で公開中calcファンクションの書き方 calcファンクションはCSSで値の代わりとして計算式を指定できます。 widthやheight、font-sizeなど値が指定できるところなら使えます。 構文 プロパティ（widthなど）: calc(式) 四則演算が使用できる 指定する式では四則演算の演算子（+、-、*、/）が使えます。 前後に空白が必要 加算（+）と減算（-）では演算子の前後に半角スペースを空ける必要があります。 除算（/）や乗算（*）では演算子の前後に半角スペースを入れなくても計算式が認識されますが、慣習として四則演算の演算子の前後には半角スペースを入れます。 ※演算子の前後に半角スペースを入れないと、加算や減算ではなく正の値や負の値として認識されます。詳しくは公式ドキュメント「calc() – CSS: カスケーディングスタイルシート | MDN」をご覧ください。 calcが利用できる場所 calcファンクションは、長さ（<length>）、周波数（<frequency>）、角度（<angle>）、時間（<time>）、数量（<number>）、整数値（<integer>）の値を設定する場所に対して使用できます。 入れ子が可能 calcファンクションは入れ子にできます。 入れ子にすると計算式の優先順位を決める、単なる括弧( )として扱われます。   calcファンクションの実装例 実際にcalcファンクションを使った実装例を見てみましょう。 ルートに基づいたサイズ指定 要素を3等分の幅にする 左右のセンタリング 上下の中央配置 ヒーローヘッダーの高さ調整 ルートに基づいたサイズ指定 calcファンクションを使えば、フォントのサイズを相対的に指定できます。 たとえば、calcファンクションでルート（最上位の要素。html要素）のフォントサイズより5px大きいサイズを指定しておけば、ルートのフォントサイズが変更されたら一緒に変わるようにできます。 スマートフォンとPCなどでフォントサイズを一括して変更したいときに便利です。 ソースコード 「text_plus」クラスの要素のフォントサイズをルートのフォントサイズの1.5倍になるようにcalcファンクションで計算します。 ルート（html要素）のフォントサイズが変更されたら、「text_plus」クラスの要素のサイズも変更されます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8">
CSS

HTMLでword-wrapプロパティで単語を改行する方法を現役デザイナーが解説【初心者向け】

HTMLでword-wrapプロパティで単語を改行する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 word-wrapプロパティで単語を改行する方法について詳しく説明していくね！ 大石ゆかり お願いします！   word-wrapプロパティとは 英数字列の文章は、特に指定がなければブロックレベル要素の幅を境目として折り返さずに、画面から突き抜けて表示されてしまうおそれがありました。この現象は、古いブラウザにて顕著に確認できましたが、近年のブラウザでは、滅多に確認できません。それでも、誤解をまねく表現にしないためにも、改行は意図しなければなりません。 逐一改行のコードであるbrタグを文章の途中に記述していましては、HTML文書の標準化の推奨内容と反駁してしまうことも危惧されます。そのため、CSS（カスケーティングスタイルシート）から設定するためにword-wrapプロパティが用意されています。 このプロパティを使用することで、様々な折り返しを実現できます。次項の「改行の仕方を指定するには」では、原始的にもbrタグを使用するサンプルコードを例に説明します。   改行の仕方を指定するには 原始的な方法としては、brタグの挿入が挙げられます。以下、サンプルコードです。 See the Pen 2020-03-23-sample-13 by YOHEI INAI (@yohei_inai) on CodePen. しかし、このbrタグを挿入する方法では、前述の通り、頻繁に使用してしまいますとHTML文書の標準化とは反駁してしまうおそれがあります。それを回避するためにも、テキストの折り返し方を設定することにて、自動的な制御を加えることができます。 この制御を実現できるスタイルとして、word-wrapプロパティです。次項の「word-wrapプロパティを使ってみよう」では、サンプルコードとともに、折り返しの表示も確認できます。   [PR] Webデザインで副業する学習方法を動画で公開中word-wrapプロパティを使ってみよう word-wrapプロパティに、break-wordを指定してから、丁度良いと思われる折り返しを実現できます。以下、word-wrapプロパティに、break-wordを指定した場合のサンプルコードです。 See the Pen 2020-03-23-sample-14 by YOHEI INAI (@yohei_inai) on CodePen. この他にも、自動的に単語の改行を実現するための指定方法はあります。様々な指定方法を巡ることになるかもしれませんが、たまには、時間を無駄に費やすことになっても、息抜きを目的に含めて、探してみましょう。   監修してくれたメンター 井内洋平 TechAcademyの現役メンター。 元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
HTML

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

副業したい方

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

はじめての副業コース

転職したい方

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

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

スキルアップしたい方

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

Pythonコース

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

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

テックアカデミーGAIナレッジベース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS CSSのword-breakプロパティを使った文章の改行の仕方を現役エンジニアが解説【初心者向け】