このページはホームページ作成で自分が学んだ事を書くつもりです(ノート代わり)。 間違いがあるかもしれません。
1、文字の配置指定・<DIV>の中に配置
■広い<div>の中に文字を配置したい時がある、どのようなコマンド(tagやcss)を使えばよいのだろうか。
文字を<span>tagで囲み、一生懸命cssで相対位置指定[rerative」をしようとしたがだめだった。 なぜなら<span>tagはインライン要素で、ブロック要素ではないから。
そこで文字を<p></p>で囲みブロック要素にし、位置指定をしたらうまくいった。
他にも方法があるかもしれないが、これも一つのやり方である。 尚枠線が出たので「none」を指定して消した。
marginを使うより 、position:abusolute;やrerativeを使い、top:**px; left:**px等を指示する方が良い。
■後日、ヘッダー内に「rerative」を使って文字を配置しようとしたらうまくいかなかった。
(ヘッダー上部に空白ができ解消されなかった、原因不明)、「abusolute」を使うとうまく配置された。
(position css)
CSS | 記事 |
---|---|
static | 初期値、配置方法は指定しない、top,bottom,left,rightは無効(position無効)。 |
relative | 相対位置指定、本来その要素が配置される位置(static)が基準(親要素の左上ではない)。 |
absolute | 絶対位置指定。親要素にstatic指定時はウインドウ全体の左上。 他の時は親要素の左上、(親要素にrelativeを指定しておく事)。marginは無効。 |
fixed | absoluteと同じ、但し位置固定 |
inherit | 親要素の設定を継承 |
ちなみに上下関係を指定する、z-indexは数値が多きい方が上(整数 -*~*)
2、文字の配置指定・見出し<h>の中に配置
■見出し<h>の中に文字を配置したい時がある、どのようなコマンド(tagやcss)をを使えばよいのだろうか。
padding-leftを使い文字を右に配置出来る。
3、文字の配置指定・上下、左右中央
■<p>の中に文字を書き、上下中央に配置したい時がある、<p>の高さを指定せずに、上下のpadding値を同じにする。
文字を左右中央に配置したい時は、text-align:center;を指定する。
4、リスト<ul><ol>等に関するCSS設定
「リスト全体の余白を調整する」という役立つ記事がありました。
ul,ol { margin: 0px 0px 0px 1em; padding: 0px; }
5、行の間隔指定
■文章で行の間隔指定したい時は「line-height:1.9em;」(例)を指定すればよい。
文字の高さの倍数を入れる。
6、ブロック要素の枠線を消す
■枠線を消したい時はborder-styleをnoneに指定する
7、コメント記述
- HTMLコメント
<!-- 注釈文 --> - CSSコメント
/* 行コメント */
尚 /*の後、*/ の前は半角スペース
複数行のコメントも可能
8、文字間にスペースを空ける
■「 」や「 」を並べる方法がある(半角スペース)。
「&nbsp;は半角スペースとして使わない方が良い」を参考にさせて頂きました。
「 」の本来の意味は,non-breaking spaceだそうです。
■単に文字間隔を開けるには「letter-spacing」CSSを使う。
■参考になる記事がありました、「【HTML入門】スペース(空白)を表示させる3つの方法」
■参考になる記事がありました、
<span style="margin-right: 8em;"></span>を使う方法。
9、リスト<li>の文字サイズを変更
■リストの文字サイズを変えたい時は
<li class="newStyle8"><a href="../index.html">トップページ</a></li>のように
<liの後にCSSでフォントサイズを指定する方法がある
10、ページに画像を配置し、コメントを書く
- 画像とコメント各々を<p>又は<div>で囲む
- 画像の<p>にfloat:leftとwidthを設定
- コメントの<p>にfloat:leftとwidthを設定
- 全体の後に空の<p style="clear:both"></p>を設定
「float指定の基本」という分かり易い記事がありました。
11、改行の方法
■文章の後に<br>を書き込む
12、画像(img)を入れたら、alt 属性を記入する
■img src="sample.gif" alt="かな、漢字も可みたい"
13、<div>にfloat;leftやfloat:rightを使ったら、次にclear:bothを使い解除する


■clear-bothを使う用途としては
1、hight:autoにした場合、hightがおかしくなる為。
2、「float要素」の次の「ブロック要素」を「float」から解除する為←(本来の用途)。
の2つの用途があるようです。
■「float(フロート)を解除する3つの方法」という非常に参考になる記事がありました。
14、<p>~</p>内に<div>~</div>を入れてはいけない
■<p>~</p>内に<div>~</div>を入れてはいけない(文法上)
15、css3のbox-sizing:border-box;が便利
- box-sizing:border-boxを指定するとうまくいくとの事、(但しmarginは含まない)。
box-sizing:border-box;
「width崩れ、カラム落ちにはこれ」というWebサイトを参考にして頂きました。
「横幅を100%にした際、親ボックスからはみ出すのを防ぐ」というWebサイトを参考にして頂きました。
- 但し、Microsoft expression web 4 は未対応(?)なのか、デザイン表示がうまくいかない。
Web上ではうまくいく。パソコンの解像度に対応する為%指定してみたりした。
(下記36番WIDTH指定の考え方 を参考)。
- 結論: NO49「CSSによる崩れない段組」を利用した。 、但し部分的に使用した。
16、文字の縁取り (text-shadow)
■文字の縁取りのCSS(但し-webkit-text-strokeはIEに適用されない)。
「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の検証で数値を変えて検証できます。
多くの色を重ねるとかえって汚くなるみたいです。
文字の外側に線が作られる。
17、tableの<tr>や<td>にはalign="left"やvalign="top"等を指定、既定値の文字位置は中央
■知らないで上記 table内、画像や文字の配置時てこずった。
「セル内の文字の位置を指定する」 というWebサイトを参考にして頂きました。
18、画像等の「フォルダー」指定
もう一つ上の「フォルダー」にある時は「../../」をつける。
画像の絶対指定例 | url("http://aaa.com/img/sam.gif"); | |
画像の相対指定例 | 同一フォルダーにある画像 | url("sam.gif"); |
〃 | 上のフォルダーにある画像 | url("../img/sam.gif"); |
〃 | 下のフォルダーにある画像 | url("img/sam.gif"); |

参考になるサイトがありました
・「相対パス・絶対パス」
19、背景画像の位置を固定する
■背景画像の位置指定は「background-position」で指定、画像の位置が安定する。
X、Yに0%指定の時は左端、上端。
「スタイルシートリファレンス/background-position」というWebサイトを参考にして頂きました。
20、背景画像を含む<div>要素にoverflow:hiddenを指定
■背景画像を含む<div>要素で(上部タイトル画像)、背景画像は縦、横100%を指定し、<div>の縦横にautoを指定していたが、表示が不安定になった。
そこで<div>の縦の長さを固定(**px)し、overflow:hiddenを指定した、表示が安定した。
21、サムネイル画像拡大表示のライトボックス(lightbox)の設置方法
■サムネイル画像を画面中央に拡大表示したい時、ライトボックスを使えば便利。
「日本一わかりやすいライトボックス(lightbox)の設置と使い方」(現在リンク切れ) というWebサイトを参考にして頂きました。
尚サムネイル表示する時、画像ファイル名に「半角アンダーバー"_"」を使ったら表示できなかったので数字に置き換えたら表示できた、原因不明。
22、インライン要素をブロック要素にする
■インライン要素をブロック要素にするには display:block;を使う。
23、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]ちょっとだけ複雑なセレクタの指定方法」 というWebサイトを参考にして頂きました。
24、CSSのタイプと指定方法
HTML | CSS | 備考 | |
class指定(例) | <p class="aka">文字</p> | .aka{color:red;} | そのCSSを要素に何度でも使える |
id指定
(例) |
<p id="aka">文字</p> | #aka{color:red;} | そのCSSを要素に1度しか使えない |
■子孫セレクター (例)
#abcd p (スタイルシートを指定)・・意味:ID指定(#abcd)されている要素<p>のスタイルを指定する。尚、要素pの前は半角スペース。
■インラインスタイルシート(例)
<p style="color:red">赤の文字</p>
class名に半角スペースを空けて指定(下記はpに3つ指定)
HTML
<p class="style-a style-b style-c">あいうえお</p>CSS
.style-a:{ width:400px; height:50; padding:20px 20px 20px 4em; } .style-b:{ background-coler:orange; } .style-c:{ coler:red; font-weight:bold; }実際の表示
あいうえお
■「【CSS】超入門!超分かるCSSセレクタ!」という分かり易い記事がありました。
25、リスト liの番号を途中から変更
■リスト liの番号を途中から変更したい時はvalueを使う。
(例No11)
<li value="11">文字</li>
26、文字サイズ
(標準フォントは16px)
文字の大きさ(目安) | h1~h6 | px | em |
文字サイズ | h1 | 32 | 2 |
文字サイズ | h2 | 24 | 1.5 |
文字サイズ | h3 | 18 | 1.12 |
文字サイズ | h4 | 16 | 1 |
文字サイズ | h5 | 12 | 0・75 |
文字サイズ | h6 | 10 | 0.62 |
文字の大きさ | スタイル | 備考 |
文字サイズ | xx-large | |
文字サイズ | x-large | |
文字サイズ | large | 1.2倍 |
文字サイズ | medium | 標準 |
文字サイズ | small |
文字の大きさ(目安) | px | em |
文字サイズ | 20 | 1.25 |
文字サイズ | 19 | 1.18 |
文字サイズ | 18 | 1.12 |
文字サイズ | 17 | 1.06 |
文字サイズ | 16 | 1 |
文字サイズ | 15 | 0.93 |
文字サイズ | 14 | 0.87 |
文字サイズ | 13 | 0.81 |
文字サイズ | 12 | 0.75 |
文字サイズ | 10 | 0.62 |
27、CSSやHTMLを整形出来るサイト
そういう時CSSのセレクタをソートしてくれるサイトがあるので助かる。
「cssを綺麗に並べるサイト」 というWebサイトを参考にして頂きました。
但しバックアップをしておく事。
ちなみにCSSの部位の名称は、 セレクタ{属性:値;}
◎HTMLを整形してくれるサイト 「HTML整形ツール(プチ・デバッグ機能付き)」というWebサイトを参考にして頂きました。、但しバックアップをしておく事。
◎その後、Microsoft Expression Web4に関しては、コードビューに切替、右クリックし「HTMLの書式変更」にて整形してくれる事が分かった。「HTMLの最適化」を参考にして頂きました。
28、アスタリスク(*)CSSは要注意
■CSSに、アスタリスク(*)がある。これはすべてのHTML要素に適用されるそうだ。
これをいつのまにか知らずに使っていたが、(*)の設定内容がいつのまにか変わり ホームページがくずれたので、(*)をCSSから削除した。
29、TAGやコメントの位置により表示に隙間が出る事がある
文法上は問題はなかったので原因がなかなか分からなかった。
不具合内容:上の<div>要素と、下の<table>要素との間に40px位の隙間が出来て解消されなかった。
</p>の位置とコメント<!-- div-no-002 終わり-->の位置を変えたら(詰めたら)正常に表示された。
原因不明。
具体的には次を参照(まだ未検証)
変更前(不具合) | 変更後(正常) | |
<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%"> |
30、インラインスタイル複数指定の書き方
■(例) <p style="font-size:14px;color:#f00;">
31、特殊文字
■特殊文字に関してある程度の知識が必要、特にコードで編集する時など
特殊文字 | 意味 | 備考 |
| 空白 | non-breaking spaceという意味 だそうです |
  | 空白 | |
  | 空白 | 全角スペースの幅 |
