キーワード:HTML 解除
Webサイトを作るうえで避けて通れないHTMLですが、HTMLを知らなくても
ホームページを作るソフトを使うと文書を書く感覚で作れたりします。(たぶん)

他にもブログ形式だと最近はリッチテキストを編集できるようになっている投稿フォームがあるので
そこで好きなように書いて投稿できます。
天草Webの駅もHTMLを知らない人でも簡単に文書を作る感覚でページの作成が可能です。
(便利な時代になったもんです)

ただ、やっぱり知っていると色々と便利です。
HTMLはプログラミング言語ではなく、マークアップ言語と呼ばれるもので
文書の構造を記述するための言語です。
ですので、小難しい制御文を覚える必要はなく、「文字をどう表現するか」
というのを書くだけですので、そんなに難しくありません。

HTMLはタグと呼ばれるもので文書の構造を指定していきます。
タグは沢山ありますが必ず<タグ名 属性="値">という形式になっています。
また、タグは閉じタグというのもあり</タグ名>でタグを終了します。
例えるならこんな感じです。

天草Webの駅はここをクリックしてください。

と表現したい場合はこのように書きます↓
天草Webの駅は<a href="http://amakusa-web.jp">ここ</a>をクリックしてください。
<a>~</a>で囲み、hrefという属性に飛び先のURLを書くだけです。

基本的にこのような構成になっています。

今はHTMLだけでなくCSS(スタイルシート)も使われています。
基本的にHTMLで文書の構造を定義して、CSSで文字を装飾するようなイメージでしょうか。

ブラウザの上(入力箇所やリンクの箇所でない何も無い所)でマウス右クリックすると「ソースの表示」
みたいなものがあると思います。
それで現在表示されているページのHTMLが見れます。
もちろん、HTMLだけでなくJavascriptやCSSといったものも含まれている場合も多いです。

Javascriptはプログラミング言語の部類に入ります。
これを覚えるのはHTML覚えるより大変ですが、初めてプログラミングする人にとっても
比較的理解しやすい部類ではないかと思います。

Web製作に使われるJavascriptやPHP等のプログラミング言語はとっつきやすく、
非常に便利で覚えやすいのですが、本格的にWeb技術者を目指すならばこれら言語だけでなく
PostgreSQLやMySQLといったDB(データベース)やApache等のHTTPサーバー、Linux、
ネットワーク技術など、覚える事は山ほどあります。

しかし、Webの駅等のデザインをもうちょっと変更したいといった場合はHTMLとCSSだけでも覚えると
だいぶ違うと思います。


あ、ちなみに私は本職はプログラマーでもありませんし、Web系に関しては
あんまりわかりませんので間違った事を書いてるかもしれませんw

ただ、興味がある人はHTMLのタグを調べてみるといいと思います。

今回はWebの駅を使っていてちょっと不便だなと思った事の解消方法みたいなものです。

 

Webの駅で日記(記事)を書いて、その中に画像を挿入したりする事があると思います。

その場合、画像サイズが大きくてそのまま表示すると枠からはみ出して、

画面レイアウトが崩れてちょっとなんだかなぁ・・・と思う事があります。

 

ネットワークドライブでNASに簡単アクセスで書いた記事がまさにそのようになってますw

 

さて、これを解消するためには画像の縮尺を調整して縮小表示するようにすれば

画面崩れはなくなりますが、今度は画像が小さくて見難くなってしまいますね。

その場合、画像をクリックすると原寸画像を表示するようにリンクを挿入する方法がありますが

Webの駅で普通に画像素材へのリンクを指定したらブラウザで画像が表示されずに

画像ファイルそのものをダウンロードしてしまおうとしてしまいます。

 

IEだとこんな感じのメッセージが出ますね↓動きも同じようになってるので画像をクリックしてみてください・・・

iv0002


パケットキャプチャのツールでHTTP通信の内容を見てみたところ、

HTTPヘッダに

content-disposition: attachment; filename=xxxxx.jpg

という部分を見つけました。

おそらくこれが原因なんじゃないかな~と思います。

Webに関してはあんまり詳しくないのでなんとも言えませんけどね・・・あくまで何となくそう思っただけです。

ちなみにMIMEはimage/jpegと言った感じできちんとイメージ用のMIMEタイプになっていました。

 

とりあえず、MIMEが画像としては返しているようなのでこれをクリックしたらきちんと原寸画像が開くように

ちょっとした工夫をしてみました。

試しに↓の画像をクリックしてみてください。

iv0002

 

ブラウザで拡大画像が開けましたか?

これがやりたかったのです。

 

どうしたかというと、画像表示用の簡単なjavascriptを書いただけです。

 

やり方ですが天草Webの駅で日記を書く時などに、右上に▼その他の操作なるものがあります。

そこに「HTMLコード編集」というものがあると思いますが、そこを開いてみてください。

 

そしたらごちゃごちゃとHTMLのタグが書いてあると思います(記事が空白なら何も書いてない)

そのHTMLの先頭に以下のタグ(緑の部分)を貼り付けてください。

 

<script src="https://amakusa-web.jp/Sozai/Mg/FileAccess.aspx?aplUseNo=12267&amp;angoFolderKey=FQ6vIUqE2H8UAXEKXn%2f5KQ%3d%3d&amp;angoFileKey=MvcjmBnnEhgsmm9fvphn4w%3d%3d" type="text/javascript"></script>

 

これは私が画像表示だけをするHTMLを吐くためのjavascriptを置いているURLです。

単純な関数ひとつなので自分で作って自分で置いても構いません。

 

そして「リンクの作成」でURLは「http://」と初期値があると思いますが、それを消して

以下のように書いてください。

javascript:imageView('Webの駅の素材画像のURL')

 

どうですか?

これで画像をクリックすると原寸画像がブラウザで表示されるようになったと思います。

 

このように不便だと感じた場合も工夫次第で色々と解消できたりします。

みなさんも是非色々と試してみてみてください。


追記2:

ブラウザの別ウィンドウで開くように変更しました。

コメント欄に追記でスマホだとうまく開けると書きましたが、

Android端末だとやはりダウンロードが始まるようです。

うまく開けるのはiOSデバイスの場合のようです。

よくわかりませんが、HTTPヘッダの

content-disposition: attachment; filename=なんとか

の部分がiOSでは意味をなさないのかもしれません。。。

[ 1 ]      2件中 1-2件