ホームページ勉強中

１、文字の配置指定・<DIV>の中に配置

■広い<div>の中に文字を配置したい時がある、どのようなコマンド(tagやcss)を使えばよいのだろうか。
 
文字を<span>tagで囲み、一生懸命cssで相対位置指定［rerative」をしようとしたがだめだった。 なぜなら<span>tagはインライン要素で、ブロック要素ではないから。

 そこで文字を<p></p>で囲みブロック要素にし、位置指定をしたらうまくいった。
 
 他にも方法があるかもしれないが、これも一つのやり方である。 尚枠線が出たので「none」を指定して消した。

marginを使うより 、position:abusolute；やrerativeを使い、top:**px; left:**px等を指示する方が良い。

■後日、ヘッダー内に「rerative」を使って文字を配置しようとしたらうまくいかなかった。
（ヘッダー上部に空白ができ解消されなかった、原因不明）、「abusolute」を使うとうまく配置された。

２、文字の配置指定・見出し<ｈ>の中に配置

■見出し<h>の中に文字を配置したい時がある、どのようなコマンド(tagやcss)をを使えばよいのだろうか。
padding-leftを使い文字を右に配置出来る。

３、文字の配置指定・上下、左右中央

■<p>の中に文字を書き、上下中央に配置したい時がある、<p>の高さを指定せずに、上下のpadding値を同じにする。

文字を左右中央に配置したい時は、text-align:center;を指定する。

４、リスト<ul><ol>等に関するCSS設定

ul,ol {
	margin: 0px 0px 0px 1em;
	padding: 0px;
}

５、行の間隔指定

■文章で行の間隔指定したい時は「line-height:1.9em;」（例）を指定すればよい。

文字の高さの倍数を入れる。

６、ブロック要素の枠線を消す

■枠線を消したい時はborder-styleをnoneに指定する

７、コメント記述

８、文字間にスペースを空ける

■「&ensp;」や「&emsp;」を並べる方法がある（半角スペース）。

「＆nbsp;は半角スペースとして使わない方が良い」を参考にさせて頂きました。
「&nbsp;」の本来の意味は,non-breaking spaceだそうです。

■単に文字間隔を開けるには「letter-spacing」ＣＳＳを使う。

■参考になる記事がありました、「【HTML入門】スペース(空白)を表示させる3つの方法」

■参考になる記事がありました、
<span style="margin-right: 8em;"></span>を使う方法。

９、リスト<li>の文字サイズを変更

■リストの文字サイズを変えたい時は
<li class="newStyle8"><a href="../index.html">トップページ</a></li>のように

<liの後にＣＳＳでフォントサイズを指定する方法がある

１０、ページに画像を配置し、コメントを書く

１１、改行の方法

■文章の後に<br>を書き込む

１２、画像(img)を入れたら、alt 属性を記入する

■img src="sample.gif" alt="かな、漢字も可みたい"

１３、<div>にfloat;leftやfloat:rightを使ったら、次にclear:bothを使い解除する

■解除しないと、大本の<div>要素にheight:auto指示がきかない。

■clear-bothを使う用途としては
１、hight:autoにした場合、hightがおかしくなる為。

２、「float要素」の次の「ブロック要素」を「float」から解除する為←（本来の用途）。

の２つの用途があるようです。

■「float(フロート)を解除する3つの方法」という非常に参考になる記事がありました。

１４、<p>～</p>内に<div>～</div>を入れてはいけない

■<p>～</p>内に<div>～</div>を入れてはいけない（文法上）

１５、css3のbox-sizing:border-box;が便利

１６、文字の縁取り （text-shadow）

■文字の縁取りのCSS（但し-webkit-text-strokeはＩＥに適用されない）。

「CSSのtext-shadowだけで文字の縁取りをする方法」というWebサイトを参考にして頂きました。

「文字に影を付け、画像に重ねた文字を見やすくするCSS3」という記事もありました。

■「文字に縁取りするノ」というソフトも有る（シェアウエア　660円）ので参考に（但し画像形式）。

■「フリーフォントで簡単ロゴ作成」というサイトがありました（但し画像形式）。

■条件を設定すれば簡単に影付き文字を作れる「CSS3 Text Shadow Generato」という記事がありました。

■「text-shadowジェネレーター」というshadowのコードを作成するサイトがありました。

■指定方法（例）

