HTML・CSS


 一言でＷｅｂと言っても範囲が広いですが、紹介できそうな事を記載しますので
　皆様のお役に立てれば、幸せです。
参考に一読ください。
[目次の表示]

＜【参考】HTMLの構文について＞


再確認もかねて改めて調べた、用語の意味などを解説してゆきます。
参考になると幸いです。
●属性名
・class（属性名）="blog"（属性値）
上記の．.(ピリオド)属性値でCSSのスタイル指定できる。
・ripple（属性値）リップルエフェクト（ボタンの波紋）
・alt（属性値）：画像が表示できない場合、テキストや音声で表示するため。img要素で使われる。
・title（属性値）：画像やリンクの補足説明。（省略可）

●Linkタグの例

<link rel="canonical" href="正規のＵＲＬ"/>
Link（タグ）：他の文章との関連付け。
rel（属性名）：正規ＵＲＬとの関連。
canonical（属性値）：ブログでＰＣ版スマホ版とある場合検索ロボットに重複した検索をさせないため。

●クローラ－とスクレイピング（Webスクレイピング）の比較
　クローラー：Webサイトの情報を取得する。
　スクレイピング：Webサイトから情報を取得し、分析・加工できる状態にする。
　複数ページのパンくずリストの呼び出し側
<div class="breadcrumb-container">
  <ul class="breadcrumb">
    [パンくずリストのHTML]
  </ul>
</div>
複数ページのパンくずリストの本体側

テーマ→HTML編集で数の赤枠のように記載しました。
パンくずリスト本体側の記載例
呼び出し側カジェット記載例
上図赤枠に複数表示されている

見づらいのでCSS等で背景や文字色など調整できる。
　[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 href="https://www.abcdddefg.abcdefg.html#test">testへ飛ぶ</a>
　②ジャンプ先

<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;  /* 横スクロールを可能にする */

●ページにパンくずのように書いたとき
投稿ページに書くHTML
画像を折りたたむ場合上記赤枠のコマンドをイメージタグで挟む。


<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の前に左記を記述すると文字数に合わせた囲い二成る。

●流れる文字の場合（ブラウザによって表示できるものとできないものがある。）
例）
[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;                /* 指定した分だけ相対的に移動 */
/*display: inline-block;    */
}
/*  .balloonoya:hover + .balloon {  */
.balloonoya:hover  .balloon {
  display: inline;                 /* インライン要素として表示 */
/*  opacity:1;        表示する*/
} 
.balloon {
  position: absolute;                /* 親要素を基準 */
  display: none;                    /* 要素を非表示 */
/*  opacity:0;        要素を非表示 */
  padding: 2px;                         /* テキストの前後の余白 */
  background-color: rgba(102, 102, 255, 0.50);       /* 背景色（透明度） */
  width:100px;                          /* 吹き出し全体の幅 */
  left : -100%;                           /* 表示位置 */
  font-size: 50%;                       /* 文字サイズ */
  color: #000000;                       /* 文字色指定 */
  transform: translateY(-30px);         /*   マウスオーバー時の位置調整 */
}
.balloon:after{
  border-left: 12px solid rgba(102, 102, 255, 0.50);   /* 吹き出し口の幅・色 */
  border-top: 10px solid transparent;     /* 吹き出し口の高さ１／２ */
  border-bottom: 10px solid transparent;  /* 吹き出し口の高さ１／２ */
  right: -32px;                           /* 吹き出し口の位置調整 */
  top: 330%;                                /* 吹き出し口の縦位置 */
  content: "";                       /* コンテンツの挿入 */
  position: absolute;                /* 親要素を基準 */
}
</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 :  色コード ;
                }
ページのトップへ▲












会社経験と、IT関連の国家資格などを生かしITの関連知識の参考や自身のスキルアップなどを目標に本サイトを開設しました。また皆様に支えられて今日があるので、自身の知識を精一杯発揮し、何か役に立てることはないかと思っています。未熟ものですがよろしくお願いします。

コメント

コメントを投稿

貴重なご意見ありがとうございます。お客様から頂いたコメントは、紳士に受止め、今後の本ブログの運用に参考とさせてもらいます。