< | < | |
> | > |
32、web 構成の方法(参考)
WEBで検索したら参考になるサイトがあったので書き記します。
■index.htmlがないと、各フォルダーが丸見えになる場合もありうるとの事、要注意。
参考にさせて頂きました。
●フォルダ内の最初のファイル名をindex.htmlにするわけ。
●ホームページのディレクトリを見るには(緊急!!)

33、SEO対策
- keywordsの設定をする。
(例)<meta id=”keywords” content=”ホームページ作成,初心者,フリーソフト,挑戦,Expression Web,Kompozer“>
keywordsは半角カンマ( , )で区切る、単語を10文字くらいと他のHPに書いてありました。
- <meta id="description" content="サイトの説明">の文章を入れる。70~120文字位と書いてありました。
- Googleに登録(無料)をする、「seo google 登録」でネットで検索してみて下さい、方法は忘れました。
34、FFFTPにてファイルのアップロードに関して
■ホームページ内のファイルをサーバーにアップロードでFFFTPを使わさせていただいている。
ファイル数個をアップロード(ミラーリングアップロードではない)する場合、右のホスト側と左のローカル側はフォルダーは一致させておく必要がある。
35、「DIV」を左右中央に配置、及び右に配置
■ホームページ内のDIV要素を中央に配置。
CSSでmargin-left:auto; margin-right:auto;を設定する。
又、右端に寄せたい時は、CSSでmargin-left:auto; margin-right:0px;を設定する。
36、width指定の考え方
■ホームページでDIV要素等の横幅にwidthを指定するが、自分が今迄考えていた寸法と異なっていた。
widthは一番外側の寸法ではなくPaddingの内側寸法の事のようである。