-webkit-text-stroke-color: red;
-webkit-text-stroke-width: 1px;
text-shadow: blue -2px 0px 1px, 
	           blue  2px 0px 1px,
	           blue 0px 2px 1px, 
	           blue 0px -2px 1px;
	 

上のスタイルの表示例

影付き文字

■尚、-webkit-text-stroke-width: **px;の大きさは2.0以下が良いように思える（フォントサイズによる）。

  又、Internet Explorerは対応してない故、text-shadowとセットで使うと良い。
  文字の内側に線が作られる。

■text-shadowはGoogle Chromeの検証で数値を変えて検証できます。
  多くの色を重ねるとかえって汚くなるみたいです。
  文字の外側に線が作られる。

１７、tableの<tr>や<td>にはalign="left"やvalign="top"等を指定、既定値の文字位置は中央

■知らないで上記　table内、画像や文字の配置時てこずった。

 「セル内の文字の位置を指定する」 というWebサイトを参考にして頂きました。

１８、画像等の「フォルダー」指定

■画像指定で、上の「フォルダー」にある時は「../」。

もう一つ上の「フォルダー」にある時は「../../」をつける。

画像の絶対指定例	url("http://aaa.com/img/sam.gif");
画像の相対指定例	同一フォルダーにある画像	url("sam.gif");
〃	上のフォルダーにある画像	url("../img/sam.gif");
〃	下のフォルダーにある画像	url("img/sam.gif");

参考になるサイトがありました
・「相対パス・絶対パス」

１９、背景画像の位置を固定する

■背景画像の位置指定は「background-position」で指定、画像の位置が安定する。
Ｘ、Ｙに０％指定の時は左端、上端。

 「スタイルシートリファレンス/background-position」というＷｅｂサイトを参考にして頂きました。

２０、背景画像を含む<div>要素にoverflow:hiddenを指定

■背景画像を含む<div>要素で（上部タイトル画像）、背景画像は縦、横100%を指定し、<div>の縦横にautoを指定していたが、表示が不安定になった。
 
そこで<div>の縦の長さを固定(**px)し、overflow:hiddenを指定した、表示が安定した。

２１、サムネイル画像拡大表示のライトボックス(lightbox)の設置方法

■サムネイル画像を画面中央に拡大表示したい時、ライトボックスを使えば便利。
 
「日本一わかりやすいライトボックス(lightbox)の設置と使い方」（現在リンク切れ） というＷｅｂサイトを参考にして頂きました。

尚サムネイル表示する時、画像ファイル名に「半角アンダーバー"_"」を使ったら表示できなかったので数字に置き換えたら表示できた、原因不明。

２２、インライン要素をブロック要素にする

■インライン要素をブロック要素にするには display:block;を使う。

２３、h1～h6,ol,li,p等のCSS指定は工夫が必要

■（以下の項目についてCSSの書き方は今後の勉強課題です、間違いがあるかも知れません）。
 
h1～h6,ol,li,p等のTAGはページで多用するので,次のように直接指定すると汎用出来なくなる。
（例） h2 { background-color:red;}とするとh2要素が使えない所が出てくる。
 
こういう場合は次の様に変更する。
h2のCSSから汎用性のないstyleを削除し、新しいcss styleを作成し（例style1)、HTMLに次のように記入する。
h2 class="style1">文字</h2>

（未検証）
又、次のような指定方法もある、セレクター間に半角スペースを入れる。
（例）
div#a-box h2{color:red;}
#a-box指定div内のh2要素のみに赤を適用

「[CSS]ちょっとだけ複雑なセレクタの指定方法」 というＷｅｂサイトを参考にして頂きました。

２４、CSSのタイプと指定方法

■子孫セレクター （例）
　　#abcd p　（スタイルシートを指定）・・意味：ID指定(#abcd)されている要素<p>のスタイルを指定する。尚、要素ｐの前は半角スペース。

■インラインスタイルシート（例）
　　<p style="color:red">赤の文字</p>

<p class="style-a style-b style-c">あいうえお</p>

.style-a:{
   width:400px;
   height:50;
   padding:20px 20px 20px 4em;
   }
.style-b:{
  background-coler:orange;
  }
.style-c:{
  coler:red;
  font-weight:bold;
  }

２５、リスト　liの番号を途中から変更

