HTML・CSS
一言でＷｅｂと言っても範囲が広いですが、紹介できそうな事を記載しますので
皆様のお役に立てれば、幸せです。
参考に一読ください。
[目次の表示]
＜【参考】HTMLの構文について＞
再確認もかねて改めて調べた、用語の意味などを解説してゆきます。
参考になると幸いです。
●HTML言語のコメントは「<!--コメント文-->」のような記載になります。
●CSS言語のコメントは「/*コメント文*/」のような記載になります。
●属性名
・class（属性名）="blog"（属性値）
上記の．.(ピリオド)属性値でCSSのスタイル指定できる。
上記の．.(ピリオド)属性値でCSSのスタイル指定できる。
・ripple（属性値）リップルエフェクト（ボタンの波紋）
・alt（属性値）：画像が表示できない場合、テキストや音声で表示するため。img要素で使われる。
・alt（属性値）：画像が表示できない場合、テキストや音声で表示するため。img要素で使われる。
・title（属性値）：画像やリンクの補足説明。（省略可）、ブラウザのタブや検索エンジンの内容にひょううじされユーザにわかりやすく伝える役目がある。
・メタディスクリプション（mata description）：投稿ページやブログのページの説明。
●Linkタグの例
<link rel="canonical" href="正規のＵＲＬ"/>
Link（タグ）：他の文章との関連付け。
Link（タグ）：他の文章との関連付け。
rel（属性名）：正規ＵＲＬとの関連。
canonical（属性値）：ブログでパソコン版スマホ版とある場合検索ロボットに重複した検索をさせないため。
●セレクターの種類
ユニバーサルセレクタ：HTMLのすべての要素に対しCSSを当てる。マージンやパディングを０にするなど。↓記述例
/*ユニバーサルセレクター */
* {
margin: 0;
padding: 0;
}
IDセレクタ：HTMLの要素にIDをつけそのクラスに対しCSSを当てる。↓記述例
/*IDセレクター*/
【CSS側】
#hello {
color: blue;
}
【HTML側】
<p id="hello">こんにちは〇〇さん</p>
要素セレクタ：HTMLの要素に対しCSSを当てる。↓記述例
/*要素セレクター*/
body {
background-color: #ccc;
}
クラスセレクタ：HTMLの要素にクラスをつけそのクラスに対しCSSを当てる。↓記述例
/*クラスセレクター*/
【CSS側】
.completed {
text-decoration: line-through; /* 取り消し線を引く */
}
.red {
color: red;
}
【HTML側】
<ul>
<li class="completed"><input type="checkbox" checked>HTMLの学習</li>
<li class="completed red"><input type="checkbox" checked>JavaScriptの学習</li>
</ul>
結合子を使ったセレクター
子孫セレクター：指定要素の子や孫要素にCSSを当てる。↓記述例
/* 子孫セレクタ */
p span {
color: red;
}
子セレクター：指定要素の子要素にCSSを当てる。↓記述例
/* 子セレクタ */
p > span {
text-decoration: underline;
}
関節セレクター：指定要素の後に記述した同じ階層の要素にCSSを当てる。↓記述例
/* 間接セレクタ */
h2~p {
color: purple;
}
隣接セレクター：指定要素の直後に記述した同じ階層の要素にCSSを当てる。↓記述例
/* 隣接セレクタ */
h2+ p {
font-weight: bold;
}
複数のセレクタの指定例
h1,p {
color: blue;
}
●<div>要素と<span>要素の違い
div:ブロック要素、改行あり
span:インライン要素、改行なし
●表の結合例
結合表示例
【HTML】
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>テーブルのセルの結合</title>
</head>
<body>
<table border="1">
<caption>横に結合（列を結合）</caption>
<tr>
<th colspan="3">セルを結合</th>
</tr>
<tr>
<td>コンテンツ１</td>
<td>コンテンツ２</td>
<td>コンテンツ３</td>
</tr>
</table>
<br>
<table border="1">
<caption>縦に結合（行を結合）</caption>
<tr>
<td rowspan="3">セルを結合</td>
<td>コンテンツ１</td>
</tr>
<tr>
<td>コンテンツ２</td>
</tr>
<tr>
<td>コンテンツ３</td>
</tr>
</table>
</body>
</html>
●クローラ－とスクレイピング（Webスクレイピング）の比較
クローラー：Webサイトの情報を取得する。
スクレイピング：Webサイトから情報を取得し、分析・加工できる状態にする。
複数ページのパンくずリストの呼び出し側
<div class="breadcrumb-container">
<ul class="breadcrumb">
[パンくずリストのHTML]
</ul>
</div>
複数ページのパンくずリストの本体側
テーマ→HTML編集で数の赤枠のように記載しました。
 |
