【動画公開】XSLT超入門3, CSS組版スライドと補足

ちょっと一息アンテナハウスウェビナー「XSLT超入門 3 XPathについて」を終えました。ご視聴いただいた方、ありがとうございます。お時間の合わなかった方、動画が公開されたので、ぜひご覧ください。


Zoomの注釈機能

発表直前に気付いたのですが、Zoomの「画面の共有」ボタンの横に、いつの間にやら「注釈」というボタンが増えていたので早速使ってみました。いかがでしたでしょうか。

PowerPointスライドと違い(おそらくほとんどの)PDFビューアにはレーザポインタ機能がないので、助かりますね。(他機能として、テキストも表示できます。スライド表示中に「これ補足した方がいいかな」といった思いつきでテキストを追加したりはPDF注釈でも実現できますが、操作の切り換えの手間があるため、Zoomにあるに越したことはない、くらいの感想です。)

CSS組版スライド

担当したここ数回のウェビナーではPowerPointでスライドを作成していました。今回も途中まではそうだったのですが、内容の大幅な修正を行うついでにAH FormatterでHTML+CSS組版によるPDFスライドに移行しました。

以前XSL-FOでスライドを組版したことを紹介しました。スライド発表程度の長さであれば単一HTMLでもあまりテキスト分量はかさみません。今回、HTMLが650行弱、CSSは240行程度でした。実作業としてはSCSSで記述して変換していたので……240行程度でした。まあ、セレクタ部分は簡潔になりますが、改行・インデントとしてはあまり変わらないんですね。CSSについてはAH CSS Formatterの既定のCSSを読み込んだ上でなので、0から組むのであればもう少し嵩むでしょう。

VS CodeでSCSSを編集 with AH CSS Extension

SCSSの編集はVS Codeで行いました。VS CodeでのCSSの補完・サジェストについては、@media printなども最初からある程度対応しています。
加えて先日、AH CSS Formatterの豊富な拡張仕様を入力補助してくれるAH CSS Formatter Extensionが公開されたので早速使っています。SCSSファイル編集でも有効なようです。

https://github.com/AntennaHouse/ahformatter-vscode-css-ja

「HTMLソースでスライドを作成する」というと、気になるのは「発表スライドとWebページを同時作成できるか?」という点ではないでしょうか。結論としては「内容次第」ということに落ち着いてしまうのですが、「ある程度まで同一ソースで作成する」ことを目標とすると、方針として押さえるべき点は次のことでしょう。

  • HTMLソースはWebページ向けが主、スライドは従
    • スライド組版時はdisplay:noneにする情報を決めておく
    • スライド向けCSSを先行する場合、とくに注意するのはfloat配置とheightの100%

もちろん、広告を目的とするWebページなどで一度に入る情報量を絞ることなどはよくあります。ここではある程度技術的内容のプレゼンとそのWebページ化を前提としています。

スマホ向けとPC・タブレット向けのページを同じソースで作成する場合にスマホ向けをメインにレイアウトすることを「モバイル・ファースト」といったりしますが、Webページとプレゼンテーションの関係はもう一捻りあります。
モバイルとそれ以外で異なるのは、主に画面サイズです(より正しくは前提とする通信環境によるリソースの出し分けなどもあります)。
一方、Webページとプレゼンにおいて、Webページはそれのみですが、プレゼンは(通常)「スライド+発表者+発表」で構成されます。この違いは「読者側が受動的か能動的か」「発表者による注意対象・情報量のコントロール」といった差異を生みます。

HTMLソースの話に戻ると、ある変換を行うとき、情報量は落とす方が楽で、足すのはかなり困難です。
つまり「より情報量を必要とする方を主とし、そうでないものを従とする」ということになります。
プレゼンは発表という追加情報を前提とするため、スライドにWebページと同じ情報量を与えると情報量が過多になりがちです。

CSSでは手軽に表示を隠蔽する方法としてdisplay:noneがあります。これは、プレゼンでは口頭で与える情報を、Webページではテキストで表示する、という目的にも使えます。

@media print {
.web-page-only {
  display:none;
  }
}

前提として、「スライド上隠蔽されても前後の話は分かるようにする」というライティングが必要です。なので、パラグラフライティングの基本や、DITAにおけるshortdescのように、「これは最低限最初に伝える」という文章から書いていくよいでしょう。

ページ向け媒体ではフロートはページの上端、下端を前提に書けます。これはpositionについても同様です。