■リスト　liの番号を途中から変更したい時はvalueを使う。
（例No11）
<li value="11">文字</li>

２６、文字サイズ

２７、CSSやHＴＭＬを整形出来るサイト

２８、アスタリスク（*）ＣＳＳは要注意

■CSSに、アスタリスク（*）がある。これはすべてのHTML要素に適用されるそうだ。

これをいつのまにか知らずに使っていたが、(*)の設定内容がいつのまにか変わり ホームページがくずれたので、（*）をCSSから削除した。 　　　

２９、TAGやコメントの位置により表示に隙間が出る事がある

 <p class="taitol_sita_aki">
</p>
</div>
 <!-- div-no-002 終わり-->
<table class="table-01" style="width: 100%">

<p class="taitol_sita_aki"></p>
</div> <!-- div-no-002 終わり-->
 <table class="table-01" style="width: 100%">  

３０、インラインスタイル複数指定の書き方

■（例）    <p style="font-size:14px;color:#f00;">　

３１、特殊文字

■特殊文字に関してある程度の知識が必要、特にコードで編集する時など

３２、web　構成の方法（参考）

■（例）ホームページ初心者にとって、ページごとのＣＳＳ（スタイルシート）の構成をどのようにしたらよいのか、良く分からない。

ＷＥＢで検索したら参考になるサイトがあったので書き記します。

■index.htmlがないと、各フォルダーが丸見えになる場合もありうるとの事、要注意。
参考にさせて頂きました。
　●フォルダ内の最初のファイル名をindex.htmlにするわけ。
　●ホームページのディレクトリを見るには（緊急!!）

　

３３、ＳＥＯ対策

３４、FFFTPにてファイルのアップロードに関して

■ホームページ内のファイルをサーバーにアップロードでFFFTPを使わさせていただいている。

ファイル数個をアップロード（ミラーリングアップロードではない）する場合、右のホスト側と左のローカル側はフォルダーは一致させておく必要がある。

３５、「DIV」を左右中央に配置、及び右に配置

■ホームページ内のＤＩＶ要素を中央に配置。
CSSでmargin-left:auto; margin-right:auto;を設定する。
又、右端に寄せたい時は、CSSでmargin-left:auto; margin-right:0px;を設定する。

３６、width指定の考え方

■ホームページでDIV要素等の横幅にwidthを指定するが、自分が今迄考えていた寸法と異なっていた。
widthは一番外側の寸法ではなくPaddingの内側寸法の事のようである。

３７、画像(jpg等)のファイル名に漢字やかなを使わない事

■画像(jpg等)のファイル名に漢字やかなを使わない事。

後でFFFTPを使ってサーバーにアップロードする時、アップロード出来ない。

３８、HPのdivフレームで、divをflatで２つ横並べする時

■divをflatで２つ横並べする時はflat:leftとflat:riteを使う方法と、
flat:leftを２つ使う方法がある。

３９、margin及びpaddingの設定順序

■margin及びpaddingの設定順序は「①top→②right→③bottom→④left」

「要素の検証」の時、覚えておかないと変更出来ない。

４０、画像を左右中央に配置

■画像を画面の左右中央に配置するにはＣＳＳで
display-block
margin-left:autko
margin-right:auto
を設定する

４１、FFFTP送信は「上書き」で送る

■ホームページを変更しサーバーに送信する時、FFFTPを使用しているが、「新しければ上書き」で送信しても内容が変わっていない時がある。

その時は「上書き」で送ると反映される場合がある。

４２、position css

４３、HTML内にTAGをtex表示したい時

■HTML内でTAGをテキスト表示したい時は<pre></pre> タグで囲む。
但し、[<]は[&lt;]、[>]は[&gt;]に置き換えた方が良い。
HTMLのコードエラーが出る。

又、<pre>はブロック要素との事、従って<p>タグ内に書いてはいけない。

尚、pre内のコードが枠内からはみ出る場合の対処CSSが書いてあり、助かりました。
「preタグ内のコードをボックス枠内で折り返すcss」。

４４、擬似クラス ＣＳＳ

４５、link時にtarget="_blank"をつける

■link時にtarget="_blank"をつけると、リンク先を新しいウインドウで表示出来るので良い。
同じウインドウで表示する場合はつけない。

尚、blankの前にはアンダーバー「　_　」が必要みたいです。