37、画像(jpg等)のファイル名に漢字やかなを使わない事
■画像(jpg等)のファイル名に漢字やかなを使わない事。
後でFFFTPを使ってサーバーにアップロードする時、アップロード出来ない。
38、HPのdivフレームで、divをflatで2つ横並べする時
flat:leftを2つ使う方法がある。

39、margin及びpaddingの設定順序
■margin及びpaddingの設定順序は「①top→②right→③bottom→④left」
「要素の検証」の時、覚えておかないと変更出来ない。
40、画像を左右中央に配置
■画像を画面の左右中央に配置するにはCSSで
display-block
margin-left:autko
margin-right:auto
を設定する
41、FFFTP送信は「上書き」で送る
■ホームページを変更しサーバーに送信する時、FFFTPを使用しているが、「新しければ上書き」で送信しても内容が変わっていない時がある。
その時は「上書き」で送ると反映される場合がある。
42、position css
値 | 内容 |
absolute | 絶対位置 |
fixed | スクロールしても位置固定 |
relative | 相対位置 |
static | 初期値、配置方法を指定しない |
inherit | 継承 |
43、HTML内にTAGをtex表示したい時
■HTML内でTAGをテキスト表示したい時は<pre></pre> タグで囲む。
但し、[<]は[<]、[>]は[>]に置き換えた方が良い。
HTMLのコードエラーが出る。
又、<pre>はブロック要素との事、従って<p>タグ内に書いてはいけない。
尚、pre内のコードが枠内からはみ出る場合の対処CSSが書いてあり、助かりました。
「preタグ内のコードをボックス枠内で折り返すcss」。
44、擬似クラス CSS
NO | 擬似クラス | 説明 |
1 | :link | 未訪問リンクのリンク先 |
2 | :visited | 訪問済リンク先 |
3 | :hover | 対象の要素の上にマウスが乗っている時 |
4 | :active | 閲覧者が指示している |
注意:CSSに書く時、1~4の順番に記入しないとうまく動作しないとの事
「擬似クラスと擬似要素 」、「hover擬似クラス」というWebサイトを参考にして頂きました。
45、link時にtarget="_blank"をつける
■link時にtarget="_blank"をつけると、リンク先を新しいウインドウで表示出来るので良い。
同じウインドウで表示する場合はつけない。
尚、blankの前にはアンダーバー「 _ 」が必要みたいです。
「リンク先ページの表示ウインドウを指定する」というWebサイトを参考にして頂きました。
又targetの前にも半角スペースが必要との事。
「リンクのhtmlタグ」というWebサイトを参考にして頂きました。
■但し、target="_blank"はセキュリティのリスクがあるそうです。
その為、rel="noopener"を追加すると良いとの事。
「" target="_blank" rel="noopener"」
46、<li>の中に<li>を記入
「リストの中にリストを作る方法」を参照させていただきました。
<li>ここに表題の文字を入力 <ul> <li>文字列***</li <li>文字列***</li> <li>文字列***</li> </ul> </li>但し<li>の中に<li>を記入した時は、最初の<li>の設定(リスト画像設定)が子の<li>に影響する。
子の<li>のCSSで画像なしに設定する必要がある。
又、<li>の記号と画像は画像が優先するとの事。
「「list-style-type:none」でリストのマークが消えない場合にチェックすること」を参照させていただきました。
47、<p>の中の文字が中央に配置トラブル
■要素<p>の中の文字が左端ではなく、中央に配置するトラブルが発生した。
原因が当初よく分からなかった、調べていくと要素<body>にcssでtext-align:center;が設定してあった。
48、line-height、vertical-align、text-align、等について

