カミュプリィの雑多なメモ

タグ: HTML

  • [HTML]本文のまわりにある部品

    ヘッダー

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

    ヘッダー
    本文

    サイドバー

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

    サイドバー
    本文

    フッター

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

    本文
    フッター

  • [HTML]テンプレート

    　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>

  • 開発者向けの説明

    開発者向けの説明

    Web デザインと開発を学ぶすべての人向けに設計されています。
    ベスト プラクティス設計を計画する方法と、Web 標準を使用してコーディングする方法を示します。
    基本的な概念を説明する迅速かつシンプルな記事もあれば、より複雑なトピックを探求する詳細なアプローチを採用している記事もあります。
    これらはすべて、初心者および中級の Web デザイナーや開発者に適しています。

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

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

  • [HTML]サイトアイコン（ファビコン）を設定します

    [HTML]サイトアイコン（ファビコン）を設定します

    　ウェブサイト毎に独自のアイコンが設定されているサイトを目にしますが、ワードプレスのアイコンをそのまま使っているサイトも見かけます
    　このアイコンを変更してみましょう

    画像

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

    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]改行をそのまま表示します

    改行を含んだ値を、そのまま表示するには次のようにします。

    <pre>値<pre>

  • [PHP]お問い合わせフォームをつくりました

    　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>