| パンくずリスト本体側の記載例 |
[HTML]
<p class="fadeIn">ふわっとさせたい文字</p>
<!--上記で「ふわっとさせたい文字」の表示がふわっと成る。
[css]
/*ふわっとさせたい文字のCSS*/
.fadeIn {
animation: fade-in 1s ease-in-out;
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
①上記のHTMLは各記事のHTMLで編集したい文字のHTMLを編集する。
②CSSは、「テーマ」ー「HTML編集」で]]の上に記載する。（下図参照ください。）
 |
| 本ブログ内での使用例 上記赤枠 |
ジャンプ元：<a href="#test">testへ飛ぶ</a>
ジャンプ先：<a id="test">test</a>
●HTMLで別のページの特定の項目に（ジャンプ）する場合。
①ジャンプ元
②ジャンプ先
<a id="test">test</a>
CSS
@media screen and (max-width:480px) {
/* 表示領域幅480px以下の場合は、ここに記述されたスタイルを適用 */
}
@media screen and (min-width:768px) and (max-width:1024px) {
/* 表示領域幅768px以上1024px以下の場合は、ここに記述されたスタイルを適用 */
}
@media screen and (min-width:1024px) {
/* 表示領域幅1024px以上の場合は、ここに記述されたスタイルを適用 */
}
・メディアクエリ：デバイスの特性に応じて異なるスタイルを適用することができる仕組み。
●スマホの画面操作で横に長い分がある場合下記をCSSに含ませる
white-space: nowrap; /* 改行（行送り）を禁止させる */
overflow-x: scroll; /* 横スクロールを可能にする */
 |
