ホントの初心者でも絶対分かる!HTMLタグ<html><head><body>の意味とは -ホームページビルダーを使ったWebサイトの作り方-

執筆者: 良知敏子 職業:PCインストラクター・ホームページアドバイザー
はじめに

こんにちは。PCインストラクターの良知敏子です。

第2回目のコラムでは、HTMLソースを読んでいく上での基本事項を解説していきました。

今回のコラムでは、HTMLソースの構造やタグの解説を行っていきます。

少しだけソースの修正も行ってまいります。


 

HTML文書を構成する3つのタグ

まずは、前回作成した、ごく簡単なホームページのソースを見ていきましょう。

このソースは「ページ編集」タブでホームページを作成すると、ホームページビルダーが自動で記述を行うものでしたね。

 

 

まずは、おおまかに見ていきましょう。

「」「」「」という3つのタグに注目しましょう。

HTML文書は「」「」「」の3つのタグで文書の構造を表します。

 

  • :この文書がHTML文書である事の宣言
  • :文書のヘッダー情報の記述
  • :文書の本体

 

それぞれのタグは終了タグと共に使用し、以下のように使っていきます。

 

  • 「 ~ 」:HTML文書を記述する部分
  • 「 ~ 」:文書のヘッダー情報を記述する部分
  • 「 ~ 」:実際にブラウザ上で見える内容を記述する部分

 

ソース1行目に関して

それでは1行ずつ見ていきます。


まずは1行目の「」。

こちらは、どの規格に準じたHTML文書を記述しているのかを定義する部分なのですが、今の段階では難しい事は考えず、おまじないのようなものだと認識して下さい。

 

この部分が無くても問題はありません。

ブラウザはHTML文書を解釈して表示してくれます。

ソース2行目に関して

次に2行目。

「」ですが、こちらはhtml文書内でどのような言語を使っているのかを定義している部分です。

 

日本語を使っているので「ja」と指定しています。

つまり「これから日本語でHTML文書を記述します」と読み替えることが出来ます。

ここで少し前回のおさらいです。

要素を「<>」で囲んだものが「タグ」と呼ばれるものでした。

 

2行目の「」という部分を見ると「html」という要素の後ろに「lang="ja"」と記述されていますが、この「lang」の事を属性といいます。

 

「lang」は「language」の事で「言語を指定して下さい」という意味になります。

 

要素ごとに定義が出来る属性が決まっており、要素が「概要」だとしたら、属性は「詳細」と考えることが出来ます。

 

ソース3行目以降に関して

次に「」の部分です。

ここは、文書のヘッダー情報が記述される場所です。


ヘッダー情報にはどのような種類があるかというと、文書のタイトル作成者情報文書のキーワード説明文文字エンコーディング情報などになります。

 

今回のHTMLソースでは3つのヘッダー情報が記述されており、以下のように読み替えることが出来ます。

 

ヘッダー情報の内容

文字エンコーディングは、UTF-8を使用します。

(UTF-8とは、日本語文字エンコーディングの値の一つ)


JustSysytem社のホームページビルダー18で作成しました。

(メモ帳などのテキストエディタで作成する場合は記述しないこと)

 

この文書のタイトルは○○です。

 

」の意味

まずは「」タグですが、これは文書に関する様々な属性を定義するタグです。

今回は文字エンコーディングの指定と、文書をホームページビルダーにて作成したことが定義されています。

 

文字エンコーディングの意味

また、文字エンコーディングについてですが、指定は必須ではありません。

しかし、指定を行わないとブラウザによっては文字化けが起きる場合もあります。

出来れば指定しておいた方が良いでしょう。

 

