< linkdetail01.htm > < indextable01.htm > < index.html >

HTMLSTUDY - The BlueGriffon Basics

<<< htmlstudy002.htm >>>


(KENT-San DREAM... 2024R06-0213-TUE-2300)

tack Developers Group Homepage!

WYSIWYG編集での課題の基本

pとbrの使い方を知る事は基本で、WYSIWYG編集の中で扱いが難しい要の課題ともなりうるものです。両者の関係は、まず段落書式(h1~h6やdiv)やpの中にbrがある形になります。そしてpにはclass属性を付与できます。brは改行(ラインブレイク)です。改行でスペースを作るか、pで作るかを選択しなければいけません。class属性で範囲を枠線でくくれるpはとても便利です。テーブル以外の編集デザインは段落書式とこのpを優先します。

今は、CSSのpaddingプロパティーでスペースを作る手法もあるようです。

<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の事前設定

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)

List of The BlueGriffon Guide

 bluegriffon_study_016.html

・Style作成と再指定:
・Styleのid属性とclass属性:

2022R04-0704-MON-1044. BlueGriffonを触りながら使い方を解剖し、HTML&CSSとともに学びます。

bluegriffon_study_015.htmlからの変更点。「エディットボックス」→「コンボボックス」。四角い枠で右端にボタンがついたボックスを「コンボボックス」と呼びます。「エディットボックス」は入力できるただの四角い枠です。コンボボックスの右 端のボタンを押すと下向きにリストが出ます。この動作を「ドロップダウン」または「プルダウン」と呼びます。

 htmltable_study_02_005.html

・pによるclass属性の指定:
・spanタグを挿入してclass属性を指定:

2022R04-0709-SAT-1913. tableの中でのあれこれ。混乱中です。

 htmltable_study_03_003.html

・すべての文字スタイルを削除:
・tableタグにclass属性を付加。解決:

2022R04-0720-WED-1045. tableタグにclass属性を付加。解決。
2022R04-0720-WED-1006. 「すべての文字スタイルの削除」
2022R04-0719-TUE-1821. 続2 tableです。tableにclass属性を付加する方法を探求します。

 htmltable_study_04_001.html

2022R04-0720-WED-1054. 続3 tableでの「width: 100%」のテスト。スマホ閲覧テスト。

 bodystyle_study_01_001.html

・bodyでwidth:98%を設定:
・classの再編集:
・class指定の削除(styleの設定自体は消えない):

2022R04-0720-WED-1341. bodyにclass属性を指定します。「width:100%」です。

 bodystyle_study_01_002.html

・記入URLの折り返し:

2022R04-0722-FRI-1711. ただ貼り付けるだけだと、URLの折り返しでwidthの%表示が乱れるので、テストページを制作しました。

 bodystyle_study_01_002t.html

・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。

 bodystyle_study_01_003.html

・bodyでの基礎レイアウトの限界:

2023R05-1011-WED-1410. 禁断のソース編集。meta文の挿入。

 classmake_study_01_001.html

・class属性を作成する準備:
・既存のclass属性の再指定:
・class属性の再編集:
・タグからclass属性を削除:

2022R04-0810-WED-1322. タグからclass属性を削除する方法。
2022R04-0724-SUN-0917. class属性の再編集の方法。
2022R04-0723-SAT-2047. 一次編集完了。
2022R04-0723-SAT-1824. まとめ:class属性の指定法と再指定法。

 external_style_test_01_001.html

・外部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_linebreak.html

・divとspanでLine Break(改行)が入る入らないの意味:

2022R04-0810-WED-1830. 一次編集。

 various_tags_01_001.html

・hrタグ(水平線の引き方):
・文章を挿入するとき:

各種タグ解説です。順次追加していきます。
2022R04-0823-TUE-1316. 文章を挿入するとき。
2022R04-0810-WED-1930. hrタグ編集中。

 noticed_01_001.html

・タグの削除とクラス要素の指定の削除:

気づいたこと。一時置き場。
2022R04-0819-FRI-2147. 一次編集完了。

 html_talks_01_001.html

・トークと談話:

2022R04-1009-SUN-1454.
2022R04-0909-FRI-1456. 

 insert_01_001.html

・装飾を引き継がずに行を挿入する:

2023R05-0221-TUE-1151

 add_class_attribute_01_001.html

・class属性の付与:

2023R05-0421-FRI-1636 class属性の付与。

 insert_span_01_001.html

・文の途中の文字列の色を変えたり文字装飾をする:

2023R05-1011-WED-0934 指定範囲をspanでくくる。
2023R05-0812-SAT-1227 文字装飾。

 technicalterm_bluegriffon_01_001.html

・BlueGriffonの専門用語:

2023R05-1011-WED-1239 作成。タグリストバー。

< BACK TO INDEXTABLE01 >

<<< htmlstudy002.htm >>>


CC BY tDG.