XSLT超入門3の補足

さて、発表の補足です。

何度か述べましたが、XPathの特長は、簡単には「ある文書で、目的の箇所を簡便な記法で指定できる」「取り出した値の加工が行える」ことにあります。ただ「hoge/fuga/…」と書きつらねるだけでなく、軸や述部といった機能・概念を使うことで、他の言語、というかDOMインターフェイスでは難しいこともスマートに行える、ということをXSLT超入門3ではフューチャーしたのですが、いかがでしたでしょうか。
「ここが分からないのでここをじっくりやってほしい」などの要望を、メール・SNS・動画へのコメントなどでいただけると幸いです。

さて、発表について、事前の予定から大きく削った箇所としては2箇所です。データモデルと、XPath 1.0のコードを3.1でリライトするという内容です。

データモデルについては、XPath 2.0でいかに整理されたか、3.0(3.1)で何が拡充されたか、の詳細を削りました。このあたりについてはW3CのXDMのページに図示があるので内部処理モデルに興味のある方はご参照ください。

XPath 3.1でのリライトについては、題材として丁度良いバランスのものを見つけるのはかなり難しかったため、構成から削除しました。「XPath 1.0でまともに処理できるように記述した上で、XPath 3.1で明らかに改善されるように書き直す」ということの難しさは、「そもそも1.0で書けなかった処理を拡充したものがほとんど」「1.0では(XSLT上では)独自functionの定義もできないので、XSLTも多分に含むことになる」といった点にあると感じます。XSLT 1.0のコードでの超絶技巧についてはfunctXライブラリが有名でしょうか。

超絶技巧はおいておいて、もう少し簡単なものはあります。

XPath 1.0(XSLT 1.0)
<xsl:template match="*[contains(@class, ' topic/ph ')]"> 
  ...
</xsl:template>
XPath 3.0(3.1) (XSLT 3.0)
<xsl:template match="*[contains-token(@class, 'topic/ph')]"> 
  ...
</xsl:template>

行っているのはDITAの@class処理で、スペース区切りで続く文字列の部分一致判定です。contains()では含まれてさえいれば真を返してしまうので、topic/ph前後にスペースは必須です。ないと「mytopic/ph」なども一致してしまいます。
contains-token()は、なんだったら名指しで「HTMLやDITAのclass処理に使えるよ」と書かれているのでさもありなん。

コア関数についてはかなり駆け足で紹介しました。コード例をバーッと載せていましたが、コードをしっかり読んでもらうことは意図していません。
これは構成上割と悩みどころで、関数名と処理内容を淡々と流すのであれば、ウェビナーよりもWebサイトや本などを参照するように誘導しても良いと考えています。あるいは数時間~数日のワークショップであれば、サンプル、基本、応用、基本、……といった進め方をしたと思います。

とくにXPath 1.0では、関数型言語らしい「関数を組み合わせて使う」ことはなかなか難しいため、その有用性のアピールを分かりやすく行うのは難しくなっています。

発表中、contains()が(2.0)となっていましたがこれは記述ミスで、XPath 1.0からあります。


『トップガン マーヴェリック』ピート・ミッチェルは大佐? 大尉?

ピート“マーヴェリック”ミッチェルといえば、トム・クルーズ演じる海軍パイロット。1986年に大人気となった『トップガン』の主人公です。36年ぶりの第2作目が5月27日から公開されて大人気です。公開直後は混んでいたので敬遠、2週目に見に行ったのですが、気になったことが幾つかあり、チェックするために3週目に改めて見に行きました。

そのひとつは階級です。最初に見に行ったとき、英語ではCaptainと呼ばれていたのはよく覚えていたのですが、日本語字幕では大佐になっていたと思い込んでいました。ところが、『週刊文春』6月23日号の町山智浩・言霊USAに『トップガン マーヴェリック』の話題がとりあげられていて、そこに、マーヴェリックは「36年後の今も大尉のまま出世していなかった」という文があり、ちょっとびっくり。

大佐だと思っていたけど「え! 大尉だったのだろうか?」と気になってしまいました。それを確かめるためにふたたび見に行ったのですが、オープニングの直後には、ピート・ミッチェル大佐という階級付の紹介があり、さらに、映画の中では何度も何度もCaptain(字幕では大佐)とでてきました。

町山智浩さんはカリフォルニアのバークレー在住とのことなので、現地で字幕なし英語版を観たのでしょう。で、Captainを大尉と理解したのだろうと思います。しかし、米国海軍のCaptainは、日本語では大佐と訳すのが普通のようです。

