元Webデザイナー兼コーダーの備忘録

ITとデザインの話題を中心に書きます。

 menu

HTML入門(HTMLとは)

HTMLとは

HTML(HyperText Markup Language:ハイパーテキストマークアップランゲージ)を無理やり日本語化すると「ハイパーテキストに目印を付ける言語」くらいの意味になります。ハイパーテキストとは、ハイパーリンクを埋め込める文のことです。ハイパーリンクとは、クリックして他のページへ移動する、いわゆるリンクのことです。

コンピュータに文書の構造を理解してもらうために、マークアップ(目印付け)します。例えばクローラーは、マークアップを基にhtmlファイルの文書構造を解析しています。ブラウザは、htmlファイルのマークアップを基に解析して表示します。

HTMLの一番の発明は、ハイパーリンクです。ハイパーリンクが付いたテキストをクリックすると自サイト内を巡ったり、他サイトに移動したりすることができます。パイパーリンクをたどれば、色々な情報にアクセスできるようになったのです。これが、ハイパーなテキストたる所以です。

HTML要素の分解

<h1>HTMLの練習</h1>

上記のHTML要素を分解したものを下図に示します。

HTML要素の分解の図
HTML要素の分解

これがHTMLの要素の1セットです。基本的に、「開始タグ」と「終了タグ」の間に内容を記述します。マークアップ(目印付け)のための記号がHTMLタグです。タグにはいくつか種類がありますが、他で紹介したいと思います。

要素のネスト

要素の中に要素を入れられます。これをネストと言います。

<h1><strong>HTML</strong>の練習</h1>

上記はOKですが、

<h1><strong>HTMLの練習</h1></strong>

この記述はNGです。 タグは、入れ子になっていなければなりません。ブラウザが正確に解析できないため、想定とは違う表示になってしまう可能性があります。

ブロック要素とインライン要素

ブロック要素

ブロック要素は、ひとつの塊として扱われます。一般的には、ブロック要素の前後に改行が入ります。ブロック要素には以下のようなタグがあります。

  • h1~h6
  • p
  • div
  • ul

インライン要素

インライン要素は、ブロック要素の中にある一部分の要素のことです。例えば、h1要素の中のstrong要素です。一般的には、インライン要素の前後に改行は入りません。インライン要素には以下のようなタグがあります。

  • a
  • img
  • span

特殊文字

<、>、"、'、&、などの文字は、特殊文字として扱われます。そのため、そのままではブラウザで表示できません。文字としてブラウザに表示させるには、「文字参照」に置き換える必要があります。特殊文字は他にもあるので、必要な場合は各自で調べて下さい。

特殊文字 文字参照
< &lt;
> &gt;
" &quot;
' &apos;
& &amp;

コメントの書き方

htmlファイル内に残しておきたいことをメモすることができます。ブラウザに表示されませんが、ページのソースとしては残ります。

<!-- これはコメントです。  -->

<!--
複数行にわたるコメントも書けます。
-->

まとめ

  • タグは、基本的に「開始タグ」と「終了タグ」のセット。
  • 要素はネストできる。
  • ブロック要素とインライン要素がある。
  • 特殊文字は、文字参照で置き換えて表示する。
  • htmlファイル内にコメントを書ける。

参考サイト

yoppa org – WWWとは何か? 簡単な歴史と仕組み

はてなブログのカスタマイズ(サイドバー、aboutページ、Not Foundページなど)

使用テーマ

公式テーマのSmooth(デフォルト)を使用しています。

変更内容

サイドバー

以下にアイコンフォントを追加しました。

  • 関連記事
  • 最新記事
  • カテゴリ
/* 関連記事 */
.hatena-module-related-entries .hatena-module-title:before{
font-family:blogicon;
content: "\f013";
}
/* 最新記事 */
.hatena-module-recent-entries .hatena-module-title a:before{
font-family:blogicon;
content: "\f013";
}
/* カテゴリ */
.hatena-module-category .hatena-module-title:before{
font-family:blogicon;
content: "\f022";
}

サイドバーのデザイン変更の図
青丸で囲んだ所が変更箇所です。

aboutページ

  • 「記事の目次」という文言を削除
  • 余白の調整
/* aboutページ */
.page-about .entry-content:before{
display:none;
}
.page-about .entry-content h1{
margin-top: 0;
font-size:1.5em;
}

aboutページのデザイン変更の図

Not Foundページ

  • 「記事の目次」という文言を削除
  • 余白の調整
/* Not Foundページ */
article.no-entry  .entry-content:before{
display:none;
}
article.no-entry .entry-content h1{
margin: 0;
}

Not Foundページのデザイン変更の図

記事のh1タグ

  • h1タグを調整
/* 記事のh1タグ */
.entry-content h1 {
font-size:1.5em;
padding-bottom: 10px;
}

今後の変更予定

  • 細かいところの修正
  • スマホ用のデザインを作る

