Embedded Files
02 html事始め_言語の解説
02 html事始め_言語の解説
02-1 ホームページのソースコードの表示方法
02-1 ホームページのソースコードの表示方法
実際にホームページがHTMLで書かれているのをどうやって読むのかをここで紹介します。クラウドベースのhtmlには余分なコマンド記載がありますので最初は慣れないかもしれません。わからない場合にはbardやchatGPTを使うと良いでしょう。
以下のリンクは京都大学の総長のからのメッセージのページです。
https://www.kyoto-u.ac.jp/ja/about/president
以下の図に示すようにcrhomブラウザの
htmlの読み方と解説 <a></a>と<p></p>
htmlの読み方と解説 <a></a>と<p></p>
htmlはタグで作られています。
<h1></h1> headdingで見出しを表す。
<p></p> paragraf で 段落を表す
<img></img> imageで画像を表示（指定）する(.jpg, .png, .gif)
<a><herf><herf></<a> anker(碇)でリンクを表す
これの他に多様なタグがあります。詳細は以下のようなページを参考にしてもよいでしょう。
クロノドライブのHTML辞典 https://html-coding.co.jp/annex/dictionary/html/
ソースコード（前半部分）
ソースコード（前半部分）
<!DOCTYPE html>
<html lang="ja" dir="ltr" prefix="content: http://purl.org/rss/1.0/modules/content/ dc: http://purl.org/dc/terms/ foaf: http://xmlns.com/foaf/0.1/ og: http://ogp.me/ns# rdfs: http://www.w3.org/2000/01/rdf-schema# schema: http://schema.org/ sioc: http://rdfs.org/sioc/ns# sioct: http://rdfs.org/sioc/types# skos: http://www.w3.org/2004/02/skos/core# xsd: http://www.w3.org/2001/XMLSchema# ">
<head>
<meta charset="utf-8" />
<style>/* @see https://github.com/aFarkas/lazysizes#broken-image-symbol */.js img.lazyload:not([src]) { visibility: hidden; }/* @see https://github.com/aFarkas/lazysizes#automatically-setting-the-sizes-attribute */.js img.lazyloaded[data-sizes=auto] { display: block; width: 100%; }</style>
<link rel="shortlink" href="https://www.kyoto-u.ac.jp/ja/about/president" />
<meta property="og:site_name" content="京都大学" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://www.kyoto-u.ac.jp/ja/about/president" />
<meta property="og:title" content="総長からのメッセージ" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="Generator" content="Drupal 10 (https://www.drupal.org)" />
<meta name="MobileOptimized" content="width" />
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="text/javascript" data-toolbar-anti-flicker-loading>(function() {
const toolbarState = sessionStorage.getItem('Drupal.toolbar.toolbarState')
? JSON.parse(sessionStorage.getItem('Drupal.toolbar.toolbarState'))
: false;
// These are classes that toolbar typically adds to <body>, but this code
// executes before the first paint, when <body> is not yet present. The
// classes are added to <html> so styling immediately reflects the current
// toolbar state. The classes are removed after the toolbar completes
// initialization.
const classesToAdd = ['toolbar-loading', 'toolbar-anti-flicker'];
if (toolbarState) {
const {
orientation,
hasActiveTab,
isFixed,
activeTray,
activeTabId,
isOriented,
userButtonMinWidth
} = toolbarState;
classesToAdd.push(
orientation ? `toolbar-` + orientation + `` : 'toolbar-horizontal', );
if (hasActiveTab !== false) {
classesToAdd.push('toolbar-tray-open');
}
if (isFixed) {
classesToAdd.push('toolbar-fixed');
}
if (isOriented) {
classesToAdd.push('toolbar-oriented');
}
if (activeTray) {
// These styles are added so the active tab/tray styles are present
// immediately instead of "flickering" on as the toolbar initializes. In
// instances where a tray is lazy loaded, these styles facilitate the
// lazy loaded tray appearing gracefully and without reflow.
const styleContent = `
.toolbar-loading #` + activeTabId + ` {
background-image: linear-gradient(rgba(255, 255, 255, 0.25) 20%, transparent 200%);
}
.toolbar-loading #` + activeTabId + `-tray {
display: block; box-shadow: -1px 0 5px 2px rgb(0 0 0 / 33%);
border-right: 1px solid #aaa; background-color: #f5f5f5;
z-index: 0;
}
.toolbar-loading.toolbar-vertical.toolbar-tray-open #` + activeTabId + `-tray {
width: 15rem; height: 100vh;
}
.toolbar-loading.toolbar-horizontal :not(#` + activeTray + `) > .toolbar-lining {opacity: 0}`;
const style = document.createElement('style');
style.textContent = styleContent;
style.setAttribute('data-toolbar-anti-flicker-loading', true);
document.querySelector('head').appendChild(style);
if (userButtonMinWidth) {
const userButtonStyle = document.createElement('style');
userButtonStyle.textContent = `#toolbar-item-user {min-width: ` + userButtonMinWidth +`px;}`
document.querySelector('head').appendChild(userButtonStyle);
}
}
}
document.querySelector('html').classList.add(...classesToAdd);
})();</script>
<meta property="og:locale" content="ja_JP" />
<meta name="theme-color" content="#00205b" />
<link rel="apple-touch-icon" href="https://www.kyoto-u.ac.jp/themes/custom/camphor/images/apple-touch-icon.png" />
<meta property="og:image" content="https://www.kyoto-u.ac.jp/themes/custom/camphor/images/ogimage.png" />
<link rel="icon" href="/themes/custom/camphor/favicon.ico" type="image/vnd.microsoft.icon" />
<link rel="alternate" hreflang="ja" href="https://www.kyoto-u.ac.jp/ja/about/president" />
<script src="/sites/default/files/google_tag/ga4/google_tag.script.js?scjqsf" defer></script>
<script src="/sites/default/files/google_tag/primary/google_tag.script.js?scjqsf" defer></script>
<title>総長からのメッセージ | 京都大学</title>
<link rel="stylesheet" media="all" href="/sites/default/files/css/css_5MuGQHZoodLyHzJ2vVU6vaqsgertYng4sxvE7RfA_Xg.css?delta=0&language=ja&theme=camphor&include=eJxVjkEOwyAMBD9EypMix1iExuAUQyXn9UVKRdXLancOo2W4zPMIp6aNst9AySGDqv31TKoQSR1KJV-kZuB00T2fr07V7i4FB4V87lJ9ZNmAF23GqUSnDVrSllB9qP0EfvyIYzDpbQ1JUd5DN0yEwtPFFAFtur6_igRyR18D6L4J1OCPvszxAfSlVvA" />
<link rel="stylesheet" media="all" href="/sites/default/files/css/css_asfMNOv7RKREyv5SCaYLxV1sS4Bj0MNaxwNbD7S5TgQ.css?delta=1&language=ja&theme=camphor&include=eJxVjkEOwyAMBD9EypMix1iExuAUQyXn9UVKRdXLancOo2W4zPMIp6aNst9AySGDqv31TKoQSR1KJV-kZuB00T2fr07V7i4FB4V87lJ9ZNmAF23GqUSnDVrSllB9qP0EfvyIYzDpbQ1JUd5DN0yEwtPFFAFtur6_igRyR18D6L4J1OCPvszxAfSlVvA" />
<link rel="stylesheet" media="all" href="//fonts.googleapis.com/css2?family=Lora:wght@500&family=Noto+Sans+JP:wght@400;500&display=swap" />
<link rel="stylesheet" media="all" href="//fonts.googleapis.com/css2?family=Material+Icons" />
<link rel="stylesheet" media="print" href="/sites/default/files/css/css_g6SQlKdCtWZTnOfB0ksgq92oDJaHxzl1sQlxX2xn99s.css?delta=4&language=ja&theme=camphor&include=eJxVjkEOwyAMBD9EypMix1iExuAUQyXn9UVKRdXLancOo2W4zPMIp6aNst9AySGDqv31TKoQSR1KJV-kZuB00T2fr07V7i4FB4V87lJ9ZNmAF23GqUSnDVrSllB9qP0EfvyIYzDpbQ1JUd5DN0yEwtPFFAFtur6_igRyR18D6L4J1OCPvszxAfSlVvA" />
</head>
<body class="path-node page-node-type-page">
<a href="#main-content" class="visually-hidden focusable skip-link">
メインコンテンツに移動
</a>
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PVPH2PW" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript><noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NZS88MH" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<div class="dialog-off-canvas-main-canvas" data-off-canvas-main-canvas>
google geminiによるプロンプトと解説
google geminiによるプロンプトと解説
「次のhtmlを解説してください」の後にソースコードを記載し実行します。次のような解説が表示されます。
ここではソースコードの前半部分を利用しています。
＊Google geminiの利用法：Google のアカウントからgoogle geminiを検索してログインします。初めて利用する場合は利用規定を承諾します。google geminiはgenerative AIの一つです。chatGPTでも同様に動作します。無料版ではそれぞれのAIがユーザー入力を学習していきますので、機密情報は入れないように注意が必要です。（有料版だと学習しない設定ができるようです）
＊chatGPT https://chat.openai.com/ 「sine up」からアカウトが作れます。
解説: 京都大学ウェブサイトのソースコード
このHTMLコードは、京都大学のウェブサイトの一部 (総長からのメッセージ: https://www.kyoto-u.ac.jp/ja/about/president) のソースコードです。
各要素の説明
<!DOCTYPE html>: 文書がHTML5であることを宣言
<html>: HTMLのルート要素
lang="ja": 言語を日本語と指定
dir="ltr": 文字の方向を左から右へ
<head>: 文書のヘッド部分。主にメタデータやスタイルシートを記述
<meta>: メタデータ。検索エンジンやブラウザに対して、文書に関する情報を提供
charset="utf-8": 文字エンコーディングをUTF-8と指定
property="og:...": Open Graph プロパティ。ソーシャルメディアでの共有時にどのように表示されるかを指定
name="...": メタデータの種類を指定 ( Generator, MobileOptimized, など)
<link>: 外部リソースの読み込み
rel="shortlink": 短いURLへのリンク
rel="stylesheet": スタイルシートの読み込み
rel="apple-touch-icon": Apple Touch Icon の読み込み
rel="icon": ファビコンの読み込み
rel="alternate": 英語版など、別の言語のページへのリンク
<script>: JavaScript の記述
このページでは、ページの読み込み時に、おそらくナビゲーションバーの挙動を制御するスクリプトが仕込まれている。
<body>: 文書の本文部分
class="path-node page-node-type-page": 恐らく、CMS (コンテンツ管理システム)によって付与されたクラス
<a>: リンク
class="visually-hidden focusable skip-link": スクリーンリーダー向けのスキップリンク
noscript: JavaScriptが無効な場合に実行される要素
Google Tag Manager のタグが記述されている
まとめ
このコードは、基本的なHTML構造に沿って、京都大学のウェブサイトの一部を記述しています。メタデータの記述や JavaScript の利用など、SEO (検索エンジン最適化) やユーザーエクスペリエンス向上の施策が取り入れられています。
画像フォルダの作成
画像フォルダの作成
ホームページの作成には画像が多用されます。クラウド型のホームページでは全てがデータベースかされていて必要なフォルダに入っています。ただ、ご自分でサイトを作成する場合、利用した画像をまとめておくことをお勧めします。ファイル名もわかりやすく記載することをお勧めします。
Google spreadsheetで作成した表を埋め込む
Google spreadsheetで作成した表を埋め込む
htmlでは表を作成することができます。コード<table></table>を使います。
試しにgoogle spreadsheetで表を作成して htmlで書き出したコードを見てみましょう。
長いhtmlコードとresourcesフォルダにsheet.cssがあります。.htmlファイルをエディタで開きます。
この中で検索で<table>を探します。この<table>から後が重要です。書き出されたデータは改行が入っていないので下記に整理して表示してみます。
<table class="waffle" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th class="row-header freezebar-origin-ltr"></th>
<th id="0C0" style="width:100px;" class="column-headers-background">A</th>
<th id="0C1" style="width:100px;" class="column-headers-background">B</th>
</tr>
</thead>
<tbody>
<tr style="height: 20px">
<th id="0R0" style="height: 20px;" class="row-headers-background">
<div class="row-header-wrapper" style="line-height: 20px">1</div>
</th>
<td class="s0" dir="ltr">商品名</td>
<td class="s0" dir="ltr">単価(円)</td>
</tr>
<tr style="height: 20px">
<th id="0R1" style="height: 20px;" class="row-headers-background">
<div class="row-header-wrapper" style="line-height: 20px">2</div>
</th>
<td class="s0" dir="ltr">りんご</td>
<td class="s1" dir="ltr">150</td>
</tr>
<tr style="height: 20px">
<th id="0R2" style="height: 20px;" class="row-headers-background">
<div class="row-header-wrapper" style="line-height: 20px">3</div>
</th>
<td class="s0" dir="ltr">みかん</td>
<td class="s1" dir="ltr">100</td>
</tr>
</tbody>
</table>
GoogleサイトではHTMLを入力できます。wordprssなどでも同様です。
Googleサイトの挿入/埋め込むを開いて、
コードエディターについて
コードエディターについて
Page updated
Google Sites
Report abuse