1. Home（グラスタの場所一覧表〜入手範囲別〜）
  2. 個人サイト制作：サイトマップ
  3. CSSの小ネタ、ちょっとしたUI作成
fein's personal site
fein's personal site

個人サイト制作：サイトマップへ戻る

CSSの小ネタ、ちょっとしたUI作成

少し変わった罫線とか、チェックボックスだったり。
小さな装飾が欲しいシーンもあります。
ここではCSSの小ネタだったり、ちょっとした動きを出すようなコードを書いていきます。
多少はJavaScriptも使いますよ。

罫線のデザイン

コンテンツの合間にちょっとしたスペースが欲しいけど、空白にしておくのも不自然…
そんなタイミングで使います。

隅に行くほど細く消えかかる罫線を作るstyle.css


hr.atelierflower {
  border: none; /* 枠線を消す */
  height: 10px; /* 要素の高さを設定 */
  background: linear-gradient(to right, /* 左から右への線形グラデーション */
    rgba(107, 142, 35, 0) 0%, /* 緑色の透明度0% */
    rgba(107, 142, 35, 1) 20%, /* 緑色の透明度100% */
    rgba(34, 139, 34, 0.5) 50%, /* 別の緑色の透明度50% */
    rgba(107, 142, 35, 1) 80%, /* 緑色の透明度100% */
    rgba(107, 142, 35, 0) 100% /* 緑色の透明度0% */
  );
  position: relative; /* 絶対位置の基準を設定 */
  background-size: 100% 100%; /* 背景画像のサイズを設定 */
  border-radius: 50%; /* 要素を円形にする */
  margin: 20px 0; /* 上下の余白を設定 */
}

hr.atelierflower::before {
  content: ""; /* 空のコンテンツを生成 */
  position: absolute; /* 絶対位置に配置 */
  top: 0; /* 上端を親要素に合わせる */
  left: 50%; /* 左端を親要素の中央に合わせる */
  transform: translateX(-50%); /* 要素を中央に寄せる */
  width: 40px; /* 要素の幅を設定 */
  height: 40px; /* 要素の高さを設定 */
  background: radial-gradient(circle, /* 円形の放射グラデーション */
    rgba(34, 139, 34, 0.5) 20%, /* 緑色の透明度50% */
    rgba(255, 255, 255, 0) 70% /* 白色の透明度0% */
  );
  border-radius: 50%; /* 要素を円形にする */
}

content: ""; がちょっとしたポイントです。
このプロパティは疑似要素（::before や ::after）に対して働きます。
なぜなら、疑似要素は content プロパティが定義されていないと表示されないためです。

上記コードのcontent プロパティは、疑似要素に対してテキストや画像などのコンテンツを挿入するために使用されます。
空の文字列（""）を使用することで、特定のコンテンツを挿入しないまま、スタイルやレイアウトのために疑似要素を表示させることができるんですよね。

この罫線の例では::before 疑似要素を利用して、中央にグラデーションで装飾された円を表示しています。
content: ""; がなければ、この疑似要素自体が表示されません。
そのため、装飾が意図したとおりに見えるようにするために空のコンテンツを生成しています。

SNSがセンシティブだからいちいち書かないといけないけど、ここで「生成」という言葉を使っているからといっても、それは画像生成AI等を意味しているわけではないので。
ご承知おきください。


/* feinhr IDのスタイル定義 */
#feinhr {
    border: none; /* 枠線を非表示にする */
    height: 1px; /* 高さを1ピクセルに設定する */
    background: linear-gradient(to right, transparent, black, transparent); /* 左から右にかけて透明から黒、再び透明へと変化する背景グラデーションを適用 */
}

上の罫線cssの単純バージョン。
このサイトではフッターとの境界線として使っています。

タップするとチェックマークが変化するUI

リストものの説明文とか。
文字通りチェックリストであるとか。
そういったコンテンツにちょっとした動きを付けるために使ってます。

タップするとチェックが変化するstyle.css


.inline-button {
  display: inline; /* 要素をインライン表示に設定します */
  font-size: 1rem; /* フォントサイズを1remに設定します */
  padding: 5px 10px; /* 上下に5px、左右に10pxの余白を設定します */
  cursor: pointer; /* マウスカーソルをポインターに変更します */
  border: none; /* ボーダーをなしに設定します */
  background-color: transparent; /* 背景色を透明に設定します */
}

