忍者ブログ

World of granshe.

HTMLやCSS、JavaScriptに関する話題を中心に、Web制作について知ったこと、覚えておきたいことをメモしておく個人的スペースです。
[96] [95] [94] [93] [92] [91] [90] [89] [88] [87] [86

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

CSSにできること―文章編

CSSにできること第二弾。今回は文章レイアウト編です。
前作:CSSにできること―文字(フォント)編

文章レイアウトに関することは、フォント系に比べてCSSにしかできない事が多いと思います。


1.文字同士の間隔を変更

word-spacingというプロパティでは、word、つまり単語同士の間隔を調整できる。英文では単語同士を(半角)スペースで区切るため、この半角スペースの幅を調整する機能と言ってもいいと思う。日本語では単語同士をスペースで区切ることがないので、効果はない。が、日本語でも、単語同士をスペースで区切ればword-spacingが機能する。

また、文字間を調整するletter-spacingというものもある。これは、英単語1文字、漢字1文字など、文字間を調整できる。

さらにフォント編でも述べたline-heightプロパティでは、行間の調整をすることができます。


2.文章のインデント(字下げ)

書籍では、段落の一番最初に1文字分マスが空き、そのあとに文章が続いていきます。この文章のように字下げを行うには、text-indentというプロパティを使用します。text-indentで指定した分だけ字下げされて文章が表示されます。


3.文章の配置

HTMLでは、align属性あたりで指定をしていた、文章の右寄せ、左寄せ、中央寄せの指定は、CSSではtext-alignで指定できる。値もHTMLとほぼ同じで、left、right、centerが指定できます。

 


4.文章の装飾

text-decorationというプロパティでは、テキストに関する装飾を指定できる。HTMLではuタグで指定していたアンダーライン、sタグで指定していた取り消し線などが指定できるようになっています。
ちなみに、この取り消し線を装飾ではなく、文章構造的な意味として「訂正前のもの」といったことを示したい場合は、CSSではなく、HTMLのdelタグを使ってください。

デフォルトスタイルシートでは、aタグに下線が表示されていますが、test-decorationの値にnoneを指定すると、下線を消すこともできます。


文章編は以上です。
次回は背景編です。

PR
この記事にコメントする
お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
この記事へのトラックバック
この記事にトラックバックする:
プロフィール
名前: ゆーり
職業: コーダー(模索中
趣味: Web制作
自己紹介: 某Web製作会社の入社5年目のマークアップエンジニア。専門はHTMLとCSSとMT(自称)。
カレンダー
08« 2017/09 »10
S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
ブログ内検索
忍者ブログ [PR]