< linkdetail01.htm > < indextable01.htm > < index.html >
<<< htmlstudy002.htm >>>
(KENT-San DREAM... 2024R06-0213-TUE-2300)
pとbrの使い方を知る事は基本で、WYSIWYG編集の中で扱いが難しい要の課題ともなりうるものです。両者の関係は、まず段落書式(h1~h6やdiv)やpの中にbrがある形になります。そしてpにはclass属性を付与できます。brは改行(ラインブレイク)です。改行でスペースを作るか、pで作るかを選択しなければいけません。class属性で範囲を枠線でくくれるpはとても便利です。テーブル以外の編集デザインは段落書式とこのpを優先します。
今は、CSSのpaddingプロパティーでスペースを作る手法もあるようです。
WYSIWYG編集~
Shift-Enterと、Enter:
Shift-Enterは<br>。Enterは<p>。
Delete(Del)かBackSpace(BS)かによって動作が違います。
<h1>–<h6>: HTML の見出し要素 - HTML: ハイパーテキストマークアップ言語 | MDN
https://developer.mozilla.org/ja/docs/Web/HTML/Element/Heading_Elements
CSSを用いた段落書式を超えたデザイン法~left。
padding-bottom - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/padding-bottom
CSSを用いた段落書式を超えたデザイン法~bottom。
brの挿入法:WYSIWYG編集でankerリンクの語尾にpを挿入しBackSpaceで消してShift+Enter Keyを押すと、aの外にbrを挿入できる。
BlueGriffonについて(バグ関連): わたんブログ
http://pc-watang.sblo.jp/article/185641911.html
半角スペース挿入のバグの回避。感謝です。
[ツール]-[オプション]-[ソース]タブの中の[折り返しを適用しない言語]を「ja」とします。そして、新しい文書のウィザードで作成するときに、言語を「ja」と指定します。ソースでは2行目の「<html lang="ja">」です。「ja_JP」にするならば、オプションの設定にもそう書き、「<html lang="ja_JP">」とします。
しかしまだ、ブラウザなどのHTMLの画面から、WYSIWYG編集画面に文字列のコピー&ペーストやカット&ペーストを行うと不要な空白が挿入される事があります。
(... 2022R04-0824-WED-1952)
BlueGriffonには多分バグがあるようです。外部スタイルシートに関するものです。CSSファイルが読み込めず追記ができません。テキストボックスを開けるのでそこに手動で書くことになります。
そもそも、このガイドではソースコードに手を入れることはしません。ソースコードに手を入れずBlueGriffonの機能だけでWebページ記述をすることを目的としています。
(... 2023R05-0515-MON-2117)
・Style作成と再指定:
・Styleのid属性とclass属性:
2022R04-0704-MON-1044. BlueGriffonを触りながら使い方を解剖し、HTML&CSSとともに学びます。
bluegriffon_study_015.htmlからの変更点。「エディットボックス」→「コンボボックス」。四角い枠で右端にボタンがついたボックスを「コンボボックス」と呼びます。「エディットボックス」は入力できるただの四角い枠です。コンボボックスの右 端のボタンを押すと下向きにリストが出ます。この動作を「ドロップダウン」または「プルダウン」と呼びます。
・pによるclass属性の指定:
・spanタグを挿入してclass属性を指定:
2022R04-0709-SAT-1913. tableの中でのあれこれ。混乱中です。
・すべての文字スタイルを削除:
・tableタグにclass属性を付加。解決:
2022R04-0720-WED-1045. tableタグにclass属性を付加。解決。
2022R04-0720-WED-1006. 「すべての文字スタイルの削除」
2022R04-0719-TUE-1821. 続2 tableです。tableにclass属性を付加する方法を探求します。
2022R04-0720-WED-1054. 続3 tableでの「width: 100%」のテスト。スマホ閲覧テスト。
・bodyでwidth:98%を設定:
・classの再編集:
・class指定の削除(styleの設定自体は消えない):
2022R04-0720-WED-1341. bodyにclass属性を指定します。「width:100%」です。
・記入URLの折り返し:
2022R04-0722-FRI-1711. ただ貼り付けるだけだと、URLの折り返しでwidthの%表示が乱れるので、テストページを制作しました。
・overflow-wrap: break-word; 大量テスト(記入URLで折り返し、widthの%表示を乱さない):
2022R04-0723-SAT-1657. overflow-wrap: break-word; (「任意箇所で折り返し」)の指定のない例。→ bodystyle_study_01_002tv.html
2022R04-0723-SAT-1011. 記入URLで折り返し。URL一覧のテストページ2。
・bodyでの基礎レイアウトの限界:
2023R05-1011-WED-1410. 禁断のソース編集。meta文の挿入。
・class属性を作成する準備:
・既存のclass属性の再指定:
・class属性の再編集:
・タグからclass属性を削除:
2022R04-0810-WED-1322. タグからclass属性を削除する方法。
2022R04-0724-SUN-0917. class属性の再編集の方法。
2022R04-0723-SAT-2047. 一次編集完了。
2022R04-0723-SAT-1824. まとめ:class属性の指定法と再指定法。
・外部CSSの作成と指定、閲覧方法:
・既存の外部CSSを流用するとき:
・HTMLを再編集しようとしても外部CSSにスタイルの追加ができずヘッダー部分にスタイルが記載されてしまうとき:
・CSSのテストです。上記調査の一環として、CSSのテストページを作成しました。
2022R04-0823-TUE-1440. CSSテスト第一弾。
2022R04-0818-THU-1750. 追記。
2022R04-0804-THU-1353. 既存の外部CSSを流用する。
2022R04-0725-MON-1350. 一次編集完了。
・divとspanでLine Break(改行)が入る入らないの意味:
2022R04-0810-WED-1830. 一次編集。
・hrタグ(水平線の引き方):
・文章を挿入するとき:
各種タグ解説です。順次追加していきます。
2022R04-0823-TUE-1316. 文章を挿入するとき。
2022R04-0810-WED-1930. hrタグ編集中。
・タグの削除とクラス要素の指定の削除:
気づいたこと。一時置き場。
2022R04-0819-FRI-2147. 一次編集完了。
・トークと談話:
2022R04-1009-SUN-1454.
2022R04-0909-FRI-1456.
・装飾を引き継がずに行を挿入する:
2023R05-0221-TUE-1151
・class属性の付与:
2023R05-0421-FRI-1636 class属性の付与。
・文の途中の文字列の色を変えたり文字装飾をする:
2023R05-1011-WED-0934 指定範囲をspanでくくる。
2023R05-0812-SAT-1227 文字装飾。
・BlueGriffonの専門用語:
2023R05-1011-WED-1239 作成。タグリストバー。
・枠を作り内部の背景を着色:
2024R06-0716-TUE-1331 作成。
<<< htmlstudy002.htm >>>