」の意味</div> <p>次に「<title>」ですが、こちらは<span style="color: #ff0000;">HTML文書のタイトルを記述する場所</span>です。</p> <p>ホームページビルダーでタイトルの設定を行っていなかったため「<title>」の後ろには何も情報が記述されていません。</p> <p><br>7行目の「</head>」までがヘッダー情報になり、次の「<body>」からは、実際にブラウザに見える部分のHTMLを記述していきます。</p> <p><span style="line-height: 1.5;"><br></span></p> <p><span style="line-height: 1.5;">いかがですか?</span></p> <p>このように順序立てて見ていくことで、ただの英字の羅列ではなく、きちんと構造化され、意味のある文書であると認識していただけるのではないかと思います。</p> <p><br><span style="color: #ff0000;">HTML文書は3つの大事な部分で構成されている</span>と覚えておいて下さいね。</p> <p> </p> <div class="mce_block mce_header">HTML文書の修正</div> <p>最後に、HTML文書を少しだけ修正してみましょう。<br>8行目の「<body>」の下の行に文章を追加してみます。</p> <p> </p> <p><img src="/static/img/space.gif" width="320" height="194" style="line-height: 1.5;" data-lightbox="https://lattepic.s3.amazonaws.com/column.org.yiouwuwy7znxnqnkybuxv3mfzqzgcg2t.jpeg" data-id="2502601" data-original="https://lattepic.s3.amazonaws.com/column.org.yiouwuwy7znxnqnkybuxv3mfzqzgcg2t.jpeg" class=" lazy"></p> <p> </p> <p>追加が出来たら「ページ編集」タブをクリックします。</p> <p> </p> <p><img src="/static/img/space.gif" width="320" height="194" data-lightbox="https://lattepic.s3.amazonaws.com/column.org.2aih6ucedl2tatjronxjfpzcc35xl6ga.jpeg" data-id="2502602" data-original="https://lattepic.s3.amazonaws.com/column.org.2aih6ucedl2tatjronxjfpzcc35xl6ga.jpeg" class=" lazy"></p> <p> </p> <p>HTMLソース内に、入力した文章が表示されています。</p> <p> </p> <p><img src="/static/img/space.gif" width="320" height="170" data-lightbox="https://lattepic.s3.amazonaws.com/column.org.i25tq56kjh53aan7flml6svttfpo3rv4.jpeg" data-id="2502603" data-original="https://lattepic.s3.amazonaws.com/column.org.i25tq56kjh53aan7flml6svttfpo3rv4.jpeg" class=" lazy"></p> <p> </p> <p>このように、文章の追加はHTMLソースからでも可能です。</p> <p>ソース内で編集した文章は、正しく解釈され、ブラウザで表示することが出来るのです。</p> <p> </p> <div class="mce_block mce_header">おわりに</div> <p>いかがでしたか?</p> <p>ホームページビルダーを使ったソース内容の見方をご紹介いたしました。</p> <p> </p> <p>次回は様々なHTMLソースの修正作業を行っていきます。</p> <p>楽しみにお待ち下さいね。</p> </div> <div class="show_ads"> <table class="box" style="width:auto;margin:0 auto 10px;"> <tr> <td> <!-- /4282249/Column_pc_bottom1_left --> <div id='div-gpt-ad-1507613742411-0'> <script> googletag.cmd.push(function() { googletag.display('div-gpt-ad-1507613742411-0'); }); </script> </div> </td> <td style="width:24px;"> </td> <td> <!-- /4282249/Column_pc_bottom1_right --> <div id='div-gpt-ad-1507614483223-0'> <script> googletag.cmd.push(function() { googletag.display('div-gpt-ad-1507614483223-0'); }); </script> </div> </td> </tr> </table> </div> <div id="column_status"> <ul id="styled_btns"> <li class="facebook latte_like"> <div id="facebook-iine"> <div class="bg"> <div class="fb-like" data-href="https://www.facebook.com/columnlatte" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false" data-width="105"></div> <p>Facebook で CHECK♡</p> </div> </div> </li> <li class="facebook share"> <a href="https://www.facebook.com/share.php?u=https://latte.la/column/20626196" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"><span class="status-icon20 facebook w">Like</span>Facebook でシェア</a> </li> <li class="twitter"> <a href="https://twitter.com/share?url=https://latte.la/column/20626196&text=ホントの初心者でも絶対分かる!HTMLタグ<html><head><body>の意味とは -ホームページビルダーを使ったWebサイトの作り方- - Latte&hashtags=ColumnLatte" creatorclip""="" onclick="window.open(this.href, 'window', 'width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1'); return false;"> <span class="status-icon20 twitter w">Like</span>Twitter でシェア </a> </li> </ul> </div> </div> <style> .bottom_adsense_holder { text-align: center; margin:12px 0; } </style> <div id="columnist"> <div id="columnist-profile"> <div class="list-title"><span class="icon14 column"> </span>コラムニスト情報</div> <div class="profile"> <div class="pict" style="vertical-align:top;"> <img src="https://lattepic.s3.amazonaws.com/u_qn/4p/kl/36/kh/ie/32/ao/c2/rz/bb/ag/s6/3q/2n/rr.jpeg?Signature=OZW93qZjyQDYjzFNZF2vf729oGA%3D&Expires=2115594061&AWSAccessKeyId=AKIAIZXE7EOD2KQP55NQ&2" alt="良知敏子"> </div> <div class="body"> <div class="name"> <a href="/column/columnist/119637">良知敏子</a> </div> <div class="sub"> 性別:女性  |   職業:PCインストラクター・ホームページアドバイザー </div> <p>はじめまして。静岡県静岡市でパソコン講習やセミナー、ホームページ作成やサポートを行っているテックスカラ代表の良知敏子と申します。<br />営業事務業務のIT担当として、たまたま携わったパソコンでしたが、色々な業務に携わりながらとてもたくさんの事を学び、現在に至っております。<br />常にユーザー目線での講習や制作を心がけることが信条です。<br />どうぞよろしくお願いいたします。</p> </div> </div> </div> <!-- User Columns --> <div id="user_columns"> <div class="columnist-column-list"> <div class="list-title"><span class="icon14 column"> </span>このコラムニストが書いた他のコラムを読む</div> <ul class="column-list"> <li> <div> <div class="pict"> <div class="lazy" data-original="https://lattepic.s3.amazonaws.com/column_qp/5m/mj/b2/gu/yx/ce/fl/34/rq/2h/ec/pd/tk/tj/jx_medium.jpeg" style="background-image: url(/static/img/space.gif);"> <img src="/static/img/space.gif" alt="昔のネット&ホームページあるある!ダイヤ..." /> </div> </div> <div class="body"> <div class="title"><a href="/column/81107751">昔のネット&ホームページあるある!ダイヤルアップ回線、キリ番、掲示板…あぁ…</a></div> <div class="author">良知敏子 </div> </div> </div> </li> <li> <div> <div class="pict"> <div class="lazy" data-original="https://lattepic.s3.amazonaws.com/column_yt/ut/eh/j5/ew/7q/yb/pj/h6/63/wv/ju/oc/dn/fj/n5_medium.jpeg" style="background-image: url(/static/img/space.gif);"> <img src="/static/img/space.gif" alt="スマホで送受信OK!無料で使える国内フリ..." /> </div> </div> <div class="body"> <div class="title"><a href="/column/79366909">スマホで送受信OK!無料で使える国内フリーメールまとめ</a></div> <div class="author">良知敏子 </div> </div> </div> </li> <li> <div> <div class="pict"> <div class="lazy" data-original="https://lattepic.s3.amazonaws.com/column_nj/tf/l5/2d/4v/b7/w4/5h/pc/qi/ku/f5/3r/ti/r5/l7_medium.jpeg" style="background-image: url(/static/img/space.gif);"> <img src="/static/img/space.gif" alt="無償期間終了!Windows10を「有償..." /> </div> </div> <div class="body"> <div class="title"><a href="/column/77723739">無償期間終了!Windows10を「有償でも」アップグレードするべき人とは?</a></div> <div class="author">良知敏子 </div> </div> </div> </li> <li> <div> <div class="pict"> <div class="lazy" data-original="https://lattepic.s3.amazonaws.com/column_dh/vv/x4/yx/nz/63/sf/iz/fl/3w/av/hh/fg/bf/sh/tw_org.jpeg" style="background-image: url(/static/img/space.gif);"> <img src="/static/img/space.gif" alt="パソコン初心者向け「拡張子」講座!エクセ..." /> </div> </div> <div class="body"> <div class="title"><a href="/column/42929973">パソコン初心者向け「拡張子」講座!エクセルやワードファイルの拡張子を表示してみよう</a></div> <div class="author">良知敏子 </div> </div> </div> </li> <li> <div> <div class="pict"> <div class="lazy" data-original="https://lattepic.s3.amazonaws.com/column_et/4k/rm/2w/ji/wj/nn/h2/ay/hp/n5/a3/nt/2m/xw/yu_org.jpeg" style="background-image: url(/static/img/space.gif);"> <img src="/static/img/space.gif" alt="パソコンのセキュリティ対策、無料ソフトで..." /> </div> </div> <div class="body"> <div class="title"><a href="/column/36230366">パソコンのセキュリティ対策、無料ソフトでもいい?無料PCセキュリティソフトのメリット&デメリット</a></div> <div class="author">良知敏子 </div> </div> </div> </li> </ul> <div class="more"><a href="/column/columnist/119637/columns">MORE</a></div> </div> </div> <!-- End User Columns --> </div> <div class="bottom_adsense_holder"> <table class="box" style="width:auto;margin:0 auto 10px;"> <tr> <td> <!-- /4282249/Column_pc_bottom2_left --> <div id='div-gpt-ad-1507616145382-0'> <script> googletag.cmd.push(function() { googletag.display('div-gpt-ad-1507616145382-0'); }); </script> </div> </td> <td style="width:24px;"> </td> <td> <!-- /4282249/Column_pc_bottom2_right --> <div id='div-gpt-ad-1507616201016-0'> <script> googletag.cmd.push(function() { googletag.display('div-gpt-ad-1507616201016-0'); }); </script> </div> </td> </tr> </table> </div> <div class="clear"></div> </div> <div id="side" class="w300 column"> <div style="margin:0 0 12px;"> <!-- /4282249/Latte_Column_side1st --> <div id='div-gpt-ad-1507612251022-0' style='height:250px; width:300px;'> <script> googletag.cmd.push(function() { googletag.display('div-gpt-ad-1507612251022-0'); }); </script> </div> </div> <div class="box" style="padding:12px;border-radius:4px;background:#FFF;"> <h4 style="line-height:1.2;padding-bottom:12px;border-bottom: dotted 1px #E0DAC0"><span class="icon14 column"> </span>PC・家電のコラム</h4> <ul style="padding-top:12px;"> <li class="sub_category" style="padding-left:14px;background:url(/static/img/column/disc.png) no-repeat 4px 6px;background-size:4px 4px;"> <a href="/column/personal-computers">パソコン・周辺機器</a> </li> </ul> </div> <div class="box" style="padding:12px;border-radius:4px;background:#FFF;"> <h4 style="line-height:1.2;padding-bottom:12px;border-bottom: dotted 1px #E0DAC0"><span class="icon14 column"> </span>インターネットのコラム</h4> <ul style="padding-top:12px;"> <li class="sub_category" style="padding-left:14px;background:url(/static/img/column/disc.png) no-repeat 4px 6px;background-size:4px 4px;"> <a href="/column/web-sites">ウェブサイト</a> </li> </ul> </div> <div class="box tags" style="padding:12px 12px 6px;border-radius:4px;background:#FFF;"> <h4 style="line-height:1.2;margin: 0 0 12px;padding-bottom:12px;border-bottom: dotted 1px #E0DAC0"> <span class="icon14 tag"> </span> このコラムに関するタグ </h4> <div class="tag-list clearfix"> <a href="/column/tag/%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%8D%E3%83%83%E3%83%88"> <span class="icon14 column_category parent_category"> </span>インターネット </a> <a href="/column/tag/%E3%82%A6%E3%82%A7%E3%83%96%E3%82%B5%E3%82%A4%E3%83%88"> <span class="icon14 column_category category"> </span>ウェブサイト </a> <a href="/column/tag/pc%E3%83%BB%E5%AE%B6%E9%9B%BB"> <span class="icon14 column_category parent_category"> </span>pc・家電 </a> <a href="/column/tag/%E3%83%91%E3%82%BD%E3%82%B3%E3%83%B3%E3%83%BB%E5%91%A8%E8%BE%BA%E6%A9%9F%E5%99%A8"> <span class="icon14 column_category category"> </span>パソコン・周辺機器 </a> <div class="curtain" style="display:none;"></div> </div> <div class="more-link open" style="display:none;"><a>すべて表示</a></div> <div class="more-link close" style="display:none;"><a>閉じる</a></div> </div> <div id="column-ranking"> <h3><span class="icon14 ranking"> </span>コラムランキング</h3> <ul> <li> <div class="table"> <div class="pict"> <a href="/column/50550526"> <img src="https://lattepic.s3.amazonaws.com/column_jh/lw/jh/5l/gu/np/y4/67/av/tw/5k/hl/ud/d2/e7/qh_square.jpeg" class="" alt="" /> <span class="rank r1">1</span> </a> </div> <div class="body"><a href="/column/50550526">心霊動画はウソ?恐怖映像の「やらせor本物」を見分ける7つのポイント</a></div> </div> </li> <li> <div class="table"> <div class="pict"> <a href="/column/71029047"> <img src="https://lattepic.s3.amazonaws.com/column_tb/qx/tl/cu/5g/45/6u/qp/sy/bn/6e/vn/zv/sq/is/fk_square.jpeg" class="" alt="" /> <span class="rank r2">2</span> </a> </div> <div class="body"><a href="/column/71029047">ホラーマニアでも閲覧注意!マジで怖い動画・恐怖映像おすすめ9連発</a></div> </div> </li> <li> <div class="table"> <div class="pict"> <a href="/column/83076038"> <img src="https://lattepic.s3.amazonaws.com/column_ff/bx/5n/eg/cg/5e/dd/7a/2n/pw/7d/6p/pz/ir/5w/e7_square.jpeg" class="" alt="" /> <span class="rank r3">3</span> </a> </div> <div class="body"><a href="/column/83076038">【心理テスト】SNSのアイコン画像・プロフィール写真でわかる性格診断(LINE、Twitterなど)</a></div> </div> </li> <li> <div class="table"> <div class="pict"> <a href="/column/77692574"> <img src="https://lattepic.s3.amazonaws.com/column_bu/67/wh/vo/jx/lj/p7/md/it/3z/is/zi/fc/3r/rx/ki_square.jpeg" class="" alt="" /> <span class="rank">4</span> </a> </div> <div class="body"><a href="/column/77692574">【座標アリ】Googleマップで見つけた、思わずゾッとする怖い場所10選</a></div> </div> </li> <li> <div class="table"> <div class="pict"> <a href="/column/78415221"> <img src="https://lattepic.s3.amazonaws.com/column_65/wv/ez/qh/f6/q7/yy/nm/4u/qi/ej/gz/3w/cs/rl/v4_square.jpeg" class="" alt="" /> <span class="rank">5</span> </a> </div> <div class="body"><a href="/column/78415221">エクセルの代わりになるフリーソフト3選。オフィスとの互換性OK、もちろん無料!</a></div> </div> </li> </ul> </div> <!-- End, Side column rankings --> <div id="related_columns"> <h3><span class="icon14 column"> </span>関連コラム</h3> <ul> <li> <div class="pict"> <img src="https://lattepic.s3.amazonaws.com/column.square.chtlwzw63i3uud4snv3mp72hkjx5nwa5.jpeg" class="" alt="" /> </div> <div class="body"> <div class="title"><a href="/column/16738018">PC(パソコン)の正しい捨て方!リサイクル、売る、廃棄処分など手放す方法を紹介</a></div> </div> </li> <li> <div class="pict"> <img src="https://lattepic.s3.amazonaws.com/column.square.m5bmltf7jjnfiqhy26lck3kasjq6s4dc.jpeg" class="" alt="" /> </div> <div class="body"> <div class="title"><a href="/column/19319379">スマホ(iphone・Android)の人気フリマアプリまとめ!ネットでフリー...</a></div> </div> </li> <li> <div class="pict"> <img src="https://lattepic.s3.amazonaws.com/column.square.kxs4awa55hj5galkg3mcwg67wj6lo6rm.jpeg" class="" alt="" /> </div> <div class="body"> <div class="title"><a href="/column/19210669">iphoneの動きが「重い」「遅い」ときの解消&改善方法!サクサクに戻す再起動...</a></div> </div> </li> <li> <div class="pict"> <img src="https://lattepic.s3.amazonaws.com/column.square.vkppwcpmq7hri6q4kbqxnxn3wfqjt7qc.jpeg" class="" alt="" /> </div> <div class="body"> <div class="title"><a href="/column/18530733">今更聞けないTwitter(ツイッター)の使い方・始め方!「ハッシュタグ#」「...</a></div> </div> </li> <li> <div class="pict"> <img src="https://lattepic.s3.amazonaws.com/column.square.hxypuig42qjiwbi6zsz52qolfkp7gbmz.jpeg" class="" alt="" /> </div> <div class="body"> <div class="title"><a href="/column/18828956">気になるFB相手の交流覗き見!?意外と知らないFacebook機能(複数メッセ...</a></div> </div> </li> </ul> </div> <div id="fixed_ad_top"></div> <div id="fixed_ad"> <div> <!-- /4282249/Column_pc_side_moving --> <div id='div-gpt-ad-1507612964161-0'> <script> googletag.cmd.push(function() { googletag.display('div-gpt-ad-1507612964161-0'); }); </script> </div> </div> </div> <style type="text/css"> #fixed_ad.fixed { position: fixed; right: 50%; top: 90px; margin-right: -550px; } #fixed_ad.stop { position: absolute; right: 0; bottom: 12px; } </style> </div> <div class="clear"></div> </div> <div id="push_box"></div> </div> <div id="common-footer"> <div id="nav-foot"> <div class="w1100 clearfix"> <h6>Category</h6> <ul class="clearfix"> <li><a href="/column/travel">旅行</a></li> <li><a href="/column/marriage">結婚</a></li> <li><a href="/column/gourmet_restaurants">グルメレストラン</a></li> <li><a href="/column/pregnancy_childbirth">妊娠・出産</a></li> <li><a href="/column/childcare_child_rearing">育児・子育て</a></li> <li><a href="/column/beauty">美容</a></li> <li><a href="/column/healthcare">健康・医療</a></li> <li><a href="/column/photo_camera">写真・カメラ</a></li> <li><a href="/column/learning">教育・学習</a></li> <li><a href="/column/life">生活</a></li> <li><a href="/column/housing-and-real-estate">住宅・不動産</a></li> <li><a href="/column/business-and-economy">ビジネス・経済</a></li> <li><a href="/column/money-and-asset-management">お金・資産運用</a></li> <li><a href="/column/fashion">ファッション</a></li> <li><a href="/column/pets">ペット</a></li> <li><a href="/column/hobby">趣味</a></li> <li><a href="/column/internet">インターネット</a></li> <li><a href="/column/computers-and-home-electronics">家電</a></li> <li><a href="/column/love">恋愛</a></li> <li><a href="/column/special">スペシャル</a></li> </ul> </div> </div> <div id="latte-directory"> <ul> <li><a href="/hair" title="LATTE BEAUTY" >Beauty</a></li> <li><a href="/column" title="LATTE COLUMN" >Column</a></li> <li><a href="/travel" title="LATTE TRAVEL" >Travel</a></li> <li><a href="https://fashion.latte.la" title="LATTE FASHION" >Fashion</a></li> <li><a href="https://cosme.latte.la" title="LATTE COSME" >Cosme</a></li> <li><a href="https://interior.latte.la" title="LATTE INTERIOR" >Interior</a></li> </ul> </div> <div id="luxeys"> <div class="w1100 clearfix"> <small id="copyright"><img src="/static/img/fashion/luxeys.png">COPYRIGHTS 2018 LUXEYS. ALL RIGHTS RESERVED.</small> <div id="site"> <ul> <li><a href="https://latte.la/company/contact" rel="nofollow">ヘルプ・お問い合わせ</a></li> <li><a href="https://latte.la/company/policy" rel="nofollow">利用規約・プライバシーポリシー</a></li> <li><a href="https://luxeys.co.jp/recruit/" target="_blank">スタッフ募集</a></li> <li><a href="https://latte.la/company/info">運営会社</a></li> </ul> </div> </div> </div> <div id="page-top"><a href="#top">PAGE TOP</a></div> </div> <script type="text/javascript" src="/static/js/beauty/jquery.lazyload.min.js"></script> <script> $(document).ready(function(){ setTimeout(function() { $(".lazy").lazyload({ threshold: 200, effect : "fadeIn", effect_speed: 200, failure_limit: 5000, }); }, 100); }) $(document).ajaxStop(function(){ // give 10ms time before loading lazy load images. setTimeout(function() { $(".ajax-lazy").lazyload({ threshold: 200, effect : "fadeIn", effect_speed: 200, failure_limit: 20, }); }, 10); }); $(document).ready(function(){ var footerH = $('#common-footer').height(); $('#push_box').css('height', footerH); $('#common-footer').css('margin-top', '-'+footerH+'px'); }) $(".nav .notifys.icons > a").hover(function(event) { $count = $(this).find("span.ncount"); if ($count.length > 0) { $count.remove(); var url = "|user|mypage|update_notify".replace(/\|/g, "/"); $.ajax({ type: "POST", url: url, data: {"_csrf": _csrf} }); } }, function() {}); var nav_position = 98; var nav_position2 = 140; $(window).scroll(function() { if($(window).scrollTop() > nav_position) { $("#nav-group, #new-header").addClass("fixed"); } else { $("#nav-group, #new-header").removeClass("fixed"); } if($(window).scrollTop() > nav_position2) { $("#nav-group, #new-header").addClass("down"); } else { $("#nav-group, #new-header").removeClass("down"); } }); </script> <script type="text/javascript"> $(function(){ var notify_tab_busy = false; function show_users(id) { $(".ui-dialog-content").dialog("close"); var show_users_dom = $('#user-dialog-container'); var show_users_url = "|user|notify|list"; $.ajax({ url: show_users_url.replace(/\|/g, "/"), type: "POST", data: { "_csrf": "4CQ61YzLU2", "id": id }, success: function(data) { var $insert_html = $(data).hide(); if(!show_users_dom.find('#user-dialog').length) { // Check source is correct. Jquery dialog modifys the source show_users_dom.html('<div id="user-dialog" style="display:none;"><div class="ajax_content"></div></div>'); // Fix the source } var userDialogDom = show_users_dom.find('#user-dialog'); userDialogDom.replaceWith($insert_html); $insert_html.fadeIn("slow"); $('#user-dialog').dialog({ height: 400 , width: 300, draggable: false }); notify_tab_busy = false; } }); return false; } var notifF = { initialLoad: true, setup: function() { notifF.safeBind($('#notify_tab a'), 'click', notifF.notifClick); if($('.nav .notifys.icons > a').length) { $('.nav .notifys.icons > a').mouseover(notifF.loadOnceOnHover); } }, loadOnceOnHover: function() { if (!notifF.initialLoad) return; // Load it only once. notifF.initialLoad = false; //On initial load don't load the notifications. When user hover over the notif icon load first tab (Do it only once) $('#notify_tab .on a').click(); $(this).unbind('mouseenter mouseleave'); }, safeBind: function($dom, action, callback) { //$dom.unbind(); try { $dom.live(action, callback); } catch(err) { $dom.on(action, callback); } }, safeUnBind: function($dom, action, callback) { //$dom.unbind(); try { $dom.die(action, callback); } catch(err) { $dom.off(action, callback); } try { $dom.unbind(action, callback); } catch(err) { } }, notifClick: function(e) { if (notify_tab_busy) { e.preventDefault(); return false; } var dom = $(this).closest('#notif_wrapper'); if (parseInt(dom.attr('data-linkpost'))) { return; /* Post links instead of ajax loading.*/ } notify_tab_busy = true; obox = dom.find("ul.osirase.box"); url = "|user|mypage|notify_ajax".replace(/\|/g, "/"); kind = $(this).attr('data-kind'); lastcheck = dom.attr('data-lastcheck'); linkmore = parseInt(dom.attr('data-linkmore')); limit = dom.attr('data-limit'); service = dom.attr('data-service') || ''; $.ajax({ url: url, type: "POST", data: { "_csrf": "4CQ61YzLU2", "show_tabs": 1, "kind": kind, "lastcheck": lastcheck, "linkmore": linkmore, "limit": limit, "service": service }, success: function(data) { var $insert_html = $(data).hide(); dom.replaceWith($insert_html); $insert_html.fadeIn(300); notify_tab_busy = false; notifF.setup(); }, error: function(){ notify_tab_busy = false; } }); return false; } }; notificationScrollNamespace = function(dom_str, limit, kind, lastcheck, linkmore, service) { var dom = $(dom_str); var page = 1; var loading = 0; function has_more_notifications(list) { // Limit to 50 pages. return (!list || (page < 50) && !list.find('li.none')[0]); } function on_read_more(list) { if (loading || !has_more_notifications(list)) { return false; } loading = 1; page += 1; ajax_url = "|user|mypage|notify_ajax".replace(/\|/g, "/"); $.ajax({ url: ajax_url, type: "POST", data: { "_csrf": "4CQ61YzLU2", "show_tabs": 0, "kind": kind, "lastcheck": lastcheck, "linkmore": linkmore, "limit": limit, "page": page, "service": service }, success: function(data) { if (!dom.find('li.none')[0]) { /* Has already return empty record. */ if(!data || !data.trim().length) { loading = 0; return false; } try { var $insert_html = $(data).hide(); } catch (err){ } dom.append($insert_html); $insert_html.fadeIn("slow"); } loading = 0; }, error: function(){ loading = 0; } }); return false; } function on_scroll_document() { var list = $(this); if (!has_more_notifications(list)) { dom.unbind('mousewheel DOMMouseScroll', on_scroll_document); return; } var innerHeight = dom.innerHeight(); var scrollTop = dom.scrollTop(); var scrollHeight = dom.prop('scrollHeight'); if (300 > scrollHeight - innerHeight - scrollTop) { setTimeout(function() { on_read_more($(this)); }, 600); } } if (has_more_notifications(false)) { dom.bind("scroll", on_scroll_document); } dom.bind('mousewheel DOMMouseScroll', function ( e ) { /* Disable page scroll while scrolling notifications. */ if( e.originalEvent ) e = e.originalEvent; var delta = e.wheelDelta || -e.detail; this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30; e.preventDefault(); return false; }); //Auto load one more page; //on_read_more(false); }; /*End of notificationScrollNamespace */ // start the notification plugin notifF.setup(); notificationScrollNamespace('.osirase_pop ul.osirase.box', 10, "", "", 0, ""); }); </script> <script src='/static/js/jquery-ui.js?20111206' type='text/javascript' charset='utf-8'></script> <script src='/static/js/common.js?20140424' type='text/javascript' charset='utf-8'></script> <script type="text/javascript"> var func_bookmark; $(function(){ $("a.scroll_top").click(function(){ $('html,body').animate({scrollTop:0}, 'fast'); return false; }); $("a.force_pc_cancel").click(function(){ var url = "|user|force_pc_cancel".replace(/\|/g, "/"); $.ajax({ type: 'GET', url: url, success: function(data) { location.reload(1); } }); return false; }); var loggedin = false; var login_url = "|user|register?refer=%2Fcolumn%2F20626196".replace(/\|/g, "/"); // check if init_bookmark_side exist (only travle use it) if (typeof init_bookmark_side === "init_bookmark_side") { // safe to use the function init_bookmark_side("4CQ61YzLU2", loggedin, login_url); var mark_url = "|user|mylist|mark".replace(/\|/g, "/"); func_bookmark = get_func_bookmark_mark(mark_url, "4CQ61YzLU2", loggedin, login_url); $(".bookmark_rate").not(".bookmarkdonewrap .bookmark_rate").each(function() { func_bookmark($(this), rerenderbookmark); }); $(".bookmarkdonewrap .bookmark_rate").each(function() { func_bookmark($(this)); }); func_bookmark_compact = get_func_bookmark_compact(mark_url, "4CQ61YzLU2", loggedin, login_url); $(".bookmark_compact").each(function() { func_bookmark_compact($(this)); }); } $(".submitlink").each(function() { $(this).click(function(event) { event.preventDefault(); var busy = $(this).attr('busy'); if(busy != undefined) { return false; } var $form = $(this).closest("form"); if ((typeof $(this).attr("name") != "undefined") && ($(this).attr("value", $(this).attr("value")) != "undefined")) { var $input = $("<input/>") .attr("type", "hidden") .attr("name", $(this).attr("name")) .attr("value", $(this).attr("value")); $form.append($input); } $(this).attr('busy', '1'); $form.submit(); }) }); $(".osirase_pop").hover(function(event) { $count = $(this).find(".osirase span, .osirase-holder span.sum").first(); if ($count.length > 0) { if($count.hasClass('sum')) { $count.fadeOut("slow", function() { $count.remove(); }); } else { $count.remove(); } var url = "|user|mypage|update_notify".replace(/\|/g, "/"); $.ajax({ type: "POST", url: url, data: {"_csrf": "4CQ61YzLU2"} }); } }, function() {}); }); </script> <script type="text/javascript"> // column constants var target = 'column'; var page = 1 var column_header_links = false; // User column variables. var _csrf = "4CQ61YzLU2"; var scrollScript = { ad_offset: 10, setup: function() { $(window).scrollTop(0); // On refresh jump to top. setTimeout(function() { $(window).scrollTop(0); $(window).scroll(scrollScript.onScroll); }, 250); }, onScroll: function(e){ // Right Bottom banner follow the user while scrolling. var fixed_ad_top = $("#fixed_ad_top").offset().top - 90; // var page_top = $(window).scrollTop(); // page top //var bottom = $("#fixed_ad").offset().top + $("#fixed_ad").height() + 100; var adOffset = 350; var bottom = page_top + adOffset; var dbottom = $(document).height() - adOffset ; var newOffset = dbottom - fixed_ad_top - adOffset; if (bottom >= dbottom) { $("#fixed_ad").stop().removeClass('fixed').addClass('stop'); $("#fixed_ad").stop().css("margin-top", newOffset + "px"); }else if (fixed_ad_top < (page_top + scrollScript.ad_offset)) { $("#fixed_ad").stop().addClass('fixed').removeClass('stop'); $("#fixed_ad").stop().css("margin-top", scrollScript.ad_offset + "px"); } else { // if user scrool to top. $("#fixed_ad").stop().removeClass('fixed').removeClass('stop'); $("#fixed_ad").stop().css("margin-top", ""); } try { } catch(err) {} } }; $(function(){ scrollScript.setup(); }); var toggleCurtainF = { introH: 0, max_height: 140, offset: 100, init: function() { toggleCurtainF.introH = $('#introduction-block').height(); if (toggleCurtainF.introH > (toggleCurtainF.max_height)) { $('#introduction-block').css('height',toggleCurtainF.max_height); $('#introduction-more').bind('click', toggleCurtainF.moreClick) $('#introduction-close').bind('click', toggleCurtainF.closeClick) } else { // Already it is too short no need to show 'Show More' button. $('#introduction-more').hide(); $('#introduction-close').hide(); $('#introduction-block .curtain').hide(); } }, moreClick: function(e) { e.preventDefault(); $('#introduction-block').animate({'height':toggleCurtainF.introH}, 300, 'swing').addClass('open'); $('#introduction-more').hide(); $('#introduction-close').show(); }, closeClick: function(e) { e.preventDefault(); $('#introduction-block').animate({'height':toggleCurtainF.max_height}, 300, 'swing').removeClass('open'); $('#introduction-more').show(); $('#introduction-close').hide(); } }; var toggleTagCurtainF = { introH: 0, max_height: 80, offset: 100, init: function() { toggleTagCurtainF.introH = $('.tags .tag-list').height(); if (toggleTagCurtainF.introH > (toggleTagCurtainF.max_height)) { $('.tags .tag-list').css('height', toggleTagCurtainF.max_height); $('.tags .more-link.open').bind('click', toggleTagCurtainF.moreClick) $('.tags .more-link.close').bind('click', toggleTagCurtainF.closeClick) $('.tags .more-link.open').show(); $('.tags .tag-list .curtain').show(); } else { // Already it is too short no need to show 'Show More' button. $('.tags .more-link.open').hide(); $('.tags .more-link.close').hide(); $('.tags .tag-list .curtain').hide(); } }, moreClick: function(e) { e.preventDefault(); $('.tags .tag-list').animate({'height':toggleTagCurtainF.introH}, 300, 'swing').addClass('open'); $('.tags .more-link.open').hide(); $('.tags .more-link.close').show(); }, closeClick: function(e) { e.preventDefault(); $('.tags .tag-list').animate({'height':toggleTagCurtainF.max_height}, 300, 'swing').removeClass('open'); $('.tags .more-link.open').show(); $('.tags .more-link.close').hide(); } }; </script> <script type="text/javascript" src="/static/js/column/show.js?20150706-2"></script> <script type="text/javascript" src="/static/js/column/column.font.js?20160118"></script> <script type="text/javascript"> $(document).ready(function() { toggleCurtainF.init(); toggleTagCurtainF.init(); columnConfig.setup(); }); </script> <script type="text/javascript"> var locale = 'ja_JP'; // Load the SDK asynchronously (function(d, s, id){ var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.async = true; js.src = "//connect.facebook.net/" + locale + "/sdk.js#xfbml=1&appId=185290701554017&version=v2.10"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> <script> var like_url = 'https://latte.la/column'; jQuery.getJSON('https://graph.facebook.com/?ids=' + like_url, function (data) { $("#column_status .sum").text(data[like_url].shares); // for likes use: data[link].likes }); </script> <script type="text/javascript" src="/static/js/beauty/jquery.lazyload.min.js"></script> <script> $(document).ready(function(){ $(".lazy").lazyload({ threshold: 200, effect : "fadeIn", effect_speed: 200, failure_limit: 20 }); }) $(document).ajaxStop(function(){ $(".ajax-lazy").lazyload({ threshold: 200, effect : "fadeIn", effect_speed: 200, failure_limit: 20 }); }); </script> <script type="text/javascript"> $(function() { var flashMessageDom = $('.flashmessage'); if (flashMessageDom.length) { setTimeout(function() { flashMessageDom.fadeOut('slow'); }, 4500); } }); </script> </body> </html>