なお、トップガンの第一作では、マーヴェリックを階級で呼ぶ箇所は遥かに少ないですが、その中で、恋人になる前のチャーリーがピートに対して(字幕で)大尉と呼びかけており、原語ではLieutenantと呼んでいたようです。

なので、英語で見ても、LieutenantからCaptainに昇格しているわけで、「36年後の今も大尉のまま出世していなかった」という解釈は誤りでしょう。アメリアが、まだ大佐なの? とからかうシーンでは、ピートは「飾りの多い大佐だよ」(勲章をいろいろもらった)と言い訳しており、マーヴェリック本人も階級を気にしてないわけではないようです。

ちなみに第1作では、大尉と呼びかけられるケースはまれで、上官・教官・仲間はマーヴェリックと呼び、友人・恋人同士ではピートです。これに対して、第2作は、上官も同僚もミッチェル大佐と呼び、生徒は大佐と呼んでいます。友人・恋人同士ではもちろんピートです。マーヴェリックと呼ばれるケースは少ない。最後にフェニックスが「マーヴェリックは5機よ」と言うので、パイロット仲間ではマーヴェリックなのだろう。このように呼ばれ方から見ても、第1作と第2作で地位が相当変わっていることが分かります。

ところで字幕と言えば、感心したのはアイスマンが画面にタイプした「It’s time to let it go.」「It’s time to let go.」を「過去は水に流せ」と訳しているところ。なかなかこういう訳はできないな、と感心した次第です。

ただ、実をいうと「it」があったかどうか確信をもてません。文法的には必要なような気がしますがどうなんでしょう。もう一度見に行こうかなぁ。確認したところitはありませんでした。

神は細部に宿り、プログラムは1文字でエラーになるので、常に隅々までチェックを怠らないようにしないとね。


PDFの表形式データをExcelに変換する機能を比較してみる

PDFファイルの中に表形式のデータがあったとき、このデータを加工したり、集計したり、計算したり、あるいは別のアプリケーションに取り込みたいと思うことがあります。少しくらいのデータなら、手入力するという方法でもなんとかなるけれど、量が多いとき、繰り返しが多いときなどは手作業ではなく、なんとか自動的にできないかと思うことでしょう。

いまは、PDFファイルの表からExcel形式に変換するツールは市場にいくつかあります。来週(5月31日)のちょっと一息・アンテナハウスウェビナーでは、PDFファイルの表をExcel形式に変換するツールとして、Adobe のAcrobatと、弊社のPDFtoCellsの次の2つを選んで、変換精度についてがちの比較を行ってみます。

夕陽の対決! PDF-Excel変換ソフト PDFtoCells VS Acrobat
     -真に使えるExcel変換ソフトはどちらか、徹底検証します

2022年5月31日16時から (無料)

詳しい紹介とお申し込みは次のZoomページにてどうぞ。

Zoom でのお申し込みはこちら


速習XSLT超入門1(明日に迫るXSLT超入門2ウェビナー )

ゴールデンウィークも明け、XSLT超入門2のウェビナーが明日に迫りました。

セミナーのようなイベントでは、ナンバリングによって「初回参加してないからどうしよう」と尻込みされてしまう方がいるかもしれません。ということで、第1回をおさらいする記事を用意しました。
「これだけ見ておけば大丈夫」というよりは、書籍におけるあらすじと目次のようなものと考えてください。

導入として「XSLTを活用する自動組版の流れとして、XSLTがどの部分の役割を果たすか」を紹介しています。元の文書にあるコンテンツから目次を生成したりできます。
このウェビナー内では大きく触れていませんが(PDF自動生成超入門の内容なので)、「生成時まで内容が決定できないこと」をオブジェクトとしてレイアウトできるのがXSL-FOとなります。弊社製品Antenna House XSL Formatterによる拡張要素・プロパティも、この視点で眺めてみるとスタイルシート設計に役立つのではないでしょうか。

書籍の完成状態を例にして、抽象的な「構造」について紹介し、それをXMLで表現することについて触れています。

XMLを変換するにあたって、「どの部分を変換するか」という指定が必要になります。XSLTでは、そのためにXPathを使うよ、ということを紹介しています。XPathはXSLTから独立するほど多様な機能がありますが、「XML上の特定位置を指定する」ことは基本といって良いでしょう。そのために「ノード」という形でXML文書を解釈し、ノード間の関係としてXML上の位置を指定できるようにしています。関係の方向性として「軸」があり、不足する指定を補う「述部」がある、という紹介をしています。