参考サイト

【カスタマイズ用】はてなブログのHTML構造まとめ

はてなブログのアイコンフォントの使い方

HTMLのiタグで使う

<!-- 記述例 -->
<i class="blogicon-hatenablog"></i>はてなブログ

クラス名を使いたいアイコンフォントのクラス名に変更します。クラス名はアイコンフォント一覧を見てください。

表示例:はてなブログ

当ブログでは、グローバルメニューのところで利用しています。 ホームアイコンの表示例

CSSの疑似要素で使う

/* 記述例 */
.tag:before {
  font-family: "blogicon";
  content: "\f000";
}

アイコンをフォント化したものを読み込んでいます。フォントになっているので、文字と同様にCSSで色を変えたり、大きさを変えたりできます。

表示例:当ブログでは、カテゴリのタグの表示で利用しています。 タグアイコンの表示例

はてなブログのアイコンフォント一覧

はてなブログのアイコンフォントの一覧です。クラス名とコードを適宜利用してください。変更情報は公式で発表していないと思われます。以下は2020年10月時点の情報です。

アイコン クラス名 コード
blogicon-hatenablog f000
blogicon-plus f001
blogicon-minus f002
blogicon-reorder f003
blogicon-grid f004
blogicon-chevron-left f005
blogicon-chevron-right f006
blogicon-chevron-up f007
blogicon-chevron-down f008
blogicon-external f009
blogicon-plugin f00a
blogicon-member f00b
blogicon-account f00c
blogicon-design f00d
blogicon-cog f00e
blogicon-pages f00f
blogicon-edit f010
blogicon-addstar f011
blogicon-subscribe f012
blogicon-entry f013
blogicon-notify f014
blogicon-private f015
blogicon-user f016
blogicon-home f017
blogicon-setting f018
blogicon-draft f019
blogicon-search f01a
blogicon-analytics f01b
blogicon-help f01c
blogicon-comment f01d
blogicon-import f01e
blogicon-odai f01f
blogicon-truck f020
blogicon-group f021
blogicon-folder f022
blogicon-add f023
blogicon-pen f024
blogicon-close f025
blogicon-trash f026
blogicon-bookmark f027
blogicon-redirect f028
blogicon-check f029
blogicon-crop f02a
blogicon-repeat f02b
blogicon-logout f02c
blogicon-star f02d
blogicon-star-o f720
blogicon-pro f02e
blogicon-myblog f030
blogicon-recent f031
blogicon-info f032
blogicon-good f033
blogicon-amazon f034
blogicon-twitter f035
blogicon-facebook f036
blogicon-share f037
blogicon-code f038
blogicon-list f039
blogicon-calendar f03a
blogicon-bracket f03b
blogicon-photo f03c
blogicon-color f03d
blogicon-public f03e
blogicon-realtime-preview f040
blogicon-warning f041
blogicon-link f042
blogicon-time f043
blogicon-markdown f044
blogicon-evernote f045
blogicon-music f046
blogicon-niconico f047
blogicon-heart f048
blogicon-heart-alt f049
blogicon-tag f04a
blogicon-mail f04b
blogicon-help-alt f04c
blogicon-sushi f04d
blogicon-rss f04e
blogicon-smartphone f051
blogicon-laptop f052
blogicon-mixi f053
blogicon-haiku f054
blogicon-amp f055
blogicon-quote f704
blogicon-toggle-on f71d
blogicon-toggle-off f71e
blogicon-odaislot f721
blogicon-grid-3x3 f723
blogicon-grid-vertical f724
blogicon-pinned f727
blogicon-editor-unorderedlist f700
blogicon-editor-orderedlist f701
blogicon-editor-link f702
blogicon-editor-seemore f703
blogicon-editor-blockquote f704
blogicon-editor-footnote f705
blogicon-editor-toolbar-show f706
blogicon-editor-toolbar-hide f707
blogicon-editor-bold f708
blogicon-editor-italic f709
blogicon-editor-strike f70a
blogicon-editor-underline f70b
blogicon-editor-fontsize f70c
blogicon-editor-color f70d
blogicon-editor-insert-toc f725
blogicon-fotolife f711
blogicon-curation-bar-toggle f713
blogicon-paint f714
blogicon-gourmet f715
blogicon-flickr f716
blogicon-gist f717
blogicon-pixiv f718
blogicon-miil f719
blogicon-youtube f71a
blogicon-instagram f71b
blogicon-google-photos f71c
blogicon-others f710
blogicon-rakuten f722
blogicon-breadcrumb f726
blogicon-profilecard f728
blogicon-snippet f72a
blogicon-dazn f72b

備考

上記のアイコンフォントは、はてなブログにデフォルトで読み込まれているものです。当ブログでは、始めから読み込まれているアイコンフォントを使っています。使いたいアイコンフォントがない場合は、Font Awesomeなどを利用してください。