Let's have a hobby!

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

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

~Enjoy your life!~


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

【はてブロ限定!】すぐに役立つHTML 使わない?編

前回の記事はコチラ↓

www.kasyainu.com


 

今回は、前書き編」「基本編」「簡単&便利編」「できれば使いたい編」「使わない?編の最後。

「使わない?編」です。

白人ボーイの疑問

使い道が思い浮かばないもの、知らなくても問題ないようなモノを集めてみました。

 

...でも、こういう小さな差がブログを良くs(ry

何でもないです(笑)

 

始めましょう!

 

「文字を動かす」「等幅フォント」「定義型リスト」の3つを見て、「あとがき」をサラッと書いて、終わります。

 

 

文字を動かす

数少ない動的なHTMLタグをご紹介しましょう。

 

スクロール

Web上での見え方HTML

 

スクロール

 

 

<marquee>

スクロール

</marquee> 

 

右から左へのスクロールを行います。アナウンスなんかに使えそうですね。

 

逆スクロール

Web上での見え方HTML

 

逆スクロール

 

 

<marquee direction="right">

逆スクロール

</marquee> 

 

通常のスクロールとは逆に、左から右に動きます。

 

左右に動く

Web上での見え方HTML

 

左右に動く

 

 

<marquee behavior="alternate">

左右に動く

</marquee> 

 

これも何かに使えそうな気がします。

 

上下に動く

Web上での見え方HTML

 

上下に動く

 

 

<marquee behavior="alternate" direction="up" height="100" style="height: 100px;">

上下に動く

</marquee> 

 

縦幅を指定して、こんな事も出来ます。

 

合わせ技

Web上での見え方HTML

 

合わせ技

 

 

<marquee behavior="alternate">

<marquee behavior="alternate" direction="up" height="100" style="height: 100px;">

合わせ技

</marquee>

</marquee>

 

左右の動き上下の動きを融合させると、こんな風にも動かせますね。

単純に、二重に囲っているだけです。

 

等幅フォント

文字の幅を全て一定に保ちます。

Web上での見え方HTML

 

コレが等幅フォントです。
ABCdefg

 

 

<tt>

コレが等幅フォントです。

<br />

ABCdefg

</tt>

 

なんか、間延びしている感じもしないでもないですが…(;´・ω・)

幅を一定に保つやり方です。

 

定義型リスト

はてなブログでは、「箇条書き」「番号付きリスト」が簡単に作成できるようになっていますね。

それとは、別の形態でリストを作る方法です。

Web上での見え方HTML

 

漢字
秦,浅,竹,牧
大文字
A,D,F,G
小文字
b,c,e,h

 

 

<di>

<dt>漢字</dt>

<dd>秦,浅,竹,牧<dd>

<dt>大文字</dt>

<dd>A,D,F,G</dd>

<dt>小文字</dt>

<dd>b,c,e,h</dd>

</di>

 

こんな感じで、リストを作成することができます。

こういう方法を知っていたら、どこかで使えるかもしれません。

 

まとめ

  • 文字はHTMLで動かせる!
  • 等幅フォントで幅を均等に!
  • 定義で分けるリストも作れる!

 

 うーん…素直に使い道に困りますね(^^;)

できるけど、なくてもイイ。

 

寧ろ面倒くさい!

 

以上、使用頻度の低いアレコレの紹介でした。

 

 

あとがき

お疲れ様でした。

これまで、5つの記事に分けて色々な事を紹介してきました。文字数にして16,000字over。なかなかの分量でしたね('ω')

これらのHTMLを一通り網羅しておけば、質の高い記事を作ることができるのではないでしょうか?

 

「見たまま編集」は、基本的な機能しかないため、凝った事ができません。

より良い記事を作るためには、HTMLを少なからず知っておく必要があります。

はてなブログで提供してくれる機能を利用しつつ、個人的な表現を盛り込むっと言う事で、より自分なりのブログが作れるのではないかと思います。

 

紹介してきたHTMLは、ほんのごく一部です。勉強するととても深いモノなので、興味があれば、もっと調べてみるのが良いでしょう。

デザイン的な面は、CSSを学ぶことによって、飛躍的に向上しますよ!

はてなブログではCSSを簡単に操作できる機能はないので、コチラを学ぶことは、とても大切だと思います。構造だけでも理解しておくことをオススメします。

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

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

  • 作者: 赤間公太郎,大屋慶太,服部雄樹
  • 出版社/メーカー: インプレス
  • 発売日: 2016/03/18
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログを見る
 
スラスラわかるHTML&CSSのきほん

スラスラわかるHTML&CSSのきほん

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

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

 

このような、解説書も沢山ありますので、活用するとよいでしょう。

 

 

え~...いきなり広告をはっ付けておいて、なんなんですが(笑)

締めの言葉を言わせていただきます。

 

貴方のより良いブログライフを心から願っています。

 

ありがとうございました。



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