より実際的な説明として、弊社の過去記事を紹介しておきます。
XSLTを学ぶ (1) XMLのツリーモデルとXPath/XSLTのツリーモデルではルートの意味が違う

明日のウェビナーが「基本文法編」ということで、では「XSLTの基本」は何を紹介しているんだ、疑問があるでしょう。ここでは初学者にとって概念的にあまり馴染みがないであろう、XSLTを構築する基本であるxsl:template@matchとxsl:apply-templatesについてを図を用いて紹介しています。文法は比較的資料があるため、図示に注力した形です。後半のデモでトラブルがあった関係でウェビナーと動画で違いが生じてしまっていますが、このmatchとapplyの関係はコインソータに似ている、ということを覚えておくと良いでしょう。

ウェビナーではトラブルのあったデモについては動画を撮り直しています。
デモを通し、xsl:template@matchとxsl:apply-templatesでXML文書を処理していく様子を紹介しています。

全体を通して、「学習開始で環境構築に悩むよりプレイグラウンドなどを利用するのも良い」「業務利用としてXMLエディタは十分ペイする」「変換元のXML文書としてCommonMark文書が難易度として丁度良いのではないか」といった話をしており、「初学者が取り組みやすい形を提示する」をサブテーマとしていました。

明日のウェビナーではこの第1回からの流れを受けて、基本的なコードリーディングによる学習ができる段階まで持っていけるようにすることを目標にしています。ご参加をお待ちしています。


DITA-OTでソースコードを書くならcoderefが便利

DITAでソースコードを書くときはcodeblock要素を使います。

(HTML5では引用ブロックやcodeblock(pre/code)もfigureの子孫として記述する方法がよく見られます。個人的な感覚として、英語だとキャプションに「figure 1」のようにしてソースコードが記載されていても違和感はないのですが、日本語で「図1」となっているところにソースコードが記載されていると違和感があります。)

さて、codeblockの中をどう書くかについて、方針はおおむね次の2つです。

  • 直接書く。XMLの<や>は
    • &lt;のようにして書く
    • xml-mentionドメインのタグを使って書く
  • coderefを使う

今回は記事タイトルにもあるように、coderefを使う方法が便利という話です。

DITA-OTではcodeblockでの処理について、仕様から拡張しています。記事タイトルが「DITAでcodeblockを書くときは~」ではないのはDITAの仕様ではないからです。なお、記事を作成する際に試行した環境はDITA-OT 3.7.1となります。

Extended codeblock processing DITA-OT

拡張内容は幾つかあるのですが、先に述べた通り、今回紹介するのはcoderefについてです。

codeblockにはテキストをそのまま記述することもできますが、XMLタグ、というか<などがきっちり処理されてしまうため、XMLやHTMLをソースコードとして例示するのは結構大変です。そこでcoderefです。

coderefは外部ソースコードを(主にテキストとして)参照し、結果を展開してほしい場合に使うタグです。@hrefで参照する先を指定します。XMLを参照する場合、@format=”xml”を付けましょう。

coderefの第一の利点は<をエスケープしなくて済む点です。これについてはDITA仕様のうちです。

coderefを使ったコードブロック
<codeblock xml:space="preserve"><coderef href="hoge.xml" /></codeblock>

ただ、実際のXMLファイルというのは結構行数が嵩みます。「coderefで参照する用にコード片を別ファイルに保存して……」というのはメインテナンス性からするとあまり歓迎できません。そこでDITA-OTの機能によって行数を制限します。

coderefの拡張記法は#から続くフラグメントによるものです。これに対応していない、DITA-OT以外のDITA処理系で使われても、ファイルの全行が出力されるだけで済みます。……結構大変なので、keyrefで切り出して切り換え可能にしておくのが良いかもしれませんね。

行数の記法はドキュメントにある通り、#line-range(<start>,<stop>)またはRFC 5147の記法で#line=<start><end>のようにして開始行、終了行を指定します。

