前回、ブログタイトル：「サイト（ホームページやブログ）をアピールする「タイトル」「紹介文」「キーワード」を記載する‐HTML・CSSを学ぶ」で掲載できなかった【HTMLのサンプルソース】コードを掲載します。
また、サイトに「表」を取り入れようと何度か試みていましたがエラーが発生したりして、上手く表示できませんでしたが、今回何とか形になりましたので紹介したいと思います。【HTMLのサンプルソース】コードに記載しています。
- サイト（ホームページやブログ）をアピールする「タイトル」「紹介文」「キーワード」を記載する‐HTML・CSSを学ぶ】
- 基本的な【HTMLのサンプルソース】コードを掲載します。「枠」のコードも記載しています‐HTML・CSSを学ぶ
HTMLのサンプルソース
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis(
ここは"UTF-8"等も良く使われます）">
<title>ここにページのタイトルを入力します</title>
<meta mame="description" content="ここに紹介文を入力します。">
<meta name="keyword" content="キーワードを入力します,keywordsを入力します">
<!--スタイルシートCSS開始-->
<style type="text/css">
h2{ /* h2要素に対して指定 */
background-color: red; /* 文字の背景を赤にします */
color: white; /* 文字色を白にします */
}
<!--枠CSS開始-->
.c1{ /* class="c1" を持つ要素に対して指定 */
width: 100%; /* 幅１００％ */
border: 1px solid #7aa9e2; /* ライン幅１px 色solid #7aa9e2 */
}
.c2{ /* class="c2" を持つ要素に対して指定 */
padding: 5%; /* 内側マージン５％ */
}
<!--枠CSS終了-->
.p { /* class="p"を持つ要素に対して指定 */
color: blue; /* 文字色を青にします */
}
</style>
<!--スタイルシートCSS終了-->
</head>
<body>
<h2>見出し<h2>文字を入力します</h2></h2>
/* スタイルシートh2を指定 */
<div class="c1"> /* スタイルシートc1を指定 */
<div class="c2"> /* スタイルシートc2を指定 */
<div class="p"><p>文字を入力します-1</p><p>文字を入力します-2</p></div>
/* スタイルシートpを指定 */
</div>
</body>
</html>
備考：
「<!--スタイルシートCSS-->」と「/* スタイルシートCSS */」はどちらも同じくブラウザには表示されません。タグや要素の前後、付近に記述しておけばメモ書きに利用できますのでとても便利ですね。
「<h2>見出しh2を入力します。</h2>」 はHTMLタグなので文字として表示する場合は「<h2 >見出しh2を入力します。<h2>」と記述します。
上記のHTMLサンプルソースをブラウザで表示する
<h2>見出しh2を入力します。</h2>
「文字を入力します-1」
「文字を入力します-2」
ホームページやブログのサンプルコードです。沢山のコードを用意してコピー＆ペーストでそのコードを編集すれば簡単にサイトの形が作れたり、イメージを変更できますので便利ですね。
0 件のコメント:
コメントを投稿