ここはちょっと大切なことを説明しないとね。
インライン要素とブロック要素です。

インライン要素とブロック要素

インライン要素（Inline Element）

代表的なインライン要素:

ブロック要素（Block Element）

代表的なブロック要素:

これらの違いを理解しておくとお得ですよ？
要素をどのように配置してスタイルを適用するか。
そういったことを考える際の選択肢が広がります。

タップするとチェックが変化するunderline.js

underline.jsというのは私の編集都合です。お気になさらず。


document.addEventListener('DOMContentLoaded', () => {
 const buttons = document.querySelectorAll('.inline-button');

 buttons.forEach(button => {
  button.addEventListener('click', () => {
   if (button.textContent === '□') {
    button.textContent = '✅';
   } else {
    button.textContent = '□';
   }
  });
 });
});

ボタンのクリックイベント

このJavaScriptコードはページ内の特定のボタン（.inline-buttonクラスを持つ要素）をクリックしたときに、そのボタンのテキストを変更する機能を実装しています。
ボタンのテキストが「□」であれば「✅」に変更し、逆に「✅」であれば「□」に変更します。

このクリックイベントも多用するんですよね。
一つ一つ、書いていきます。

1. DOMContentLoadedイベント

document.addEventListener('DOMContentLoaded', () => { ... });
DOMの読み込みが完了した後に実行される関数を登録します。

2. ボタン要素の取得

const buttons = document.querySelectorAll('.inline-button');
.inline-buttonクラスを持つ全てのボタン要素を取得します。

3. イベントリスナーの追加

buttons.forEach(button => { ... });
取得したボタン要素それぞれにクリックイベントリスナーを追加します。

4. クリック時の動作

button.addEventListener('click', () => { ... });
ボタンがクリックされたときの処理を定義します。
if (button.textContent === '□') { ... } else { ... }
ボタンのテキストが「□」であれば「✅」に変更し、逆に「✅」であれば「□」に変更します。

全体の流れ

  1. ページのDOMが完全に読み込まれると、DOMContentLoadedイベントが発生します。
  2. .inline-buttonクラスを持つ全てのボタン要素を取得し、buttonsに格納します。
  3. 取得したボタン要素のそれぞれにクリックイベントリスナーを追加します。
  4. ボタンがクリックされると、そのボタンのテキストが「□」であれば「✅」に変更し、逆に「✅」であれば「□」に変更します。

DOMについて理解する

DOMは「Document Object Model」の略で、ウェブページの構造を表現するためのオブジェクトモデルです。
簡単に言うと、HTMLやXML文書をプログラムから操作できるようにするための仕組みです。

DOMの基本概念

ツリー構造
DOMは文書全体をツリー状の構造として表現します。
各要素（タグ）はノードとして扱われ、そのノードは子ノードを持つことができます。
例えばHTML文書の場合、<html>タグがルートノードで、その下に<head>と<body>のノードが続きます。
ノード
ノードは文書の各部分を表します。
主要なノードタイプには、要素ノード（<div>, <p>など）、テキストノード（要素内のテキスト）、属性ノード（id, classなど）があります。
API
DOMはJavaScriptなどのプログラミング言語から文書を操作するためのAPI（アプリケーションプログラミングインターフェース）を提供します。
DOMを使うことで、要素の取得や属性の変更、イベントの追加などが可能になります。

DOMを使った基本操作

  1. 要素の取得:
    • document.getElementById('id名')：指定したIDの要素を取得します。
    • document.querySelector('セレクター')：指定したセレクターに一致する最初の要素を取得します。
  2. 属性の変更:
    • element.setAttribute('属性名', '値')：要素の属性を変更します。
    • element.classList.add('クラス名')：要素にクラスを追加します。
  3. イベントの追加:
    • element.addEventListener('イベント名', 関数)：要素にイベントリスナーを追加します。
      例えば、今回のようにクリックイベントを追加する場合などですね。

DOMの具体例

次にあるコードはDOMを使った簡単な例です。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>DOMの基本例</title>
</head>
<body>
    <div id="myDiv">こんにちは、世界！</div>
    <button id="myButton">クリックしてね</button>

    <script>
     document.addEventListener('DOMContentLoaded', () => {
      const myDiv = document.getElementById('myDiv');
      const myButton = document.getElementById('myButton');

      myButton.addEventListener('click', () => {
       myDiv.textContent = 'ボタンがクリックされました！';
      });
     });
    </script>