| 画像を折りたたむ場合上記赤枠のコマンドをイメージタグで挟む。 <details> <summary>ここをクリックして画像を表示してください。</summary> <img src="画像のURL" alt="画像の説明"> </details> ●テキストの折り畳みでname属性とopen属性を指定した例 ・name、open属性でグプープかすることができ複数の<details>がある場合1つだけを表示させ別の1つを選択すると最初開いていた<details>は度汁機能。 本ブログの「ノウハウ：投稿ページの下の段の表示」で上記機能を利用しています。 ●画像の制御表示（下記例は、画像の高さ調整しながら徐々に表示させる） 【HTML】 <img alt="" class="animation2" data-original-height="804" data-original-width= "802" height="240" src="対象の画像" width="239" /> 【CSS】 /*----------------------------------------- 画像の高さを調整しながら徐々に表示させる -----------------------------------------*/ @keyframes open-keyanime2 { 0% { max-height: 0; /* 完全に透明 */ } 100% { max-height: 240px; /* 透明度無し、通常表示 */ } } .animation2 { overflow-y: hidden; animation-name: open-keyanime2; animation-duration: 10s; /* 10秒間で表示 */ animation-fill-mode: both; animation-iteration-count: 1; /* 1回実行させています */ } 表示例；本ブログの「はじめに」の最初の画像のようになります。 例） <div style="background: #FFFFFF; border-radius: 10px; border: 2px solid #111111; padding: 10px;">囲う文字を記述する。</div> solid：doubleにすると2重線になる。 inline-block;paddingの前に左記を記述すると文字数に合わせた囲いに成る。 inlineプロパティ：CSSでdisply:inline;と記述すると横に表示される。 blockプロパティ：CSSでdisply:block;と記述すると縦に表示される。 ●流れる文字の場合（ブラウザによって表示できるものとできないものがある。） 例） [CSS] /*------------------------------------------- 流れる文字 -------------------------------------------*/ .marquee_area { max-width: auto; background-color: #cec; overflow: hidden; } .marquee_item { width: auto; animation-name: marquee; animation-duration: 10s; animation-timing-function: linear; animation-iteration-count: infinite; } @keyframes marquee { 0% { transform: translate(100%, 0); } 100% { transform: translate(-300px, 0); } } [HTML] <div class="marquee_area"><div class="marquee_item"> <b>流れる分を記入する。</b></div></div> マウスを合わせると指になりリンクしたように表示させる。 <span>タグはインライン要素（縦・横幅なし、改行なし）、対する<div>タグはアウトライン（ブロック）要素（縦・横幅あり、改行あり）。 インライン要素の中に ブロック要素は入れ込めない。 （例） ［HTML］ <span class="yubi">テキスト文字</span> 【CSS】 .yubi { cursor:pointer; } ●ページに予期せぬWebページが表示されたとき HTMLの＜div></div>の個数を疑う。対になっているか。また余計な空白が 含まれているかなど。 特に画像を挿入したりテキストのリンクを貼ったりした場合に発生する確率が高いようです。 （例）<a href="#">ページのトップへ</a> ●戻るボタンにマウスを乗せると文字が噴き出すCSS。 （例:CSS） /*-------------------------------- 戻るボタンにマウスを乗せると文字を吹き出す ---------------------------------*/ <style type="text/css">←削除した行 .balloonoya { position: relative; /* 指定した分だけ相対的に移動 */ } .balloonoya:hover .balloon { display: inline; /* インライン要素として表示 */ } .balloon { position: absolute; /* 親要素を基準 */ display: none; /* 要素を非表示 */ padding: 2px; /* テキストの前後の余白 */ background-color: rgba(102, 102, 255, 0.50); /* 背景色（透明度） */ width:100px; /* 吹き出し全体の幅 */ left : -100%; /* 表示位置 */ font-size: 50%; /* 文字サイズ */ color: #000000; /* 文字色指定 */ transform: translateY(-30px); /* マウスオーバー時の位置調整 */ } </style>←削除した行 （例:HTML） <div class='page-top-button balloonoya'> <span class='balloon'>トップに戻る</span> <a href='#' id='back-to-top-button_pc'> <img alt='ボタンＰＣ用' class='page-top-button_pc' height='40' src='ボタン の画像.jpg' width='40'/></a> ●エラー 下図（赤枠）のコメントアウトを削除するため 上図のCSSの<style type="text/css">と</style>を削除（黄色の塗りつぶし部分）すると消えました。 もともとある<style></style>も消すと消えました。 Bloggerでは<style></style>は自動生成されるため記述するとエラーになります。  ●動く蛍光色のアンダーライン HTMLやCSS（下図）を参考に記載します。 【HTML】 <span class="anim-underline">アンダーラインを引く文字</span> 【CSS】  ●リンクが貼ってある場所に、マウスを合わせると線が表示される CSSの紹介  [HTML] <div onclick="obj=document.getElementById('画像').style; obj.display=(obj.display=='none')?'block':'none';"> <a style="cursor:pointer;">クリックする文字</a></div><div id="画像" style="display:none;clear:both;"><img border="0" data-original-height="520" data-original-width="588" height="283" src="画像ファイル.gif" width="320" /></div> ●テキスト文字の折り畳み <details><summary><span style="background-color: #04ff00;"><b>[目次の表示]</b></span></summary><div style="text-align: left;"><a href="#san"><b> 1．〇〇</b></a></div><div style="text-align: left;"><b><a href="#pan"> 2．〇〇</a></b></div><div style="text-align: left;"><b><a href="#pans"> 3．〇〇</a></b></div><div style="text-align: left;"><b><a href="#fuwa"> 4．〇〇</a></b></div><div style="text-align: left;"><b><a href="#conjp"> 5．〇〇</a></b></div><div style="text-align: left;"><b><a href="#sum"> 6．〇〇</a></b></div><div style="text-align: left;"><b><a href="#ga"> 7．〇〇</a></b></div><div style="text-align: left;"><b><a href="#kaco"> 8．〇〇</a></b></div><div style="text-align: left;"><b><a href="#yub"> 9．〇〇</a></b></div><div style="text-align: left;"><b><a href="#toppe">10．〇〇</a></b></div><div style="text-align: left;"><b><a href="#err">11．〇〇</a></b></div><div style="text-align: left;"><b><a href="#or">12．〇〇</a></b></div></details>  ●本サイトに記載したHTML要素の紹介 例）<div id="画像" style="display: none; text-align: center;"></div> style="display: none; text-align: center;"の「display: none; 」は画面上で非表示にする。クリックした場合画像の表示／非表示切替えを行う。「 text-align: center;」はセンター表示にさせる。ここで「clear: both;」とした場合flotを解除させる。 ●マウスを乗せたときに色を変える （CSS） #single-content a:hover{ color : 色コード ; } ・本サイトの項目の一部の色を指定したCSS /*------------------------------------------------------------------------- 参考：ノウハウ集へのリンク文字色をレインボー色にする --------------------------------------------------------------------------*/ @keyframes rainbowText { 0% { color: red; } 14% { color: orange; } 28% { color: yellow; } 42% { color: green; } 57% { color: blue; } 71% { color: indigo; } 85% { color: violet; } 100% { color: red; } } a.rainbow-link { animation: rainbowText 5s infinite linear; font-weight: bold; text-decoration: none; } 下記のBootstrapを利用することでCSSの記述が少なくなる。 アイコンやボタン・ナビゲーションなどが簡単に装飾できる。 Bootstrapの日本語版 BoostrapをHTMLに組み込む方法 下記リンクよりCSS（headタグ）コードとJS（/bodyの手前）コードを貼りつける必要がある。 |
コメント
コメントを投稿
貴重なご意見ありがとうございます。お客様から頂いたコメントは、紳士に受止め、今後の本ブログの運用に参考とさせてもらいます。