先生ホームページは何で書かれているか知っていますか?生徒はーい!ホームページはHTMLっていうもので書かれていまーす!先生はい、そうですね。「HTMLなんて知らなくても...」って広告に出てるもーん!ホームページは「HTML」っていうもので書かれているということは自分でホームページを作ろうと思っている方なら知っていると思います。「HTML」を知っているか?というとそうではない方が多いのも事実です。ホームページ作成の基本はHTMLです。HTMLを理解しているとたとえHTMLを知らなくても投稿できるブログであれ、WordPressであれイザというときに役に立ちます。投稿の表現の幅が広がります。ここではこれだけは覚えておきたいHTMLを紹介します。表(テーブル)のタグ(table,tr,td)「表(テーブル)のタグ(table,tr,td)」の記述方法まずはこれだけをしっかり理解しよう絶対に覚えておいた方が良いHTMLタグ見出しタグ(h1,h2,h3,h4,h5,h6)通常の作文や論文、レポートを書く際には文書のタイトルをつけたり、文書の内容ごとに見出しを付けてその文書を読みやすく、理解しやすくします。これはホームページの文章でも同じです。ペンで紙に書く文書では見出しは行を独立させたり、文字の色を変えたり、大きめの文字で書いたりして見出しと分かるようにします。ホームページ作成の場合には「見出しのタグ」を使用します。「見出しのタグ」を使わなくてもHTMLやCSSで文字のサイズを変えたり、改行したりして見出しのように視覚的に見せることは可能です。SEOの観点からも見出しには「見出しのタグ」を使うことが必要です。「見出しのタグ」は「hタグ」ともいわれ「h1」「h2」「h3」「h4」「h5」「h6」の6段階で表すことが出来ます。「h1」は通常ページのタイトルとなりそのページのキーワードを含んでいたりします。続いて「h2」「h3」...と全部で6段階あります。「見出しタグ」の記述方法<h1>h1の見出し</h1><h2>h2の見出し</h2><h3>h3の見出し</h3><h4>h4の見出し</h4><h5>h5の見出し</h5><h6>h6の見出し</h6>このように記述すると以下の表示例のように表示されます。段落のタグ(p)通常の文章でも「文のかたまり」を「段落」といいます。これはホームページでも同じです。ブログサービスやWordPressなどのCMSで文章を入力すれば何もしなくてもたいていはこの段落のタグで記述されます。意識することのないHTMLタグですが、最も頻繁に使われるタグと言えます。「段落のタグ」の記述方法<P>むかし、むかし、あるところに、おじいさんとおばあさんがありました。まいにち、おじいさんは山へしば刈りに、おばあさんは川へ洗濯に行きました。</p><p>ある日、おばあさんが、川のそばで、せっせと洗濯をしていますと、川上から、大きな桃が一つ、「ドンブラコッコ、スッコッコ。ドンブラコッコ、スッコッコ。</p>このように記述すると以下の表示例のように表示されます。改行のタグ(br)文章を開業したいときに使用するのが「改行のタグ」です。「段落のタグ(p)」と混同しやすいですが、「改行」は単純に行を改めるだけです。見た目では「段落のタグ(p)」は1行隙間が出来ますが、「改行のタグ(br)」では隙間はありません。「改行のタグ」の記述方法<P>むかし、むかし、あるところに、おじいさんとおばあさんがありました。まいにち、おじいさんは山へしば刈りに、おばあさんは川へ洗濯に行きました。</p><p>ある日、おばあさんが、川のそばで、せっせと洗濯をしていますと、川上から、大きな桃が一つ、<br>「ドンブラコッコ、スッコッコ。<br>ドンブラコッコ、スッコッコ。」<br>と流れて来ました。</p>このように記述すると以下の表示例のように表示されます。ここで注意したいのが「改行のタグ(br)」を2つ続けると見た目は段落と同じになりますが、HTMLの文法上は好ましくありません。文章のまとまりを表すのは段落のタグを使うことが正しいです。こんな「改行のタグ(br)」の記述の仕方は間違い<p>むかし、むかし、あるところに、おじいさんとおばあさんがありました。まいにち、おじいさんは山へしば刈りに、おばあさんは川へ洗濯に行きました。<br><br>ある日、おばあさんが、川のそばで、せっせと洗濯をしていますと、川上から、大きな桃が一つ、<br>「ドンブラコッコ、スッコッコ。<br>ドンブラコッコ、スッコッコ。」<br>と流れて来ました。</p>こんな風に記述しても以下のように段落のように表示されますが、HTML文法上は正確ではありません。リンクのタグ(a)テキストにリンクを作成することはサイト内の別のページに移動させたい場合や他のサイトを開きたい時など頻繁に使用します。ブログサービスやWordPressなどのCMSではリンク作成のボタンなどがあると思いますがどのようなタグなのかを理解しておくことは大切です。target="_blank">テキスト</a>「tardet=”_blank”」をつけると別のタブまたはウィンドウでリンク先のページを開くことが出来ます。画像のタグ(img)ほとんどのホームページではそれぞれのページで画像を貼り付けています。画像を貼り付けることで文字では表現できないものも視覚的に表現することが出来ます。通常、ブログサービスやWordPressなどのCMSでは画像を貼り付けるためのボタンや機能があるためこのタグを入力することは滅多にありませんが、どのようなタグなのかを理解しておくことは大切です。alt="画像の説明"></a>これらも覚えておきたいHTMLタグリストのタグ(ul,ol,li)箇条書きのHTMLタグです。箇条書きには「・」で並べるリストと番号付きのリストがあります。見た目では改行で表現することも可能ですが箇条書きは「リストのタグ」で記述することが大切です。<!--番号付きの箇条書き--><ol><li>ももたろう</li><li>うらしまたろう</li><li>おむすびころりん</li></ol>このように記述すると以下の表示例のように表示されます。表(テーブル)のタグ(table,tr,td)表を作るためのHTMLタグです。初心者が一番最初に悩むHTMLタグではないかと思います。WordPressなどのCMSでも視覚的に簡単に表(テーブル)を作成できるようになってきています。これもHTMLでどのように記述されているかを理解しておくと何かと便利です。「表(テーブル)のタグ(table,tr,td)」の記述方法<table><tr><td>だいこん</td><td>200円</td></tr><tr><td>にんじん</td><td>180円</td></tr><tr><td>じゃがいも</td><td>90円</td></tr></table>このように記述すると以下の表示例のように表示されます。これだけをしっかり理解しよういかがでしょう。HTMLタグはまだまだありますが、ブログサービスやホームページ作成サービス、WordPressなどのCMSを活用して記事を投稿するのであればこれくらいは身に着けておきましょう。これらのタグをしっかり理解出来たらその他のタグも少しずつ理解が進んでいくはずです。0この記事に関連する投稿記事こういう人はホームページ公開、運営で失敗しやすいこれまでホームページを公開したことない、運営したことないという方にとって果たしてこれから作成するホームページが効果あるものとなるのかどうかはとても不安に思われることだと思います。ホームページ運営こんな記事が良く読まれていますWordPressのインストール後のデザインは?WordPress(ワードプレス)最近のレンタルサーバーはWordPressのインストールが簡単にできますのでWordPressのインストールまでは誰でも戸惑うことなくできるようになりました。困りごとWordPressを簡単にインストールできるレンタルサーバー【1】レンタルサーバーガイドWordPressでWebサイトを制作する方が増えてきましたね。簡単インストールブロガー専用テーマ「ストーク19」WordPressテーマブロックエディター対応テーマWordPressテーマ「ストーク(STORK)19」はレスポンシブデザインで特にスマホでの閲覧のしやすさを第一に考慮して設計されています。レスポンシブデザインお名前.comでドメインを取得しようドメイン取得と各種設定ドメインの取得はレンタルサーバー会社でも取得できますが、一般的に割高であったり、将来サーバーを移転することがあったりした場合手続きが煩雑になる場合もあります。独自ドメインWordPressを簡単にインストールできるレンタルサーバー【2】レンタルサーバーガイドWordPressでWebサイトを制作する方が増えてきましたね。簡単インストールWordPressで作成作業中のWebサイトを見られたくない時にする設定WordPress(ワードプレス)WordPressをインストールしたらまずは最初にやっておきたい設定がいくつかあります。WordPressで作成作業中のWebサイトを見られたくないと思ったときにしておく設定です。WordPress」WordPressプラグインガイド「FancyboxforWordPress」はWordpressに貼り付けた画像、写真を拡大させるときにカッコよく表示させるためのプラグインです。)WordPressテンプレートタグカテゴリーのリストをリンク付で表示させます。リンクをクリックするとそのカテゴリーに属する投稿を表示させることが出来ます。サイドバーで使うことが多いです。見るブロックエディターでコピペで勝手に半角スペースが入って困るときWordPress投稿&固定ページ作成マニュアルWordPressの新しいエディターブロックエディターを使っていると「おや?」と思うのが...「テキストをコピペするとその前後に半角スペースが勝手に入る」っていうこと。困りごとこういう人はホームページ公開、運営で失敗しやすいホームページ作成前に...これまでホームページを公開したことない、運営したことないという方にとって果たしてこれから作成するホームページが効果あるものとなるのかどうかはとても不安に思われることだと思います。見出しWordPress(ワードプレス)このブロックには、想定されていないか無効なコンテンツが含まれています。Reserved.ホームホームページ作成が面倒な方はこちらメールはこちらこのページのトップへメニュ。