「リンク先ページの表示ウインドウを指定する」というＷｅｂサイトを参考にして頂きました。

又targetの前にも半角スペースが必要との事。
「リンクのhtmlタグ」というＷｅｂサイトを参考にして頂きました。

■但し、target="_blank"はセキュリティのリスクがあるそうです。
その為、rel="noopener"を追加すると良いとの事。
「" target="_blank" rel="noopener"」

４６、<li>の中に<li>を記入

<li>ここに表題の文字を入力
   <ul>	　 
        <li>文字列＊＊＊</li
        <li>文字列＊＊＊</li> 
        <li>文字列＊＊＊</li>
  </ul>
</li>

４７、<p>の中の文字が中央に配置トラブル

■要素<p>の中の文字が左端ではなく、中央に配置するトラブルが発生した。
原因が当初よく分からなかった、調べていくと要素<body>にcssでtext-align:center;が設定してあった。

４８、line-height、vertical-align、text-align、等について

■line-height、vertical-align、text-align、等について学ぶ。

４９、CSSによる崩れない段組

■「CSSによる崩れない段組」を参考にしていただきました。非常に勉強になりました、この段組もこれを活用させて頂きました。

1. 左右に<div>を配置したい時は先に「NAVI」の側のHTMLを記入し、幅を指定しfloat-leftないしrightを行う。
   
   
2. 次の「MAIN]の<div>はfloatもwidthも指定せず、先の「NAVI」の<div>に指定した幅＋αだけmargin-left又はrightを指定する。
   paddingではだめ。そうすると元のdiv内にぴったりおさまる。
   
   
3. 以上のポイントは
   • HTMLで「NAVI」側を先に書く（仮に右側配置であっても先に書く）
   • 「NAVI」側にwidthとfloat-left、かfloat-rightを指定
   • 「MAIN側」はwidthとfloatは設定しない、margin-left又はright（「NAVI」のwidth値）を指定する。
   

５０、<li>に画像をつける

■リスト（ｌｉ）に画像のマークをつける方法
（１）CSSで　list-style-type: none;を指定

（２）CSSで　list-style-image: url(リスト画像);を指定。

■「リストの先頭にフォントでマーク表示！画像を付けるのはもう古い！」という記事がありました。

５１、画像に「ぼかし」を入れる

■ＷＥＢページに画像を入れしかも文字等に「ぼかし」を入れたい時がある。
フリーソフトの「モザイク専用＋ぼかし専用」を使えば簡単。

５２、非推奨要素と非推奨属性

■HTML TAGも使えない属性の変化があるので注意。
特に今回は画像に対する要素と属性に変更があるので気付きました。
「非推奨要素と非推奨属性」というＷｅｂサイトを参考にさせて頂きました。

５３、画像に対するＣＳＳに関して

■画像はブロック要素でなくインライン要素という事です。

画像をページにどのように配置すればいいかあやふやな知識でしたので今回学んだ事を書きます。

使えるスタイル要素

５４、画像ファイルを<p>や<div>の横幅いっぱいに収める

■画像を<div>の幅いっぱいに収めたい時がある。単純に画像をdiv内に入れると、画像の横幅の大きさに迄拡大されてしまう。
又widthにて指定すると横幅を％指定しているdivだとＰＣの画面の拡大等に対処できない。

その対処方法は<img>に100%指定すればよいとの事。

「ウインドウ幅に合わせて画像サイズを変化させる方法」というＷｅｂサイトを参考にさせて頂きました。

５５、<html>の構成（参考）

■<html>の構成を参考に書いてみた。

５６、文字サイズ指定、注意

remを使うと良いとの記事がありました「CSS3の新単位「rem」で文字サイズを分かりやすく指定」
（例）　 　
remを下に記入する。

５７、divの前の隙間、行間の長いコメントを消すと直った

■divの前にに隙間が開いていて原因が分からなかった、コメントを消すと直った。

後で別の画面でテストしてみたが、おこらなかった（従って原因不明）。

５８、スクロールの途中でサイドバーが消えないよう固定する

■「スクロールの途中でサイドバーが消えないよう固定する」を参考にしてスクロールバーを作成させていただきました。

５９、見出しタグ（<h2><h3>等）の長さを文字の長さに合わせる

■見出しタグはＰタグと同じで、画面の幅いっぱいに広がる、文字の長さに自動調整するには（display:inline）を指定する。