このままで十分便利ですが、「元のソースコードを弄ったらトピックファイルで指定している行位置も変更しなくてはいけないのだろうか」と疑問を持たれたことでしょう。それはあまりメインテナンス性が良くありませんね。ということで、任意文字列を行位置の識別子にする方法が提供されています。
#token=<start-text>,<end-text>を指定すると、ソースコード中のstart-textがある行の次行からend-textがある行の前行までが範囲として取り出されます。想定としてはコメントアウトした行にstart-text、end-textを書いておく形のようなので、あまりトリッキーなことはしない方が良いでしょう。ほかにも幾つかの機能がDITA-OTのページで紹介されていますが、プラグインや処理系依存の機能もあるようなので都度確かめて使うと良いでしょう。

coderefのstart,end用文字列を追加したXML
<!-- example1start -->
<fo:block><fo:inline>Title</fo:inline></fo:block>
!-- example1end -->

ほか、coderefというcodeblockの中で更に別のタグを使うことのメリットは、@hrefで参照した箇所と、直接書く箇所をcodeblockの中で行える点です。

coderefを使ったコードブロック

<codeblock xml:space="preserve"><coderef href="hoge.xml#line-range(1,5)" />
... <!-- 直接書いた部分 -->
<coderef href="hoge.xml#line-range(10,15)" /></codeblock>

1-5行目、「…」を書いて10-15行目、なんて表示も可能になります。

そんなcoderef、DITA 2.0で若干の変更が入ることが現在のドラフトで言及されています。といってもエンドユーザがトピックを記述する上ではそう変化はなく、主に仕様上の立ち位置がより整理されるということのようです。


(無料)Zoomウェビナー 「PDFの表をExcelに変換し、データを再利用する際の課題」

2022年4月5日(火)16時よりZoomのよるウェビナーを開催します。

タイトルは、
PDFの表をExcelに変換し、データを再利用する際の課題 〜 複数ページ、ページ指定、回転、範囲指定への対処法を実例を用いて解説 〜

として、PDFの中の表をExcelデータに変換するための課題、ツール、テクニックおよび実際の変換例をご紹介します。

どなたでもご参加いただけますので、ご興味をお持ちの方は、次のご案内ページよりお申込みください。


画像をクリックすると、外部サイト(マジセミ)の申込ページに遷移します。


月曜日連載! Microsoft Wordスタイル探索(51)インデント関係コマンド(続き)

前回、インデント関係のコマンドの一覧を作りました。

コマンドの機能を調べて表にしてみました。

コマンド

キーボード・ショートカット

機能

リボン

Indent

Ctrl+M

インデントを増やす

IndentIncreaseWord

IndentChar

インデントを字送り分増やす

IndentFirstChar

字下げインデントを字送り分増やす

IndentFirstLine

字下げインデントを2文字分増やす

IndentLine

インデントを2文字分増やす

IndentSpecialFirstLine

不明

IndentSpecialHanging

不明

IndentSpecialNone

不明

UnIndent

Ctrl+Shift+M

インデントを減らす

IndentDecreaseWord

UnIndentChar

インデントを字送り分減らす

UnIndentFirstChar

字下げインデントを字送り分減らす

UnIndentFirstLine

字下げインデントを2文字分減らす

UnIndentLine

インデントを2文字分減らす

IncreaseIndent

インデントを字送り分増やす

HangingIndent

Ctrl+T

ぶら下げインデントを次のタブ位置まで増やす

UnHang

Chtl+Shift+T

ぶら下げインデントを前のタブ位置まで減らす

DecreaseIndent

インデントを2文字分減らす

AdjustListIndents

リストの位置を変更する

ListIndent

選択範囲を1レベル下げる

ListOutdent

選択範囲を1レベル上げる

Wordのリボン「ホーム」には「インデントを増やす」「インデントを減らす」というメニュー(ボタン)があります。これらは、キーボードショートカットとは異なるコマンドに対応しているようです。


【広告】
「ちょっと一息・アンテナハウスウェビナー」YouTubeのご案内。

Vol.1:Word文書をWebページにした例の紹介
Word文書を実際にWebページ(HTML)に変換した実例を紹介します。
Vol.2:Webページ構成要素別のWord編集例
Wordが持つ文書編集機能とWebページ作成時に必要となるHTMLタグがどのように対応しているかをご紹介します。
Vol.3:CSSによる、Webページのレイアウト
見栄えの良いWebページを作成するうえで必須のCSSについて、サンプルファイルを交えながら設定例をご紹介します。
Vol.4:Wordから上手にHTMLにする為の編集アドバイス
WordでWebページの原稿を作成するにあたり注意するべきポイントをご紹介します。


