20211229

■記述上の注意
　htmlタグの引用をする際は、< > を 《 》に変換しておかないと 《pre》内であってエラーとなる
▼開発および改良計画項目
　環境設定→フォーマット→デフォルトスタイル選択（複数設定可能）→鉛筆→アウトラインメニュー→保存（一旦アプリ終了しないと反映されないことがある）

◉Cot Editor の HTML設定を編集・改良する
　環境設定→フォーマット→デフォルトスタイル選択（複数設定可能）→鉛筆→アウトラインメニュー→保存（一旦アプリ終了しないと反映されないことがある）

◉Cot Editor の HTML設定をバックアップする
　環境設定→フォーマット→デフォルトスタイル選択→歯車→"スタイル名"を書き出し

■階層をA4のメモに書いた別紙の通りとする

■《body id="body"》とする
　《header id="header"》とする
　《main id="main" class="container p-0 m-0;》とする
　《footer id="footer" class="container mt-0" style="margin-bottom:80px;"》とする
　《h1 id="h1"》とする

■《main "id=main"》内のセクショニングコンテンツの序列は
	《article id="article_id"》
	《section id="section_id"》
	《aside id="aside_id"》
	《nav id="nav_id"》
	とし、必須ではない aside と nav にも必ず idを付す
	《nav》をリンク集以外の用途に使うことは禁止
	それぞれのタグを閉じた次行に下例のようにid=を付したコメントを残す
	《/article》
	《!-- /article id="article_id" --》

■以下の属性は、必ずタグ要素名の直後に書く
	id=, area-labeledby= 以下が適用例
	《li id="navbarInternal" class="nav-item dropdown"》
	《div aria-labelledby="navbarInternal" class="dropdown-menu" .....

■井上オリジナルcssクラスセレクタは、".a_"をPrefixとして付し、class="" の直後に書く
	《p class="a_e_120 a_tc_660000 a_indent_5 mx-0 p-2"》
	
	
■指定案メモ
	（横組）32Q正体MM-A-OKL+E1324（和文ツメ欧文ベタ）
	
━━━━━━━━━━━━━━━━━━━━
▼▼テキスト周りで使えるCSSの小技
https://www.webcreatorbox.com/tech/css-tips-for-text
━━━━━━━━━━━━━━━━━━━━
▼テキストを選択する時の色を変更

::selection {
  background-color: #cf9;
  color: #000;
}

/* Firefox */
::-moz-selection {
  background-color: #cf9;
  color: #000;
}
━━━━━━━━━━━━━━━━━━━━
▼蛍光ペンで線を引いたような効果
strong {
  background: linear-gradient(transparent 30%, #fbd 30%);
}
━━━━━━━━━━━━━━━━━━━━
▼長いテキストを「…」で省略する
ul {
  list-style-position: inside;
}
li {
  width: 320px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
━━━━━━━━━━━━━━━━━━━━
▼番号リストの表現を変更
li {
  list-style: none;
  counter-increment : chapter;
}
li:before {
  content : "第" counter(chapter) "問";
  padding-right: 10px;
} 
━━━━━━━━━━━━━━━━━━━━
▼リンクの種類でアイコン変える
a {
  padding-left: 20px;
  margin-left: 5px;
}
/* 外部リンク */
a[href^="http://"]{
  background: url(http://webcreatorbox.com/sample/images/link.svg) no-repeat;
}
/* メール */
a[href^="mailto:"]{
  background: url(http://webcreatorbox.com/sample/images/email.svg) no-repeat;
}
/* PDF */
a[href$=".pdf"]{
  background: url(http://webcreatorbox.com/sample/images/doc.svg) no-repeat;
} 
━━━━━━━━━━━━━━━━━━━━
▼言語によってスタイルを変更
《html lang="ja"》
  《body》設定している言語で文字色を変更《/body》
《/html》
────────────────────
:lang(ja){ color: blue; }
:lang(en-US){ color: orange; }
━━━━━━━━━━━━━━━━━━━━
▼プリント時はURLを表示
《p》 HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ）、略記・略称：HTML（エイチティーエムエル）とは、ウェブ上の文書を記述するためのマークアップ言語である。文章の中に記述することでさまざまな機能を記述設定することができる。
 - Wikipediaより
《/p》
《p》 リンク先が#の場合、URLは表示されません。《/p》
────────────────────
@media print {
  a[href]:after {
    content: " (" attr(href) ") ";
  }
  a[href^="#"]:after,
  a[href^="javascript"]:after {
    content: "";
  }
}
━━━━━━━━━━━━━━━━━━━━
▼長いURLを途中で折返す
《p》word-break適用《/p》
《div class="word-break">
  http://www.thelongestdomainnameintheworldandthensomeandthensomemoreandmore.com/
《/div》
────────────────────
div {
  border: solid 1px #999;
  width: 300px;
  padding: 10px;
  margin-bottom: 30px;
}
div.word-break {
  word-wrap: break-word;
}
━━━━━━━━━━━━━━━━━━━━
▼先頭の文字を大きく
《p》
  Rapunzel grew into the most beautiful child beneath the sun. When she was twelve years old, the enchantress shut her into a tower, which lay in a forest, and had neither stairs nor door, but quite at the top was a little window. When the enchantress wanted to go in, she placed herself beneath this, and cried, "Rapunzel, Rapunzel, Let down your hair to me."
《/p》
《p》
  Rapunzel had magnificent long hair, fine as spun gold, and when she heard the voice of the enchantress she unfastened her braided tresses, wound them round one of the hooks of the window above, and then the hair fell twenty yards down, and the enchantress climbed up by it.
《/p》
────────────────────
p:first-child:first-letter {
  float: left; 
  color: #693;
  font-size: 55px;
  line-height: 50px;
  padding-right: 8px;
  font-family: Georgia, serif;
}