49、CSSによる崩れない段組
■「CSSによる崩れない段組」を参考にしていただきました。非常に勉強になりました、この段組もこれを活用させて頂きました。
- 左右に<div>を配置したい時は先に「NAVI」の側のHTMLを記入し、幅を指定しfloat-leftないしrightを行う。
- 次の「MAIN]の<div>はfloatもwidthも指定せず、先の「NAVI」の<div>に指定した幅+αだけmargin-left又はrightを指定する。
paddingではだめ。そうすると元のdiv内にぴったりおさまる。
- 以上のポイントは
- HTMLで「NAVI」側を先に書く(仮に右側配置であっても先に書く)
- 「NAVI」側にwidthとfloat-left、かfloat-rightを指定
- 「MAIN側」はwidthとfloatは設定しない、margin-left又はright(「NAVI」のwidth値)を指定する。
50、<li>に画像をつける
■リスト(li)に画像のマークをつける方法
(1)CSSで list-style-type: none;を指定
(2)CSSで list-style-image: url(リスト画像);を指定。
■「リストの先頭にフォントでマーク表示!画像を付けるのはもう古い!」という記事がありました。
51、画像に「ぼかし」を入れる
■WEBページに画像を入れしかも文字等に「ぼかし」を入れたい時がある。
フリーソフトの「モザイク専用+ぼかし専用」を使えば簡単。
52、非推奨要素と非推奨属性
■HTML TAGも使えない属性の変化があるので注意。
特に今回は画像に対する要素と属性に変更があるので気付きました。
「非推奨要素と非推奨属性」というWebサイトを参考にさせて頂きました。
53、画像に対するCSSに関して
■画像はブロック要素でなくインライン要素という事です。
画像をページにどのように配置すればいいかあやふやな知識でしたので今回学んだ事を書きます。
使えるスタイル要素
テーマ | 記 述 |
基本 | <img src="画像ファイル" width="数値" height="数値"
alt="画像のタイトル"> ●従って挿入画像は前もってサイズを縮小する必要はない事になる。 |
画像の左右、上下スペース | margin |
画像の左端、右端配置 | float |
画像の文章に対し、上下 | align="top" "middle" "bottom" |
画像全体の枠 | border |
54、画像ファイルを<p>や<div>の横幅いっぱいに収める
■画像を<div>の幅いっぱいに収めたい時がある。単純に画像をdiv内に入れると、画像の横幅の大きさに迄拡大されてしまう。
又widthにて指定すると横幅を%指定しているdivだとPCの画面の拡大等に対処できない。
その対処方法は<img>に100%指定すればよいとの事。
「ウインドウ幅に合わせて画像サイズを変化させる方法」というWebサイトを参考にさせて頂きました。
55、<html>の構成(参考)
■<html>の構成を参考に書いてみた。
56、文字サイズ指定、注意
しかし<div>ごとにcssでフォントサイズを「1.**em」等で指定すると、
「親要素の文字」×「1.**」×「1.**」=と段々数値が大きくなることが分かった。
(初歩的事かもしれませんが分かりませんが)。
例えば、
- 最初の親要素に「1.1em」
- 次のdivAに「1.1em」
- 又次のdivBに「1.1em」
divBの文字サイズ=1.1×1.1×1.1=1.33倍の文字サイズになる。
尚divCの文字サイズをピクセル指定すれば親要素の影響を受けずにそのサイズになりました。
remを使うと良いとの記事がありました「CSS3の新単位「rem」で文字サイズを分かりやすく指定」
(例)
remを下に記入する。
57、divの前の隙間、行間の長いコメントを消すと直った
■divの前にに隙間が開いていて原因が分からなかった、コメントを消すと直った。
後で別の画面でテストしてみたが、おこらなかった(従って原因不明)。
58、スクロールの途中でサイドバーが消えないよう固定する
■「スクロールの途中でサイドバーが消えないよう固定する」を参考にしてスクロールバーを作成させていただきました。
59、見出しタグ(<h2><h3>等)の長さを文字の長さに合わせる
■見出しタグはPタグと同じで、画面の幅いっぱいに広がる、文字の長さに自動調整するには(display:inline)を指定する。
60、文字が枠内からはみ出る場合がある
■文字が枠内からはみ出ることがありました。CSSで「style="word-break:break-all"」を使えば良いそうです。
「ブロックから文字がはみ出してしまう対処法」を参考にさせて頂きました。
■ 「CSS 半角英数の連続文字が折り返すようにする」も参考にさせて頂きました。
■ 逆に、日本語を文の途中で改行したくない時は、「style="word-break:keep-all"」を使えば良いようです。
61、css font-familyに関して
■今迄はフォント指定は1種類のみだと思い、1つのみ指定していました。
所がfont-familyの名の示すように複数のフォントが指定出来 、しかも左から優先順位だそうです。
(例) font-family: メイリオ, Arial, Verdana, "MS Pゴシック", sans-serif;
「フォントファミリー」で検索するといろいろ説明が出ると思います。
非常にわかり易く書いてあるサイトがありました、「font-familyの書き方まとめ」
■「font-familyの説明がありました」、Safariは日本語は認識しないとの事。
■「Font-familyメーカー」がありました。
62、DIV内にDIVの配置検証
■DIV内にDIVを配置する場合、margin等を設定していたら、widthに100%設定をしたら右にはみ出す事が分かった。widthにautoを設定したら中におさまる。
width:100%
margin-left:30px margin-right:20px
padding-left:10px padding-right:10px
width:auto
margin-left:30px margin-right:30px
padding-left:10px padding-right:10px
63、画像のサイズ指定(pxと%)
画像<img>に対するサイズ指定には「px」と「%」がある。
「px」はそのまま指定したpx値で表示されるが、
「%」指定は、元の画像サイズの%ではなく、画像を囲んでいるいる枠に対する%で表示される。
従って枠の大きさが変化する(例えば,widthが%指定の枠)場合は、画像の大きさも変化する。
64、リスト&定義型リスト

