HTML – カミュプリィの雑多なメモ https://www.commuply.co.jp/technic/memo Sun, 02 Nov 2025 05:32:29 +0000 ja hourly 1 https://wordpress.org/?v=7.0.3 https://www.commuply.co.jp/technic/memo/wp-content/uploads/site-icon-150x150.png HTML – カミュプリィの雑多なメモ https://www.commuply.co.jp/technic/memo 32 32 [HTML]本文のまわりにある部品 https://www.commuply.co.jp/technic/memo/html%e6%9c%ac%e6%96%87%e3%81%ae%e3%81%be%e3%82%8f%e3%82%8a%e3%81%ab%e3%81%82%e3%82%8b%e9%83%a8%e5%93%81/ Sun, 02 Nov 2025 05:32:29 +0000 https://www.commuply.co.jp/technic/memo/?p=1523 ヘッダー

　多くのホームページ（最初のページ）には画面上部に『ヘッダー』があります。サイトのロゴやタイトルのほか、ナビゲーション要素のメニューやパンくずリストが配置されていることがあります。

ヘッダー
本文

サイドバー

　ナビゲーション要素のメニュー、ブログのカテゴリーや履歴などを中心に、ヘッダーを表示しないときはサイトのロゴやタイトルを配置します。スマートフォンなど縦長の携帯端末では配置しません。

サイドバー
本文

フッター

　著作権表示や、本文に関連するページへのリンクを配置します。

本文
フッター

]]> 開発者向けの説明 https://www.commuply.co.jp/technic/memo/%e9%96%8b%e7%99%ba%e8%80%85%e5%90%91%e3%81%91%e3%81%ae%e8%aa%ac%e6%98%8e/ Sat, 25 Oct 2025 07:21:40 +0000 https://www.commuply.co.jp/technic/memo/?p=1470 Web デザインと開発を学ぶすべての人向けに設計されています。
ベスト プラクティス設計を計画する方法と、Web 標準を使用してコーディングする方法を示します。
基本的な概念を説明する迅速かつシンプルな記事もあれば、より複雑なトピックを探求する詳細なアプローチを採用している記事もあります。
これらはすべて、初心者および中級の Web デザイナーや開発者に適しています。

デビッド・ワトソンによる開発者向けの説明　～より良い Web の構築を支援する～

とても分かりやすいと感じました

]]> [PHP]お問い合わせフォームをつくりました https://www.commuply.co.jp/technic/memo/%e3%81%8a%e5%95%8f%e3%81%84%e5%90%88%e3%82%8f%e3%81%9b%e3%83%95%e3%82%a9%e3%83%bc%e3%83%a0%e3%82%92%e3%81%a4%e3%81%8f%e3%82%8a%e3%81%be%e3%81%97%e3%81%9f/ Mon, 07 Feb 2022 05:37:09 +0000 https://www.commuply.co.jp/technic/website/?p=212 　HTMLとPHPをつかって、お問い合わせ内容をメールで送信するものをつくりました。

HTML

<form action="PHPファイル名.php" method="post">

<p>ご返信先メールアドレス<br>

<input name="email" type="email" size="40"></p>

<br>

<p>ご用件を教えてください<br>

<textarea name="body" required cols="40" rows="6" placeholder="ウェブサイト作成のご依頼ほか"></textarea></p>

<p><input type="submit" value="送信"></p>

</form>

PHP

<!doctype html>

<html lang="ja">

<head>

<meta charset="utf-8">

</head>

<body>

<main>

<?php

$email = $_POST['email'];

$body = $_POST['body'];

mb_language("Japanese");

mb_internal_encoding("UTF-8");

$headers = "From: $email";

mb_send_mail($email, "お問い合わせ", $body, $headers);

print ("お問い合わせありがとうございます");

?>

</body>