月曜日連載! Microsoft Wordスタイル探索
◆前回:(50)インデント関係コマンド
シリーズ総目次


月曜日連載! Microsoft Wordスタイル探索(50)インデント関係コマンド

Microsoft Wordの機能はコマンドとして用意されていて、そのコマンドをリボンのメニューやキーボードのショートカットに割当られているようです。

コマンドの割り当ては、次のようにして変更できます。
①リボン「ファイル」の「オプション」メニューをクリックする。
②Wordのオプションダイアログが開くので、「リボンのユーザー設定」メニューをクリックする。
③「リボンのユーザー設定」ダイアログの左下「ユーザー設定」を開く。
するとキーボードにコマンドを割り当てるダイアログ(下図)が表示されます。

コマンド割り当てダイアログ

コマンド割り当てダイアログ


コマンドがカテゴリーに分類されて表示されます。

これをみるとインデント関係のコマンドが沢山あります。まずはどんなコマンドがあるかリストアップしてみましょう。

  • Indent
  • IndentChar
  • IndentFirstChar
  • IndentFirstLine
  • IndentLine
  • IndentSpecialFirstLine
  • IndentSpecialHanging
  • IndentSpecialNone
  • UnIndent
  • UnIndentChar
  • UnIndentFirstChar
  • UnIndentFirstLine
  • UnIndentLine
  • IncreaseIndent
  • HangingIndent
  • UnHang
  • DecreaseIndent
  • AdjustListIndents
  • ListIndent
  • ListOutdent

インデントに関係ありそうなのはこんなところです。ずいぶんたくさんありますね。

とりあえず、前回((49)インデントとタブの密な関係))使ったコマンドは次のようになっています。

リボン「ホーム」の「インデントを増やす」コマンド:Indent
[Ctrl]+[T]キー(ぶら下げインデントを深くする):HangingIndent


【広告】
「ちょっと一息・アンテナハウスウェビナー」YouTubeのご案内。

Vol.1:Word文書をWebページにした例の紹介
Word文書を実際にWebページ(HTML)に変換した実例を紹介します。
Vol.2:Webページ構成要素別のWord編集例
Wordが持つ文書編集機能とWebページ作成時に必要となるHTMLタグがどのように対応しているかをご紹介します。
Vol.3:CSSによる、Webページのレイアウト
見栄えの良いWebページを作成するうえで必須のCSSについて、サンプルファイルを交えながら設定例をご紹介します。
Vol.4:Wordから上手にHTMLにする為の編集アドバイス
WordでWebページの原稿を作成するにあたり注意するべきポイントをご紹介します。


月曜日連載! Microsoft Wordスタイル探索
◆前回:(49)インデントとタブの密な関係
◆次回:(51)インデント関係コマンド(続き)
シリーズ総目次


月曜日連載! Microsoft Wordスタイル探索(49)インデントとタブの密な関係

前回((48)段落先頭行のインデント、タブの基本)は、タブ機能を使うと、字下げインデント、ぶら下げインデントと似たようなレイアウト指定ができることをお話しました。

今回はタブとインデントの関係をもう少し探索してみます。

まず、任意設定のタブ位置を次のように3文字毎に設定してみます。

任意設定のタブ位置を3文字毎にする

任意設定のタブ位置を3文字毎にする

そして、リボン「ホーム」の「インデントを増やす」コマンドでインデントを増やしてみます。すると、次の図のようにコマンドを一回クリックすると左インデント位置が任意設定の最初のタブ位置になります。そして、コマンドをクリックするごとに左インデント位置が任意設定の次のタブ位置に移動します。

インデントを増やすコマンドで左インデントが次のタブ位置に移動する

インデントを増やすコマンドで左インデントが次のタブ位置に移動する

タブ設定位置がインデントを増やすコマンドの左インデント位置として使われていることが分かります。

次は、ぶら下げインデントの場合です。まず、次のように任意設定のタブ位置を2文字毎に設定します。

任意設定のタブ位置を2,4,6,8文字に設定

任意設定のタブ位置を2,4,6,8文字に設定

次に、[Ctrl]+[T]キーを入力します。すると、次のようにぶら下げインデントが、最初の任意設定のタブ位置である2文字の位置になります。そして、[Ctrl]+[T]キーを入力するごとにぶら下げインデントの位置が深くなっていきます。

[Ctrl]+[T]でぶら下げインデントの位置が次の任意設定のタブ位置に移動する