「定義リスト<dl><dt><dd>を使いこなす!」
<dd></dd>内には他の要素を入れる事が出来るそうです。
65、スマホ対応のホームページ作成
良い記事がありました、後日学びたいと思います、「ブラウザの幅に合わせて表示を自動変更する」
66、画像のサイズ指定(枠からはみ出さない指定)
現在はスマホの普及で画面サイズを小さく表示する場合がある。
その場合画像サイズを原寸のpxで指定すると、枠からはみ出たりする。
現在は当面つぎのようにstyleを指定しています。
<img alt="**" src="**.jpg" style="max-width:100%;height:auto;">
(尚画像の基本指定方法は
(例)<img alt="**" src="**.jpg" width:"200";height:"100">
pxは省略可、%は省略不可
サンプル画像
67、背景画像 backgroundに関して
<div>の中に1つの大きい背景画像を入れる時。
- div要素に対して・・widthとheight値を指定,height:autoはだめ。
- 画像はdivのサイズと同じか、少し大きいものにしてbackground-positionにcenterを指定。
小さい場合はbackground-sizeの横幅にcoverを指定
(「背景画像を描画領域の面積ぴったりに自動で合わせる方法」を参考にさせて頂きました)。
縦幅にautoを指定する(但しCSS3対応のプラウザ必要)。
- 但し、スマホのように画面サイズが小さくなった時は未検証。
68、文章で2行目からインデントをつけたい時
*ああああ
いいいい
うううう
.indent { text-indent: -1em; padding-left: 1em; width: 250px; background-color: #99FF99; }
text-indent:-1em; ← 1行目のインデント指定
padding-left:1em; ← 2行目のpadding指定
69、コメント<!-- -->の書き方
- コメントの中にコメントを入れてはいけない。
- コメントにハイフォン「-」を使わない方が良い。
【注意:コメントの数 <!-- -->が一致してないといけない、(安易に考えると)WEBページのレイアウトが崩れる】
他の方のhtmlコメント書き方の参照例です <div class="2topNavi">...</div> <!-- /.topNavi --> </div> <!-- /main --> </div> <!-- /#contents -->
他の方のcssコメント書き方の参照例です。 いい書き方だと思います。 /*=================================== * ヘッダー ====================================*/ /*=================================== * スマートホン向けデザイン ====================================*/ @media screen and (max-width:768px){ #nav{ flort: none; width: 100% }
70、リンク文字の範囲を拡大
そこでネットで調べたら「リンクのクリックできる範囲を広げる」というサイトがあったので参考にさせて頂いた。
下記のような設定(例)にすると良いとの事。
.textlink a { display:block; width:200px; padding:10px; }
71、文章内アンカーへジャンプ
<a name="アンカー名">文字</a>
<a href="#アンカー名">文字・画像</a>
- アンカー名は同じの事
- アンカージャンプ元はアンカー名の前に#が必要
ジャンプ先 | ジャンプ元 | |
旧 |
<a name="abc">文字</a> |
<a href="#abc">文字</a> |
新 |
<要素名 id="abc"> |
<a href="#abc">文字</a> |
ジャンプ先id(abc:例)の頭文字は、数字ではなく英文字だそうです。
72、Webフォント
今後の課題です。
「アイコンWebフォント Font Awesome 5 の簡単な使い方」という記事もがありました。
次の1行をhead内に記入する必要があるそうです。
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">「Font Awesome 5アイコン」サイト
<i class="fas fa-chevron-circle-right" style="font-size: 150%;"></i>
73、文字の幅に<p>の幅を合わたい時
文字の幅に合わせたい時は、
その要素にwidth:auto display:inline-blockを指定し、親の要素にtext-aline:centerを指定する。
「可変幅のブロック要素をdisplay: inline-blockで中央寄せする方法」を参考にさせていただきました。
74、htmlの文法チェック
75、div(header)内にh1を左右中央配置
h1{ position: relative; margin-right: auto; margin-left: auto; }
76、inlineやblock
77、要素を左右・上下中央に配置
78、Web読込みスピードチェック
- 「Page Speed Insights」
- 「Testmysite」・・・モバイル機器
- 「GTmetrix」
- 「Pingdom Website Speed Test」
79、四角に丸みをつける
80、プロパティのプラウザ適合状況が分かる
今迄知りませんでした/(- 0 -)\。それが「can-i-use」です。
「初心者は要チェック!HTML5、CSS3の対応状況を確認できるCan I USEが便利!」を参考にさせて頂きました。
「HTMLやCSSのブラウザ対応状況を調べられるサイト『Can I use…』」にも分かり易く説明したあります。
81、禁則処理
p{line-break:strict;}
82、Link Checker
サイトを作ってから時間が経過するほど、リンク切れが発生する。
その時に「W3c Link Checker」を使用すれば簡単にチェック出来る。