土曜日, 10月 14, 2023

HTMLとCSSの様々な表現 02　
HTMLとCSSだけでテキストの段落設定

HTMLとCSSだけでテキストの段落設定は箱物設定ですね（^o^）

<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="links/rule.css">
</head>
<body>

<div id="main-box">
<div id="column-box">
<div class="section">
<p class ="column_text">
デザインにおいては、素朴な疑問や、ちょっとした遊び心、「もしかしたら逆の設定にした方が面白いかもしれない」という発想は大切にするべきです。誰かが言ったから、「そのように感じる」あるいは「そのように感じると思い込まなくては」という結論を安易に導いてはいけません。あくまでも自分のセンスで感じ、結論を導き出さなくてはなりません。そして、その結論を自分の中の定番とせずに、それすらも疑問に感じる姿勢で、たえず色々な可能性と発想をひねり出す訓練が大切です。
そんなわけで、私はタブーや正論破りを積極的に実験することが好きです。もちろん、それをやみくもに仕事に取り入れてしまうのは賢くありません。大切なのは実験と小出しの繰り返しです。つまり、少しずつ実験を繰り返し、あたりさわりのない部分で少しずつ実行に移してみるという流れです。
アイデアは意外なところに転がっています。時にそれらは専門外の、それもまったく意味のないような世界にあったりするものです。コンピュータの前に座ってばかりいないで、外に出ることが大切です。そして、色々な刺激を体で感じることが重要です。そんなことの繰り返しで、何かのスイッチがオンになることがあります。
たとえば、私はカーテン生地の模様から本文組みに長体や平体を使うことを思いつきました。ある日、突然閃いたという感じでしたが、そこに行き着くまでにはかなりの時間を要しました。それは、写植時代に埋め込まれてしまった長体や平体処理への固定概念が、大きな壁となって立ちはだかっていたからです。もっとも、イメージがわいたのは写植時代であり、そう簡単に実験ができる状況ではありませんでしたので、本格的な実験ができるようになったのは、デジタル化されてからのことです。
</p>
</div>
</div>
</div>
<center>
<p class ="quote_text">
<a href="https://www.screen.co.jp/ga_product/sento/pro/index.html">
タイポグラフィーの世界「組版外伝」より</a></p>
</center>
</body>
</html>
<!-- index.html -->

/* rule.css */
@charset "UTF-8";
* {
margin: 0px;
padding: 0px;
}
body {
background-color: #87cefa; /*lightskyblue */
}
div#main-box {
/* 黄色の外枠 */
position: relative; /* 相対配置 */
width: 800px;
height: 400px;
background: #ffffe0; /* lightyellow */
margin: 100px auto 20px auto;
}
div#column-box {
/* ピンクの文字の納まる範囲 */
position: relative; /* 相対配置 */
width: 760px;
height: 360px;
background: #ffc0cb; /* pink */
top: 20px; /* 上の空き */
left: 20px; /* 左の空き */
right:20px; /* 右の空き */
}
.section {
/* テキストの段落設定 */
height: 360px;
column-count: 3; /* 段落数 */
column-gap: 30px; /* 段落の間隔 */
column-fill: auto; /* 段落の揃え方 */
column-rule-style: solid; /* 罫線種 */
/*
column-rule-style: none; 罫線未表示
column-rule-style: hidden; 罫線未表示
column-rule-style: dotted; 点線表示
column-rule-style: dashed; 破線表示
column-rule-style: solid; 1本の実線表示
column-rule-style: double; 2本の実線表示
column-rule-style: groove; 凹み線表示
column-rule-style: ridge; 凸み線表示
column-rule-style: inset; 内部が凹んだ線表示
column-rule-style: outset; 内部が凸っだ線表示
*/
column-rule-width: thin; /* 線種 */
/*
column-rule-width: thin; 細い罫線
column-rule-width: medium; 普通の罫線
column-rule-width: thick; 太い罫線
column-rule-width: 数値 単位; 数値指定
*/
column-rule-color: tan; /* 線カラー */
/*
column-rule: none 0px red;
*/
}
p.column_text {
/* テキストのサイズ、行間、色 */
margin-top: auto; /* マージン設定 */
font-size: 14px; /* サイズ Black */
color: #000000; /* 文字色 */
text-align: justify; /* 配置設定 */
text-justify: inter-character; /* 両端揃えの種類 */
/*
text-justify: は・・・
text-justify: none；
無設定。

text-justify: auto；
ブラウザーにお任せ設定。

text-justify: inter-word；
単語間に間隔を挿入してword-spacing を変化させる。
英語やのように、空白で単語を区切る言語に適している。

text-justify: inter-character；
文字間に間隔を挿入してletter-spacing を変化させる。
日本語のような言語に最も適している。

text-justify: distribute；
inter-character と同じ。
*/
line-height:20px; /* 行間 */
}
p.quote_text {
/* 元テキストのリンク設定 */
margin-top: auto; /* マージン設定 */
font-size: 10px; /* サイズ */
color: #000000; /* 文字色 Black */
line-height:15px; /* 行間 */
}
/* rule.css */

上は、
div#main-box
div#column-box
の設定無しで
.sectionだけで処理した結果。ブラウザーの表示サイズに依存ます。

div#main-box（黄色の矩形）
div#column-box（ピンク色の矩形）
を設定。

ピンク色の部分にテキストを入れた状態。

ピンク色を消せば、黄色の矩形の中に自然に配置（しているように）表示できます。
投稿者 時刻:
ラベル: , ,