[Ctrl]+[T]でぶら下げインデントの位置が次の任意設定のタブ位置に移動する

このようにインデント関係のコマンドとタブ設定位置には深い関係があることが分かりました。


【広告】
11月16日(火曜日)16時からの「ちょっと一息・アンテナハウスウェビナー」YouTubeのご案内。

Vol.1:Word文書をWebページにした例の紹介
Word文書を実際にWebページ(HTML)に変換した実例を紹介します。
Vol.2:Webページ構成要素別のWord編集例
Wordが持つ文書編集機能とWebページ作成時に必要となるHTMLタグがどのように対応しているかをご紹介します。
Vol.3:CSSによる、Webページのレイアウト
見栄えの良いWebページを作成するうえで必須のCSSについて、サンプルファイルを交えながら設定例をご紹介します。
Vol.4:Wordから上手にHTMLにする為の編集アドバイス
WordでWebページの原稿を作成するにあたり注意するべきポイントをご紹介します。


月曜日連載! Microsoft Wordスタイル探索
◆前回:(48)段落先頭行のインデント、タブの基本
◆次回:(50)インデント関係コマンド
シリーズ総目次


月曜日連載! Microsoft Wordスタイル探索(48)段落先頭行のインデント、タブの基本

第45回で説明した右インデントと左インデントは用紙の余白を規準にして段落全体の開始位置と終了位置を変更(設定)する機能です。

月曜日連載! Microsoft Wordスタイル探索 (45)インデント機能の基本

それに対して、段落の最初の行だけの開始位置を変更するインデントが字下げインデントとぶら下げインデントです。

一行目(先頭行)インデントの設定

一行目(先頭行)インデントの設定

次の図は字下げインデントとぶら下げインデントをそれぞれ1文字に設定した段落の例です。

字下げインデント、ぶら下げインデントの設定例

字下げインデント、ぶら下げインデントの設定例

字下げインデントは段落の始まりを分かりやすくするために使います。日本語のレイアウトでは段落の先頭を1文字字下げするのが一般的ですが、活字方式では行頭に空白文字を1文字置きます。Wordの段落でこのようなレイアウトをするときは段落の先頭に空白文字を入力しないで、字下げインデントを使う方が、いろいろと好都合です。

タブ
インデントと類似の機能にタブがあります。タブは行の中にタブ位置を設定しておき、タブ文字(タブキーで入力する文字)から始まる文字列の始まりをタブ位置に設定する機能です。タブ位置は「タブとリーダー」ダイアログを使って「既定のタブ位置」の変更、または任意の位置にタブ位置を設定できます。

任意に設定したタブ位置はルーラーに表示されます。次の図は2文字の位置にタブを設定した例です。

任意の位置にタブをタブの設定

任意の位置にタブを設定

段落の先頭で「タブ」を入力(Tabキーを押下)すると段落の先頭が2文字目から始まります。これは先頭行インデントと似ていますね。

段落の先頭にタブを入力

段落の先頭にタブを入力

「Ctrl」キーと「T」キーで、2行目以降をタブ位置に揃えることができます。これはぶら下げインデントに似ています。

段落の先頭で字下げのタブを入力

段落の先頭でぶら下げのタブを入力

このようにタブ機能を使うと、一見、字下げインデント、ぶら下げインデントと似たようなレイアウト指定ができます。


【広告】
11月16日(火曜日)16時からの「ちょっと一息・アンテナハウスウェビナー」YouTubeのご案内。

Vol.1:Word文書をWebページにした例の紹介
Word文書を実際にWebページ(HTML)に変換した実例を紹介します。
Vol.2:Webページ構成要素別のWord編集例
Wordが持つ文書編集機能とWebページ作成時に必要となるHTMLタグがどのように対応しているかをご紹介します。
Vol.3:CSSによる、Webページのレイアウト
見栄えの良いWebページを作成するうえで必須のCSSについて、サンプルファイルを交えながら設定例をご紹介します。
Vol.4:Wordから上手にHTMLにする為の編集アドバイス
WordでWebページの原稿を作成するにあたり注意するべきポイントをご紹介します。


月曜日連載! Microsoft Wordスタイル探索
◆前回:(47)本文領域の幅が文字数×文字サイズの値に一致しないときの余りの調整を探索
◆次回:(49)インデントとタブの密な関係
シリーズ総目次


Pages: Prev 1 2 3 4 5 6 7 8 9 10 ... 224 225 226 Next