</html>

]]> [HTML]改行をそのまま表示します https://www.commuply.co.jp/technic/memo/%e6%94%b9%e8%a1%8c%e3%82%92%e3%81%9d%e3%81%ae%e3%81%be%e3%81%be%e8%a1%a8%e7%a4%ba%e3%81%97%e3%81%be%e3%81%99/ Fri, 04 Feb 2022 06:34:44 +0000 https://www.commuply.co.jp/technic/website/?p=184 値<pre>]]> 改行を含んだ値を、そのまま表示するには次のようにします。

<pre>値<pre>

]]> [HTML]サイトアイコン（ファビコン）を設定します https://www.commuply.co.jp/technic/memo/favicon/ Sun, 30 Jan 2022 13:16:19 +0000 https://www.commuply.co.jp/technic/website/?p=123 　ウェブサイト毎に独自のアイコンが設定されているサイトを目にしますが、ワードプレスのアイコンをそのまま使っているサイトも見かけます
　このアイコンを変更してみましょう

画像

　サイズが異なる画像（シンボル）がいくつか必要になります

favicon.ico（ふぁびこん）

　縦横ともに48ピクセルの画像で用意します
　ファイルをFTPでサイトのルートフォルダに保存します
例：www.commuply.co.jp/favicon.ico

apple-touch-icon.png

　縦横ともに180ピクセルの画像で用意します
　ファイルをFTPでサイトのルートフォルダに保存します
例：www.commuply.co.jp/apple-touch-icon.png

サイトアイコン

　縦横ともに150ピクセル以上のアイコンを用意しましょう
　検索エンジンは48ピクセルの倍数がよいそうなので、48ピクセルの4倍にあたる192ピクセルにします

HTMLファイルのばあい

HTMLの<head>の中に次の行を書きます。

<link rel="icon" href="/favicon.ico.ico"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

WordPress（ワードプレス）のばあい

　[メディア]に192ピクセルの画像と512ピクセルの画像を登録します
　512ピクセルの画像を、[設定]－[一般]にある[サイトアイコン]に設定します
　192ピクセルの画像を、[外観]からテーマの[サイトアイコン]を設定します。テーマ毎に具体的な設定場所が異なります

　[Ogp Plus]プラグインを登録して、デフォルトOGP画像に192ピクセルの画像を登録します

　[Head & Footer Code]プラグインを登録して、[HEAD Code]欄に次のコードを登録します

<link rel="icon" href="/favicon.ico.ico"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

BaserCSM（ベーサーシーエムエス）のばあい

サイトのフォルダ/app/webroot/favicon.icoを更新します。

]]> [HTML]テンプレート https://www.commuply.co.jp/technic/memo/html-template/ Sun, 30 Jan 2022 12:20:55 +0000 https://www.commuply.co.jp/technic/website/?p=117 　HTMLの書き方は人それぞれ多種多様ではないかとおもいます。
しかしながら初めてHTMLを書こうと思い立ったひとは、やることが多すぎて困ってしまうのかなとおもいます。
そんなわけでこんな感じでどうでしょうか？というテンプレートをつくってみました。

<!doctype html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width,initial-scale=1″>
<meta name=”description” content=”ページの要約”>
<meta name=”keywords” content=”キーワード1,キーワード2″>
<title>ページのタイトル</title>
<link rel=”shortcut icon” href=”./favicon.ico”>
<meta property=”og:site_name” content=”サイト名”>
<meta property=”og:type” content=”website”>
<meta property=”og:url” content=”サイトのパス”>
<meta name=”twitter:card” content=”summary”>
<meta name=”twitter:domain” content=”サイト名”>
<link rel=”stylesheet” href=”./スタイルシートのファイル名.css”>
</head>
<body>
<header>
/* ここにページの上部を書く */
</header>
<main>
/* ここにページの本文を書く */
</main>
<footer>
<small>Copyright &copy; 2022 <a href=”著作者のサイトのパス”>著作者名</a></small>
</footer>
<script type=”text/javascript” src=”./スクリプトのファイル名.js”></script>
</body>
</html>

]]>