６０、文字が枠内からはみ出る場合がある

■文字が枠内からはみ出ることがありました。CSSで「style="word-break:break-all"」を使えば良いそうです。
「ブロックから文字がはみ出してしまう対処法」を参考にさせて頂きました。

■ 「CSS 半角英数の連続文字が折り返すようにする」も参考にさせて頂きました。

■ 逆に、日本語を文の途中で改行したくない時は、「style="word-break:keep-all"」を使えば良いようです。

６１、css   font-familyに関して

■今迄はフォント指定は１種類のみだと思い、１つのみ指定していました。
所がfont-familyの名の示すように複数のフォントが指定出来 、しかも左から優先順位だそうです。

（例） font-family: メイリオ, Arial, Verdana, "ＭＳ Ｐゴシック", sans-serif;
「フォントファミリー」で検索するといろいろ説明が出ると思います。

非常にわかり易く書いてあるサイトがありました、「font-familyの書き方まとめ」

■「font-familyの説明がありました」、Safariは日本語は認識しないとの事。

■「Font-familyメーカー」がありました。

６２、DIV内にDIVの配置検証

■DIV内にDIVを配置する場合、margin等を設定していたら、widthに100%設定をしたら右にはみ出す事が分かった。widthにautoを設定したら中におさまる。

６３、画像のサイズ指定(pxと%)

画像<img>に対するサイズ指定には「px」と「%」がある。

「px」はそのまま指定したpx値で表示されるが、
「%」指定は、元の画像サイズの%ではなく、画像を囲んでいるいる枠に対する%で表示される。

従って枠の大きさが変化する（例えば,widthが%指定の枠）場合は、画像の大きさも変化する。

６４、リスト＆定義型リスト

リスト＆定義リストのコードの書き方は次の通り、すぐ忘れるので記入しました。

定義リストに関し詳しく書いてあるサイトがありました、
「定義リスト<dl><dt><dd>を使いこなす！」

<dd></dd>内には他の要素を入れる事が出来るそうです。

６５、スマホ対応のホームページ作成

良い記事がありました、後日学びたいと思います、「ブラウザの幅に合わせて表示を自動変更する」

６６、画像のサイズ指定(枠からはみ出さない指定)

現在はスマホの普及で画面サイズを小さく表示する場合がある。
その場合画像サイズを原寸のpxで指定すると、枠からはみ出たりする。

現在は当面つぎのようにstyleを指定しています。
<img alt="**" src="**.jpg" style="max-width:100%;height:auto;">

（尚画像の基本指定方法は
（例）<img alt="**" src="**.jpg" width:"200";height:"100">

pxは省略可、%は省略不可

サンプル画像　　

６７、背景画像 backgroundに関して

６８、文章で２行目からインデントをつけたい時

.indent {
text-indent: -1em;
padding-left: 1em;
width: 250px;
background-color: #99FF99;
     }

６９、コメント<!-- -->の書き方

他の方のhtmlコメント書き方の参照例です

<div class="2topNavi">...</div>
<!-- /.topNavi -->

</div>
<!-- /main -->

</div>
<!-- /#contents -->
				  				  

他の方のcssコメント書き方の参照例です。
いい書き方だと思います。

/*===================================
 *  ヘッダー
 ====================================*/

/*===================================
 *  スマートホン向けデザイン
 ====================================*/
@media screen and (max-width:768px){
#nav{
 flort: none;
 width: 100%
}

７０、リンク文字の範囲を拡大

.textlink a {
display:block;
width:200px;
padding:10px;
}

７１、文章内アンカーへジャンプ

<a name="abc">文字</a>

<a href="#abc">文字</a>

<要素名 id="abc">
又は
<a id="abc">文字</a>

<a href="#abc">文字</a>

７２、Webフォント

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

<i class="fas fa-chevron-circle-right" style="font-size: 150%;"></i>

７３、文字の幅に<p>の幅を合わたい時

７４、htmlの文法チェック

７５、div(header)内にh1を左右中央配置

　h1{							  　
position: relative;
 margin-right: auto;
margin-left: auto;
}

７６、inlineやblock

７７、要素を左右・上下中央に配置

７８、Web読込みスピードチェック

７９、四角に丸みをつける

８０、プロパティのプラウザ適合状況が分かる

８１、禁則処理

８２、Link Checker