</body>
</html>

この例では、ボタンをクリックすると<div>のテキストが変わります。
これがDOMを使った操作の基本的な使い方です。
DOMの理解が深まると、ウェブ開発の様々な場面で役立つ知識となります。

小さい画像を並べる

ここで使われているCSSのフレックスボックスレイアウトについては、すでに説明してあります。


/* w3ccheck クラスに対してフレックスボックスを使用して、要素を中央に揃える */
div.w3ccheck {
    display: flex; /* フレックスボックスを使う */
    align-items: center; /* 中央に揃える */
}

/* w3ccheck クラス内の img 要素に対して、右側に10ピクセルの余白を追加する */
.w3ccheck img {
    margin-right: 10px; /* 右側に10ピクセルの余白 */
}

このサイトの一番下にW3Cのマークがあります。
それを並べるのに使っていますね。
一応、W3CとWeb標準について書いてみますか。

Web標準について

ウェブサイトビルダーで作成されたサイトはともかく、コードを書いていくことで作っていく個人サイトであれば、極力このWeb標準を意識すると良いです。
構築段階で失敗しないからです。
デザインやカッコいい動作は後から考えれば良いのですよ。

Web標準とは、主にW3C（World Wide Web Consortium）によって策定された、Web技術に関する標準的な規格やガイドラインのことです。
これらの標準は、Webブラウザやその他の閲覧環境に依存せず、どのような環境でも同じように表示・動作することを目的としています。

Web標準の主な目的

1. 互換性の確保
異なるブラウザやデバイス間で一貫した表示と動作を保証します。
2. アクセシビリティの向上
障害のある人々を含むすべてのユーザーがWebコンテンツにアクセスできるようにします。
3. 品質の向上
Webコンテンツの品質を高め、ユーザー体験を向上させます。

代表的なWeb標準

HTML
Webページの構造を定義するマークアップ言語。
CSS
Webページのスタイルやレイアウトを定義するスタイルシート言語。
JavaScript
Webページに動的な機能を追加するプログラミング言語。

W3Cの役割

W3CはWeb技術の標準化を推進するために設立された非営利団体であり、HTMLやCSS、XMLなど多くの仕様を公開しています。
Webの勉強をすれば、必ずと言って良いほど教わる組織ですね。
このような組織が策定する標準仕様があることで、Web開発者は一貫したルールに基づいてWebサイトを構築でき、Webサイトの互換性や品質が保たれます。
Web標準に準拠することで、開発者はより広範なユーザーに対してリッチなインタラクティブ体験を提供することができます。

ソースコードを美しく表示する


/* コードコンテナのスタイル定義 */
.code-container {
    background-color: #2d2d2d; /* 背景色を暗い灰色に設定 */
    border-radius: 8px; /* 角を8ピクセルの半径で丸める */
    padding: 1px; /* 内側の余白を1ピクセルに設定 */
    overflow: hidden; /* コンテナの内容があふれないようにする */
    color: #f8f8f2; /* テキストの色を明るい灰色に設定 */
    font-family: 'Courier New', Courier, monospace; /* フォントを等幅フォントに設定 */
}

/* pre要素のスタイル定義 */
pre {
    margin: 0 !important; /* マージンを0に強制的に設定 */
    padding: 1px 20px !important; /* 内側の余白を上下1ピクセル、左右20ピクセルに強制的に設定 */
    white-space: pre-wrap; /* テキストが改行されるように設定 */
}

/* codecolor クラスのスタイル定義 */
.codecolor {
    color: #0033ff; /* テキストの色を青色に設定 */
}

これはソースコードを表示するエリアに適用しているCSSです。
本文中にコードを表示する時も青字にするか、太字にするかで差別化するだけで、codeタグは使っていないですね。
なんか読みにくいし。
prismjsを使って各種の言語に応じたシンタックスハイライトを付けています。

カード型レイアウトを作る

これはちょっと私のサイト独特の事情も入ってるかな？
cssのファイル名称と中身が一致してないことがあるんですよ。
サイト構築当初に機能に分けてcssをたくさん作り、デザイン追加に従って追記するような流れにしています。
1つのcssに何でもかんでも入れるのが好きじゃないんだよね。

