しんく顔アイコン_小.jpg

No.3:HTMLって何ですか?

どうも、どうも。思考です。5月も、もう下旬ですね。5月なのにかなり暑いし……今年の夏が心配です(夏コミとかも含めて)。会場などに関してもけんけんガクガク色々ありそうですし……。もちろん、当選した暁には張り切ってあんな企画やら、こんな企画やら〜(以下抹消

本題に入る前にお知らせ

ファミリーゲームフェスティバル2016は、アナログゲームの販売及び体験を行うイベントです。
遊んだ事のあるゲームから初めて見るゲームまで、国内・海外から多くのゲームを集めました。
気になるゲームを体験するも良し、面白かったゲームを購入するも良し。未経験の子どもからコレクターの大人まで、誰もが楽しめるイベントです。
ファミリーゲームフェスティバル2016様Webサイトより引用

公式サイト >> http://www.fgamefestival.com/

居眠りの街 / AHC購入事前予約 >> こちらをクリック!!

5月17日〜6月17日までファミリゲームフェスティバルでの購入事前予約も現在受け付け中です。

 

はい、では本題。

 

HTMLについて

前回の記事にて、ゲムマブログ上でHTMLが動作する事を実証しました。
では、そもそもHTMLって何でしょう? ただ、「HTML」という単語だけを忘れないだけでも良いのですが寄り道しておきましょう。
実際のところ、HTMLはプログラム言語ではありません。
「Hyper Text Markup Language」 の略で、文書の一部を「タグ」と呼ばれる特別な文字列で囲うことにより、文章の見出しやリンクや文字の大きさやレイアウトの設定を追加していく記述言語の定義です。
ホームページやアプリ、電子メールなどを適切かつ綺麗に表示させるために使用されます。

ここまでは良いでしょうか?

少し、話を難しくします。

このブログで、私が「HTML」と言ってしまっているもの……本来は色々と細分化されます。全部説明するともはや呪文なので、ざっくりと1つのHTMLファイルを創り出すのは基本的にこういった3つの分類をまとめる必要があります。
部屋に見立ててみると……。

HTML
間取り
CSS
コーディネート
Image
装飾品

こんな感じでしょうかね?(違っていたら、スイマセン……いや本当)

ホームページの本来は、それぞれHTML形式ファイルCSS形式ファイルメディアファイルがそれぞれ独立して存在していて、ブラウザ(Google Chromeなど)でHTML形式のファイルを表示することで初めてすべてのファイルが合わさった完成品となります。

ゲムマブログでは、記事内でHTMLCSSを一緒に扱います。

何の話? と思いますよね?

前回のHTMLコードを再び書いて、HTMLCSSに分解してみるとしましょう

HTMLコード
<b style="font-size: 20px;color: #c71f2d"> 【邪神がこの中にいる!】</b>
HTML
<b></b>
CSS
font-size: 20px;color: #c71f2d;

このように分解できます。

何故、合体しているかというと……
記事を編集できる出展サークル側は、画像など(image部分)を追加する(アップロードする)事ができても、CSS形式ファイルをアップできません。

じゃぁ、HTMLファイルは?
これはもう、記事を投稿・編集するツール側で
「このツールを使って投稿される記事はHTMLファイルである」
という宣言が既に行われているので、別途HTML形式ファイルをアップする必要がありません。なので、前回のように記事を編集する画面上でいきなりHTMLで記述しても動作します。

マークアップ言語(Markup Language)にとって宣言は重要な事で、一番最初に
「これはHTMLファイルである」
という宣言が無ければ、ただのテキストとコンピュータが認識してしまいます。

詳しい解説はGoogle先生か書籍をどうぞ(笑)

さて、私と同じくHTMLの知識が少しある人向けに、ゲムマブログの仕様をこっそりお伝えしようと思います。
私の方で多少ですがトライ&エラーを行っておりますので、何かの役に立てて頂けると幸いです。
※HTMLの知識が無い人は『記事の表示幅』だけ、忘れないようにしてください。

ゲムマブログの仕様(随時更新?)
記事の表示幅
680px(ピクセル)
表記の諸注意
  • ツール側で自動的に<p>タグと<br>タグが入るようになっています。想定しているレイアウトからズレが生じる場合が、js形式のminファイルのように、改行や行間を削除することをオススメします。
  • タグ内にstyleを表記する際、最後のスタイル設定に「;」を付ける必要はありません。ツール内で自動的に最後だけ「;」が付いてしまうので、二重表記エラーでstyleが機能しなくなります。
  • コメントアウトタグが<p></p>タグへ自動置換される事があります(前例あり、今はその仕様は削除されているようですが復活する可能性有り?)。
  • デザインのズレがどうしても直せないときは、ブラウザ内蔵のデベロッパーツール(開発ツール)でソースコードを確認してみてください。
HTMLのバージョン
Ver5準拠
アップできる画像
jpg形式
png
gif形式(アニメーションgifも可)
利用可能な
メディア・サービス
ニコニコ動画
YouTube
自前のレンタルサーバーにアップした音声データ(ゲムマブログにはアップできない)
禁止されているHTMLタグ
<iframe>
<script>
<video>
禁止されているcss
  • position
  • font-familyの一部(全角フォント名?)
  • background-image関連
  • background(簡略表記全般)
  • border-radiusなどのCSS3から導入された丸みを付けるなどの装飾命令
  • writing-modeなどのCSS3から導入された書式に関する命令
  • -webkit〜で始まる命令すべて

今回は、ここまで。次回は、簡単レイアウト構造と、実際に私がゲムマブログの記事で使ったHTMLタグの簡単な解説をできればと思います。