Web技術者のためのWordスタイル

公開日：2025/11/17

技術ノウハウ・Tips

みなさん、Microsoft Word好きですか？

私の知る限り、技術者でMicrosoft Wordが好きという人は少ないです。理由は、なんにせよ思ったようにいかない。特に、

先頭文字がそろわない。
箇条書きがずれる。

等が理由に挙がります。そんな中、私は好きです。

先頭文字がそろわない

初期値のまま、文字を書いていったとしましょう。こんな風になります。

初期値のままでは、文章は最初の段落が字下げされます。しかし、字下げをしたくない場合は多いです。逆に本文はインデントして、先頭を合わせたいケースが多いでしょう。これを、頑張って、整形してみましょう。多くの人は「スタイル」を知らないので次のようにすると思います。

ふぅ。きれいにできた。

これ、htmlにすると、こんな風になります。このhtml、WEB技術者として人に見せられますか？

<style>  p {text-indent: 1em;}</style>
<p style="font-size: 18px;font-weight: bold; text-indent: 0em;">コモドオオトカゲ</p>
<p>コモドオオトカゲ（Varanus komodoensis）は、爬虫綱有鱗目オオトカゲ科オオトカゲ属</p>
<p>に分類されるトカゲ。別名、コモドドラゴン。</p>

やりたいのは、こうですよね？

<style>
  h1 {
    font-size: 18px;
    font-weight: bold;
  }
  p {
    margin-left: 1em;
  }
</style>
<h1>コモドオオトカゲ</h1>
<p>コモドオオトカゲ（Varanus komodoensis）は、爬虫綱有鱗目オオトカゲ科オオトカゲ属に分類されるトカゲ。別名、コモドドラゴン。</p>

このようにするには、Wordの「スタイル」機能を使いましょう。

見出し(h1)

見出しぐらいは使ったことがある人も多いと思います。以下のstyleを適用する方法を記載します。

<style>
  h1 {
    font-size: 18px;
    font-weight: bold;
  }
</style>

スタイルのところから見出し１を選びます。

右クリックして「変更」を選択します。

フォントを変更します。これで、見出し1を太字18ポイントに変更できます。

標準(p)

たぶん、何もしないと、「字下げ」が適用されています。しっかり文章を書く人には、「字下げ」が使われますが、Webの世界ではあまり使われない印象です。今度は、「段落」を変更します。

段落を開くと、最初の行が「字下げ」になっていることがわかります。これは、

<style>
	p {text-indent: 1em;}
</style>

こういうことです。

今回やりたいのは、

<style>
  p {margin-left: 1em;}
</style>

こうなので、

このように設定します。

つまり

Wordの「スタイル」というのは、そのまま<style>なのです。スタイルを適用するには、行を選択して、適用したいスタイルを選べば適用されます。また、独自のスタイルも追加できます。classが作れるという感じです。このように考えると、簡単でしょう？

箇条書きがずれる

カーソルのある、「数年後のある日、」の前に改行を入れたいとしましょう。普通に改行を入れると、箇条書きの「●」が付いてしまいますが、付けたくないとしましょう。

ふぅ、うまくできた。

これ、htmlにすると、こんな風になります。このhtml、WEB技術者として人に見せられますか？

<ul>
  <li>ある王女が双子の子供を生んだ。一人は人間の男の子でオラン、
  もう片方はコモドオオトカゲの女の子でオラと言った。生まれた時にその兄妹は別れた。</li>
</ul>
<p style="margin-left: 2.5em; margin-top: -1em; margin-bottom: -1em;">数年後のある日、成長したオランは、森で巨大なトカゲに遭遇する。
オランがトカゲを殺そうとしたちょうどその時、実の母親である王女が現れ、二人が兄妹であったことをオランに明かした。</p>
<ul>
  <li>昔、双子の兄妹がいた。兄は妻をめとり、妹は嫁いでいったが、お互いの子どもたちを結婚させようと誓った。
  妹には美しい娘が生まれたが、兄には全身が鱗におおわれた醜い息子が生まれた。しかし誓いどおりに結婚させられ、村祭りの夜、息子は体から鱗をとり人間の姿で出かけた。
  その鱗を娘が燃やすと、その灰は森の精気を吸って大トカゲの姿になった。</li>
</ul>

やりたいのは、こうですよね？

<ul>
  <li>ある王女が双子の子供を生んだ。一人は人間の男の子でオラン、
  もう片方はコモドオオトカゲの女の子でオラと言った。生まれた時にその兄妹は別れた。<br>
  数年後のある日、成長したオランは、

Enterキーは、今のタグを閉じるってことです。じゃあ、<br>は、どうやって入れるのかというと、Shift+Enterです。今回は、数字なしの箇条書きでしたが、数字ありとなるともっと大変で、あきらめて、プレインテキストで書いちゃう人がほとんどではないでしょうか。

Web技術者に覚えてもらいたいWord操作

<style>は、「スタイル」を使う。
<br>は、Shift+Enterで入れる。

Google Docも、Wordより機能は少ないものの、同じような機能があります。htmlで考えると理解しやすかったのではないでしょうか。markdownで書くのもいいけど、意外にGoogle Docや、Wordで文章を書くのも簡単です。これを機に、ちょっと使ってみてはどうでしょうか。ちなみに、Google Docは、一部markdown使えるようになっています。

お客さまからWordで資料の提出を求められることもあります。WEB技術者としてカッコ悪くないスタイルで出したいですね。