リンク
メモ：
ハイパーリンクは、web サイトとコンテンツを接続するために不可欠です。 リンクを作成するには、word または google doc の「リンクを挿入」オプションを使用します。
リンクは、すべてのデフォルトコンテンツと様々な書式設定オプションに追加できます。
Word とGoogle Docsでは、絶対リンクのみが受け入れられます。これは通常、ブラウザーからコピーして貼り付けるのが簡単です。 外部リンクは絶対リンクを維持しながら、リンクは自動的にサイトに対する相対リンクに変換されます。
多くの場合、リンクはテキストリンクや参照以外にも使用されます。例えば、埋め込みメディアや、ページ内でインライン化された参照フラグメントなどです。
例：
コンテンツ構造：
コード：
リンクはデフォルトコンテンツと見なされるので、プロジェクトまたはブロックの CSS コードでスタイル設定されます。 通常、JavaScript コードは使用されません。
ボイラープレートプロジェクトにリンク関連のスタイルコードがありません。
特記事項： Microsoft Word Online では、画像にリンクを設定できません。回避策としては、作成者が画像のすぐ下にリンクを配置して、それをクライアントサイドにラップする方法があります（例：）。
/**
* Wraps images followed by links within a matching <a> tag.
* @param {Element} container The container element
*/
function wrapImgsInLinks(container) {
const pictures = container.querySelectorAll('picture');
pictures.forEach((pic) => {
const link = pic.nextElementSibling;
if (link && link.tagName === 'A' && link.href) {
link.innerHTML = pic.outerHTML;
pic.replaceWith(link);
}
});
}
特別な注意事項： 新しいウィンドウで開く必要がある特定のリンクは、クライアントサイドの外部リンクか PDF （例：）かに基づいて処理することをお勧めします。
/**
* Handles external links and PDFs to be opened in a new tab/window
* @param {Element} main The main element
*/
export function decorateExternalLinks(main) {
main.querySelectorAll('a').forEach((a) => {
const href = a.getAttribute('href');
if (href) {
const extension = href.split('.').pop().trim();
if (!href.startsWith('/')
&& !href.startsWith('#')) {
if (!href.includes('xyz.com') || (extension === 'pdf')) {
a.setAttribute('target', '_blank');
}
}
}
});
}