Let's have a hobby!

多趣味な管理人が綴る雑記趣味ブログ   ~趣味を持とう!~

テンプレート
え?趣味が多い?そんなの関係な~い!人生、楽しく送らなきゃ。
せっかく与えられた 「人生」という名の時間 を自分の思うままに使って何が悪い!

~Enjoy your life!~


貴方は、 人目くらいの訪問者です。

【はてブロ限定!】すぐに役立つHTML 前書き編

どうも、かしゃいぬです。

今回はブログの書き方。もっと言うと「はてなブログ」のHTMLの使い方について、ご紹介いたします。

 

長いので、前書き編」「基本編」「簡単&便利編」「できれば使いたい編」「使わない?編に別けていく予定です(^^;

今日は、「前書き編」です。

 

ハッキリ言って、この記事は読まなくても大丈夫です

はてなブログについて知りたい方は是非ご覧ください。

簡単な内容しか話しませんので、何もわからない!って人でも大丈夫です(^^)

 

前書き編では、「はてなブログの書き方」と、「HTMLの基本」はてなブロガーなら必ず知っておきたい「見たまま編集の落とし穴」の3つを紹介します。

はてなブログの4つの書き方

軽く押さえておきましょう。

 

見たまま編集

HTMLが分からなくても、簡単にブログ記事が書ける方法です。

見たまま編集画面

完成状態と編集中の見た目が同じなので、直感的に記事を作れます。ブログサービスによく見られる、HTMLが自動生成される仕組みです。

ただ、落とし穴も…←今回、基本編での主題です。

※さらに言うと、PCとスマホとで「見たまま編集」の内容が違うんですが、スマホのことは考えないでいきます。

 

HTML編集

Web上の文章を表すための言語。Web上では、もっとも汎用性のある言語です。

HTML編集画面

はてなブログでは、上記の「見たまま編集」で自動生成されます。

が、完璧ではありません。

 

はてな記法

はてなブログの前身となる「はてなダイアリー」で確立した独自の言語です。

はてな界のみで使えます。

はてな記法一覧 - はてなダイアリーのヘルプ

 

Markdown

ざっくり言うと簡略版HTML

簡単な記号でHTMLと同じことができますが、簡略ということは、その分覚えにくいということです。

 

 

 

下の2つは汎用性に欠いているため、見たまま編集の次は、HTMLをやりましょう。

まずは、そこからです。

 

HTMLの基本

そもそも、の話。

全く分からないという人も多いかと思いますので…

 

HTMLとは?

Wikipediaによると…

HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)、略記・略称HTML(エイチティーエムエル)とは、ウェブ上の文書を記述するためのマークアップ言語である。文章の中に記述することでさまざまな機能を記述設定することができる。

っというものだそうです。

 

いちばんやさしいHTML5&CSS3の教本 人気講師が教える本格Webサイトの書き方 (「いちばんやさしい教本」シリーズ)

いちばんやさしいHTML5&CSS3の教本 人気講師が教える本格Webサイトの書き方 (「いちばんやさしい教本」シリーズ)

  • 作者: 赤間公太郎,大屋慶太,服部雄樹
  • 出版社/メーカー: インプレス
  • 発売日: 2016/03/18
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログを見る
 
わかばちゃんと学ぶ Webサイト制作の基本

わかばちゃんと学ぶ Webサイト制作の基本

 

 

作成例

試しに簡単なHTMLを作ってみますね。

HTML説明

<html>

<head>

<title>

ご挨拶

</title>

</head>

<body>

<p font-size=”10”>

こんにちは。

<br />

かしゃいぬと申します。

</p>

</body>

</html>

HTML開始

説明開始

タイトル開始

ご挨拶

タイトル終了

説明終了

内容開始

サイズ10、段落開始

こんにちは。

改行

かしゃいぬと申します。

段落終了

内容終了

HTML終了

Web上での表示

edgeで読み込んでみた。

head部分と書きましたが、厳密に言えば「title部分」です。

 <>で括られたものをタグと言い、その中で色々と設定をするもの(上の例では「font-size=”10”」)を属性と言います。

範囲を決めるようなタグには、<html>〇〇</html>というように、スラッシュを入れた終了タグを範囲の終わりに入れます。手前のタグは開始タグと言います。

改行するとか画像を置くとかの範囲とは関係無いものは要りません。

はてなブログでは、head部分が詳細設定にあり、記事編集画面がbody部分に当たります。

これから話していくのはbodyの中=記事編集の話ということを押さえておいてください。

はてなブログのHTML編集は正確には「XHTML」と呼ばれるモノで、厳密に言うとHTMLとは異なります。

話すと長くなるので、細かい話は割愛します。

HTMLだと、終了タグが省略できる場合が多いですが、XHTMLだといかなる場合も終了タグが必須です。

改行タグやイメージタグに代表される「ポン置き」のモノは、強引に終了タグをつけなければなりません。

 

例えば、改行。

THMLだと<br>となり、XHTMLだと<br><br/>あるいは<br />と書きます。

このブログでは、XHTMLの表記方法で書いていきますので、ご注意ください。

 

※でも、HTML編集で普通のHTMLで入力しても、自動的に修正されるので、神経質にならなくても大丈夫!

 

「見たまま編集」の落とし穴?

皆さんは、どの方法ではてなブログを利用していますか?

恐らくは「見たまま編集」が圧倒的多数はでしょう。かく言う私も、「見たまま編集」を使っています。

なぜなら、その方が早いから。

いちいちHTMLを打ったりしてるよりも、本文を書きたいですからね。そうゆうトコロは自動生成に任せます。

 

 しかし、そこに落とし穴があります。 

 

「見たまま編集」は簡単な編集しかできない上、生成されるHTMLがダメダメなのです。簡素な見た目で中身がグチャグチャなHTMLができあがります。

片づけられない女

片づけられないのは…ねぇ(笑)

 

これは、はてなブログに限った話ではなく、他のブログサービスや有料のホームページビルダーでも同じことが言えます。

理解していなくても記事は書けますし、見た目も変わらないのですが、ページを表示する際に時間がかかったり、エラーのリスクも増えます。 HTMLを学ぶ理由は、そこにあります。

 

 良質な記事を作るには、HTMLをいかに綺麗にするかが、重要なのです。

 

 

今回はココまで。

次回は、実用的な本題に入っていきます。

 


次の記事はコチラ↓

www.kasyainu.com



Copyright (C) 2012-2017 Let's have a hobby! All Rights Reserved.