カード型レイアウトも悪くないですよ。
一部のセクションだけ際立たせるとか、ちょっとした装飾にぴったりです。

カード型レイアウトを作るcollapsible.cssの一部


/* コンテナ全体の設定 */
.feinorg-container {
 /* 内部のアイテムを横並び（flexbox）に配置 */
 display: flex;

 /* アイテムが折り返せるよう設定 */
 flex-wrap: wrap;

 /* アイテム間の間隔を20pxに設定 */
 gap: 20px;

 /* コンテンツを左寄せに設定 */
 justify-content: flex-start;

 /* 内側の余白を10pxに設定 */
 padding: 10px;
}

/* カード要素のデザイン */
.feinorg-card {
 /* カードの背景色を白に設定 */
 background: #fff;

 /* カードに薄い枠線を付ける */
 border: 1px solid #ddd;

 /* 内側の余白を上下2px、左右15pxに設定 */
 padding: 2px 15px;

 /* カードの角を丸める */
 border-radius: 12px;

 /* カードに影を付けて浮き上がるような効果 */
 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

 /* カードの横幅を全体の90%に設定 */
 width: 90%;

 /* カードの最大幅を800pxに制限 */
 max-width: 800px;

 /* ボックスモデルのサイズ計算方法を設定 */
 box-sizing: border-box;

 /* ホバーなどの状態で動きのあるエフェクトを追加 */
 transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* カード内部の行のスタイル */
.feinorg-row {
 /* 文字の色をやや暗めのグレーに設定 */
 color: #333;

 /* 下の余白を8pxに設定 */
 margin-bottom: 8px;

 /* 行の高さを1.6倍にして読みやすく */
 line-height: 1.6;

 /* テキストを左揃えに設定 */
 text-align: left;
}

/* ラベル要素のスタイル */
.feinorg-label {
 /* 文字を少し太字に設定 */
 font-weight: 600;

 /* 文字の色を青色（#0078d4）に設定 */
 color: #0078d4;

 /* 右側の余白を5pxに設定 */
 margin-right: 5px;

 /* テキストを左揃えに設定 */
 text-align: left;
}

ごくごく一般的なデザインであり、かつ私のサイトで取り入れているものはかなりシンプル寄せです。
全体的にうるさいデザインのWebサイトが好きじゃないのです。

見出しに目立つ下線を引く

あまり目立つものではありませんが、h3やh5見出しに少しだけ色を付けています。
ユーザーがh3見出しを視界に入れると、赤い下線がサッと引かれるようなアニメーションを付けているんですよね。
JavaScriptとCSSをそれぞれ説明します。

h3見出しに赤い線を引くunderline.js


document.addEventListener("DOMContentLoaded", function () {
 const h3s = document.querySelectorAll("h3");

 window.addEventListener("scroll", function () {
  h3s.forEach(function (h3) {
   const rect = h3.getBoundingClientRect();
   if (rect.top >= 0 && rect.bottom <= window.innerHeight) {
    h3.classList.add("visible");
   } else {
    h3.classList.remove("visible");
   }
  });
 });
});

DOMの読み込み完了後に実行


document.addEventListener("DOMContentLoaded", function () {

この部分はHTML文書が完全に読み込まれた後に関数を実行するためのイベントリスナーを追加しています。
スクリプトがページの要素にアクセスできるようになります。

h3要素をすべて取得


const h3s = document.querySelectorAll("h3");

querySelectorAllメソッドを使用して、ページ内のすべてのh3要素を取得し、h3sという変数に保存します。

スクロールイベントリスナーの追加


window.addEventListener("scroll", function () {

この部分ではウィンドウに対してスクロールイベントリスナーを追加しています。
ユーザーがページをスクロールするたびに関数が実行されます。

各h3要素に対する処理


h3s.forEach(function (h3) {

forEachメソッドを使用して、取得したすべてのh3要素に対して関数を実行します。

h3要素の位置を取得


const rect = h3.getBoundingClientRect();

getBoundingClientRectメソッドを使用して、各h3要素の位置とサイズを取得し、rectという変数に保存します。

要素がビューポート内にあるかどうかの確認


if (rect.top >= 0 && rect.bottom <= window.innerHeight) {

rectオブジェクトのtopとbottomプロパティを使用して、要素がビューポート（画面の表示領域）内にあるかどうかを確認します。

クラスの追加または削除


h3.classList.add("visible");
} else {
h3.classList.remove("visible");

要素がビューポート内にある場合、visibleクラスを追加します。
要素がビューポート外にある場合、visibleクラスを削除します。

このスクリプトはユーザーがページをスクロールしたときに、h3要素がビューポート内に入ったり出たりするのに応じて、visibleクラスを追加または削除します。
このように動作させることで、visibleクラスに関連付けられたスタイルやアニメーションを適用することができます。

ここまでがJavaScriptの説明です。
ここから、関連するCSSに移ります。

次のCSSコードはJavaScriptによって visible クラスが追加されたときに、h3 要素の ::after 疑似要素にアニメーションを適用、表示される効果を実現します。

h3見出しに赤い線を引くstyle.css


/* h3要素のスタイル設定 */
h3 {
    display: block; /* 要素をブロックレベルに変更 */
    width: fit-content; /* 要素の幅を内容に合わせる */
    background: linear-gradient(to right, rgba(173, 216, 230, 0.2), rgba(173, 216, 230, 0)); /* 背景を右方向のグラデーションに設定 */
    padding: 10px; /* 内側の余白を10pxに設定 */
    border-radius: 15px; /* 角を15pxの半径で丸める */
    margin-top: 30px; /* 上部の余白を30pxに設定 */
    margin-bottom: 5px; /* 下部の余白を5pxに設定 */
    position: relative; /* 要素を相対位置に設定 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 影を設定 */
}

/* h3要素の疑似要素::afterのスタイル設定 */
h3::after {
    content: ''; /* 空のコンテンツを設定 */
    position: absolute; /* 絶対位置に設定 */
    bottom: -5px; /* 要素の下端から-5pxに設定 */
    left: 0; /* 要素の左端に設定 */
    width: 100%; /* 幅を100%に設定 */
    height: 3px; /* 高さを3pxに設定 */
    background: linear-gradient(to right, rgba(255, 0, 51, 0.5), rgba(255, 255, 255, 0.5)); /* 背景を右方向のグラデーションに設定 */
    transform: scaleX(0); /* スケールを0に設定 */
    transform-origin: bottom right; /* 変形の基点を右下に設定 */
    transition: transform 0.5s ease-out; /* 変形のトランジションを設定 */
}

/* h3要素にvisibleクラスが付与されたときの疑似要素::afterのスタイル設定 */
h3.visible::after {
    transform: scaleX(1); /* スケールを1に設定（横方向に伸びる） */
    transform-origin: bottom left; /* 変形の基点を左下に設定 */
}

このようにJavaScriptとCSSが合わさって、少しだけ見出し部分に視線が行くような効果を演出しています。
次のh5に関してはJavaScriptは入っていませんが、サッとオレンジの下線を引くようにしています。

h5見出しにオレンジ線を引くstyle.css


/* h5タグのスタイル設定 */
h5 {
 /* h5タグの文字の大きさを通常の110%に設定 */
 font-size: 110%;

 /* 上の余白を25pxに設定 */
 margin-top: 25px;

 /* 下の余白を0に設定 */
 margin-bottom: 0;

 /* 下のパディング（内側の余白）を5pxに設定 */
 padding-bottom: 5px;

 /* 行の高さを通常の1.2倍に設定して読みやすく */
 line-height: 1.2;

 /* 文字色を黒（不透明度70%）に設定 */
 color: rgba(0, 0, 0, 0.7);

 /* h5タグをインラインブロック要素として表示 */
 position: relative;
 display: inline-block;
}

/* h5要素の下に装飾ラインを追加するスタイル */
h5::after {
 /* 疑似要素の内容を空に設定 */
 content: '';

 /* 疑似要素をh5タグの下に配置 */
 position: absolute;
 left: 0;
 bottom: 0;

 /* ラインの幅をh5要素全体に設定 */
 width: 100%;

 /* ラインの高さを5pxに設定 */
 height: 5px;

 /* ラインの背景色をグラデーションに設定 */
 background: linear-gradient(90deg, #ff6f61, #ffc107);

 /* ラインの端を少し丸めて柔らかい印象に */
 border-radius: 2px;
}

さりげなくコソっとやるみたいな。 何も凝ったデザインである必要はなく、周囲から少しだけ際立って見えれば良いのですよ。

特定範囲にテキストを書く


/* portal クラスのスタイル定義 */
.portal {
    text-align: left; /* テキストを左揃えにする */
    width: 55%; /* 幅を55%に設定する */
    margin-left: 0; /* 左の余白を0に設定する */
    max-width: 100%; /* 最大幅を100%に設定する */
}

このサイトの一番下に私のポータルサイトの案内が掲載されていますが、スクロールトップボタンが右側にあるため、テキストは左側に寄せる必要があります。
そのために書いているCSSですね。

フッターサイトマップ用のリンク


/* .sitemap クラスは、サイトマップのスタイルを定義します */
.sitemap {
 margin: 0 0 20px 0;  /* 上、右、下、左の順にマージンを設定：上0、右0、下20px、左0 */
 padding: 20px;  /* 要素の内側に20ピクセルのパディングを設定 */
 border: 1px solid #ddd;  /* 1ピクセルの薄い灰色の実線ボーダーを設定 */
 border-radius: 10px;  /* 要素の角を10ピクセルの半径で丸める */
 background-color: #f9f9f9;  /* 要素の背景色を薄い灰色に設定 */
}

/* .fa-sitemap クラスは、アイコンのスタイルを定義します */
.fa-sitemap {
 margin-right: 5px;  /* アイコンの右側に5ピクセルのマージンを設定 */
}

このサイトはいろんなカテゴリーについて書いているため、サイトマップを多重構造にしています。
まず全てのページの下部にサイトマップがあり、そこをタップすると各テーマのサイトマップへジャンプする仕組みです。

SNSの表示

SNSリンクはあまり大仰に付けないようにしています。
でも所在は分かるよう、余白を適度に取りつつね。


/* .social-links と .footer-links クラスは、リンクリストのスタイルを定義します */
.social-links,
.footer-links {
display: block; /* 要素をブロック要素として表示 */
text-align: left; /* テキストを左揃えに設定 */
margin-bottom: 20px; /* 要素の下に20ピクセルの余白を設定 */
}

/* .social-links a と .footer-links a クラスは、リンクのスタイルを定義します */
.social-links a,
.footer-links a {
color: #007bff; /* リンクのテキスト色を青に設定 */
text-decoration: none; /* リンクの下線を削除 */
padding: 0 10px; /* リンクの内側に左右10ピクセルのパディングを設定 */
display: inline-block; /* 要素をインラインブロック要素として表示 */
white-space: nowrap; /* テキストの改行を防止 */
margin-top: 3px; /* リンクの上に3ピクセルの余白を設定 */
margin-bottom: 3px; /* リンクの下に3ピクセルの余白を設定 */
}

/* .social-links a:hover と .footer-links a:hover クラスは、リンクのホバー時のスタイルを定義します */
.social-links a:hover,
.footer-links a:hover {
color: #0056b3; /* リンクのテキスト色を濃い青に設定 */
margin-top: 3px; /* リンクの上に3ピクセルの余白を設定 */
margin-bottom: 3px; /* リンクの下に3ピクセルの余白を設定 */
}

/* svg クラスは、SVG要素のスタイルを定義します */
svg {
width: 14px; /* SVGの幅を14ピクセルに設定 */
height: 14px; /* SVGの高さを14ピクセルに設定 */
fill: #007bff; /* SVGの塗りの色を青に設定 */
vertical-align: -2px; /* SVGを垂直方向に-2ピクセルずらして配置 */
}

/* メディアクエリ: 画面幅が600ピクセル以下の時のスタイルを定義します */
@media (max-width: 600px) {

/* .social-links と .footer-links クラスを縦並びに変更 */
.social-links,
.footer-links {
flex-direction: column; /* フレックスボックスの方向を縦に設定 */
}
}

SVGについて

SVG（Scalable Vector Graphics）は画像を表示するフォーマットです。

ベクター形式
SVGはベクター形式の画像ファイルであり、ピクセルベースのラスタ画像とは異なります。
解像度に依存せずに拡大・縮小しても画質が劣化しません。
XMLベース
SVGファイルはXML（拡張マークアップ言語）形式で記述されており、テキストエディタで編集可能です。
プログラムによる動的な生成や操作が容易になります。
軽量
一般的にSVGファイルはピクセルベースの画像ファイルよりもファイルサイズが小さいため、ウェブサイトの読み込み速度が向上します。
スタイルの柔軟性
SVGはCSSでスタイルを制御でき、アニメーションやインタラクションも可能です。
例えば、ホバー時の色変更や回転アニメーションなどが簡単に実現できます。

SVGの基本構造


<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

上記の例では、100x100ピクセルのSVGキャンバス内に半径40ピクセルの赤い円を描いています。
また、SVGは直接HTMLに埋め込むことができます。
これを私のサイトではSNSアイコンの表示に使っています。


<!DOCTYPE html>
<html>

<head>
 <title>SVG Example</title>
</head>

<body>
 <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
 </svg>
</body>

</html>

このようにSVGはさまざまな用途で活用できるとともに、高品質で柔軟性のある画像を扱う際に非常に有用です。
覚えておいて損はないかと思いますね。

著作権の表示

形式的な文言でも良いから、自作サイトに付けておいた方が良いです。
特にSNSは自身で何かしらを発信することから、著作権関連の話題は頻繁に炎上します。
昨今のAI問題など、記憶に新しいところです。


/* .copyright クラスは、著作権表示のスタイルを定義します */
.copyright {
color: #555; /* テキストの色を薄い灰色に設定 */
font-size: 12px; /* フォントサイズを12ピクセルに設定 */
margin-top: 10px; /* 要素の上に10ピクセルの余白を設定 */
}

加えて、法律は言語の読み書きができれば無資格者でもある一定レベルの解釈が可能であることから、自身の発言の後ろ盾として引用される傾向が強いです。
著作権法（昭和四十五年法律第四十八号）：e-GOV法令検索というWebサイトもあるものの、専門知識と資格を持つ人ないしは組織の知見を信頼するほうが、安全と言えましょう。

ちなみに上記CSSコードには特筆するようなものはありません。

資格証の表示

このWebサイトでは、作成者が保有している資格の一部を掲載しています。
デジタルの資格証は大きさや形もまちまちであることから、画像ソフトウェアを用いてプレート化してからWebサイトに引っ張るようにしていますね。
このタイプのロゴをCSSで適切に配置するのはけっこう大変なので…


/* .biggraphic クラスは、大きな画像のスタイルを定義します */
.biggraphic {
max-width: 100%; /* 画像の最大幅を親要素の100%に設定 */
height: auto; /* 画像の高さを自動的に設定し、アスペクト比を保持 */
border-radius: 10px; /* 画像の角を10ピクセルの半径で丸める */
margin-bottom: 20px; /* 画像の下に20ピクセルの余白を設定 */
}

他業界のデジタル資格証は分かりませんが、IT関連の場合、合格するとたいていデジタル資格証の発行を促すメールが届きますよ。
資格の認知および知識や技術の伝播を目的として、自身のSNSやWebサイトへ積極的に掲載するよう求められます。
でも、なぜか情報セキュリティマネジメント試験はデジタル資格証がないのです。
国家試験なのに、なぜでしょうね？

当然のことながら、このような資格証を掲示できるのは、試験に合格した有資格者のみです。
他者のサイトやSNSに掲示されている資格証を盗用するようなことは、絶対にしてはなりません。

サイトマップ

全ページをリスト化したサイトマップも用意していますが、けっこうなページ数があります。
下記の「カテゴリー分けサイトマップ」のほうが使いやすいでしょう。

アナザーエデン関連ページ・サイトマップ

アナザーエデンの強敵戦やストーリーコンテンツのリスト、お勧めバッジなどを掲載したコーナーです。
期間限定のない普通のRPGですので、初心者でも安心して続けていけるゲームとなっています。
もっとも重要なグラスタについては、場所別に網羅した表があります。

個人サイトのホスティングとコンテンツ作成

個人でウェブサイトを作るにはどうすればいいか。
HTML・CSS・JavaScriptの書き方はもちろん、無料かつ広告なしでホームページを作る方法を掲載したコーナーです。
Webデザインやレイアウトについても書いてあります。

魚釣りなどアウトドアのエリア

ゲームとパソコンだけじゃなく、アウトドアも趣味なんです。
このコーナーでは魚釣りの記録とか、魚料理のレシピ、はたまたサイクリングなどなど。
アウトドアに関連するコンテンツが詰め込まれています。