HTML/Tips
をテンプレートにして作成
LECTURE
担当科目一覧
コンピュータ概論/2024
データサイエンス/2024
3DCG演習/2024
情報デザイン研究/2024
卒業研究/2024
KEYWORDS
WEB DESIGN
SOCIAL DESIGN
SQUARES
LINKS
九州産業大学
芸術学部
芸術研究科
九産大美術館
九産大図書館
年間スケジュール
動画ニュース他
交通情報
気象・環境情報
危機に備えて
K'sLife
Office365Mail
Tools
SEARCH
開始行:
*HTML/Tips
[[HTML]]｜[[HTML/Tags]]｜[[HTML/Sample]]｜[[HTML/Tips]]
~
#contents2_1
~
#hr
***Googleの検索フォームを設置したい
[[for属性>Google:for属性]]を使います。for属性はフォームパ...
以下の例では、label要素に for属性をつけることで、同じ内容...
<form action="http://www.google.com/search" method="get">
<label for="key">Google: </label>
<input id="key" type="search" name="q">
<input type="submit">
</form>
~
***SNSのシェアボタンを設置したい
以下のように、aタグで簡単に設置できます。Twitter などのリ...
-Twitter
<a href="http://twitter.com/share?url=http://（ページのU...
-Facebook
<a href="https://www.facebook.com/sharer/sharer.php?u=ht...
-LINE
<a href="https://social-plugins.line.me/lineit/share?htt...
//<a href="http://line.me/R/msg/text/?http://（ページのUR...
-参考：ブランドロゴのダウンロード
--Twitter：https://about.twitter.com/ja/company/brand-res...
--Facebook：https://ja.facebookbrand.com/
--LINE：https://line.me/ja/logo
~
***画像の部分領域にリンクを設定するには
地図画像等で、地図上の特定の範囲にリンクを設定したい場合...
-HTML
<img src="map.gif" usemap="#sample">
<map name="sample">
<area shape="rect" coords="20,10,120,80" href="01.html">
<area shape="circle" coords="200,100,40" href="02.html">
<area shape="poly" coords="400,100,500,100,500,200,400...
<area shape="default" href="00.html">
</map>
要点は以下のとおり
--地図画像を置く img タグに usemap="#[任意の名前]"を定義
--map タグでそれを特定した上で、各 area を地図画像内の座...
--area タグの href でリンク先を定義できます
--shapeの意味は以下のとおり
shape = "rect"：矩形 x1, y1, x2, y2 ※左上と右下
shape = "circle"：円 cx, cy, r ※中心と半径
shape = "poly"：多角形 x1, y1, x2, y2, x3, y3, ・・・
参考：イメージマップのコードを生成するツール
HTML Imagemap Generator：https://labs.d-s-b.jp/ImagemapGe...
~
***ページ内に別ページを埋め込んでメニューで切り替えたい
iframe でコンテンツを受け入れるエリアを作っておいて、リン...
-a タグ（呼び出し側）に target = "infoWindow" を記載
-iframe タグ（受け入れ場所）に name = "infoWindow" を明記
-DEMO：https://koichi-inoue.github.io/iframe/
-index.html
https://github.com/koichi-inoue/iframe/blob/master/index....
-読み込まれる html
https://github.com/koichi-inoue/iframe/blob/master/info01...
~
~
***きれいなフォントで表示させたい
Webで表示される文字は、基本的には閲覧者のPC環境に依存しま...
作り手の意図通りの見た目で表示させるひとつの方法としては...
-[[WebFonts]]
また、以前からある簡単・確実な手段として、文字を「画像」...
Web制作会社にとっては、このボタン画像制作は課金項目でも...
~
~
***メニュー(ナビ)を別ファイルにできないか？
&color(red){この要望の発生率は下がってきました。そろそろ...
かつては、frameタグを使ってメニューとコンテンツを分離する...
しかし、全ページに同じメニュー部分を記述するのはどうも…
メニューだけ能率的に分離する方法はないのか？ という方は…
-SSIを使う
SSI は「Server Side Include」の略で、HTMLファイルの中に特...
<!--#include file="nav.html"-->
上の記述例では、サーバー側でコメント部分をnav.htmlに置き...
''SSIのサンプル'' &ref(SSI_Sample.zip);
・当然ですが、サーバーにアップしないと動作確認はできませ...
・また、アップ先のサーバが SSI に対応している必要がありま...
・メインのファイルの拡張子は「shtml」とする必要があります。
＞ index.shtml
-PHPを使う
PHPはサーバー内で動作して、HTMLを吐くプログラムです。これ...
・[[PHP]]
~
~
***I.E.で見るとHTML5のレイアウトが崩れる
&color(red){この問題の発生率は下がってきました。そろそろ...
独自路線色の強かった少し前のI.E.（InternetExplorer）ではH...
-html5shivの導入
IE8以前のブラウザにHTML5のタグを認識させるためのライブラ...
Download > http://code.google.com/p/html5shiv/
--1) ダウンロード・解凍して html5shiv.js を見つけて下さい。
--2) ファイルを適当な場所に置いて下さい
（ここではドキュメントルートにjsフォルダを作って置きま...
--3) HTMLの<head>内に以下のコードを記述して下さい。
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
HTMLの記述としては、単なる注釈扱いになりますが、IEのみが...
「もしもIEのバージョンがv9未満だったならば、スクリプトを...
-IE9.jsの導入
IE6,7,8 を ie9 に近づけるためのライブラリをリンク導入しま...
以下のソースコードをHTML内に書くだけです。
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/versio...
<![endif]-->
この情報のオリジナルは以下にあります。最新の情報を使って...
http://code.google.com/p/ie7-js/
//DLするファイル名には ie7 の表記がありますが、解凍すると...
//Download > http://code.google.com/p/ie7-js/
//--1) ダウンロード・解凍して IE9.js というファイルを見つ...
//--2) ファイルを適当な場所に置いて下さい
// （ここではドキュメントルートにjsフォルダを作って置き...
//--3) HTMLの<head>内に以下のコードを記述して下さい。
// <!--[if lt IE 9]>
// <script src="js/ie9.js"></script>
// <![endif]-->
-以下、比較してみて下さい
--[[普通にHTML5で作ったもの>https://design.kyusan-u.ac.jp...
--[[上2つを実装したもの>https://design.kyusan-u.ac.jp/Sam...
当然ですが、IE8以前のブラウザでないとこの2つの違いは確認...
~
~
終了行:
*HTML/Tips
[[HTML]]｜[[HTML/Tags]]｜[[HTML/Sample]]｜[[HTML/Tips]]
~
#contents2_1
~
#hr
***Googleの検索フォームを設置したい
[[for属性>Google:for属性]]を使います。for属性はフォームパ...
以下の例では、label要素に for属性をつけることで、同じ内容...
<form action="http://www.google.com/search" method="get">
<label for="key">Google: </label>
<input id="key" type="search" name="q">
<input type="submit">
</form>
~
***SNSのシェアボタンを設置したい
以下のように、aタグで簡単に設置できます。Twitter などのリ...
-Twitter
<a href="http://twitter.com/share?url=http://（ページのU...
-Facebook
<a href="https://www.facebook.com/sharer/sharer.php?u=ht...
-LINE
<a href="https://social-plugins.line.me/lineit/share?htt...
//<a href="http://line.me/R/msg/text/?http://（ページのUR...
-参考：ブランドロゴのダウンロード
--Twitter：https://about.twitter.com/ja/company/brand-res...
--Facebook：https://ja.facebookbrand.com/
--LINE：https://line.me/ja/logo
~
***画像の部分領域にリンクを設定するには
地図画像等で、地図上の特定の範囲にリンクを設定したい場合...
-HTML
<img src="map.gif" usemap="#sample">
<map name="sample">
<area shape="rect" coords="20,10,120,80" href="01.html">
<area shape="circle" coords="200,100,40" href="02.html">
<area shape="poly" coords="400,100,500,100,500,200,400...
<area shape="default" href="00.html">
</map>
要点は以下のとおり
--地図画像を置く img タグに usemap="#[任意の名前]"を定義
--map タグでそれを特定した上で、各 area を地図画像内の座...
--area タグの href でリンク先を定義できます
--shapeの意味は以下のとおり
shape = "rect"：矩形 x1, y1, x2, y2 ※左上と右下
shape = "circle"：円 cx, cy, r ※中心と半径
shape = "poly"：多角形 x1, y1, x2, y2, x3, y3, ・・・
参考：イメージマップのコードを生成するツール
HTML Imagemap Generator：https://labs.d-s-b.jp/ImagemapGe...
~
***ページ内に別ページを埋め込んでメニューで切り替えたい
iframe でコンテンツを受け入れるエリアを作っておいて、リン...
-a タグ（呼び出し側）に target = "infoWindow" を記載
-iframe タグ（受け入れ場所）に name = "infoWindow" を明記
-DEMO：https://koichi-inoue.github.io/iframe/
-index.html
https://github.com/koichi-inoue/iframe/blob/master/index....
-読み込まれる html
https://github.com/koichi-inoue/iframe/blob/master/info01...
~
~
***きれいなフォントで表示させたい
Webで表示される文字は、基本的には閲覧者のPC環境に依存しま...
作り手の意図通りの見た目で表示させるひとつの方法としては...
-[[WebFonts]]
また、以前からある簡単・確実な手段として、文字を「画像」...
Web制作会社にとっては、このボタン画像制作は課金項目でも...
~
~
***メニュー(ナビ)を別ファイルにできないか？
&color(red){この要望の発生率は下がってきました。そろそろ...
かつては、frameタグを使ってメニューとコンテンツを分離する...
しかし、全ページに同じメニュー部分を記述するのはどうも…
メニューだけ能率的に分離する方法はないのか？ という方は…
-SSIを使う
SSI は「Server Side Include」の略で、HTMLファイルの中に特...
<!--#include file="nav.html"-->
上の記述例では、サーバー側でコメント部分をnav.htmlに置き...
''SSIのサンプル'' &ref(SSI_Sample.zip);
・当然ですが、サーバーにアップしないと動作確認はできませ...
・また、アップ先のサーバが SSI に対応している必要がありま...
・メインのファイルの拡張子は「shtml」とする必要があります。
＞ index.shtml
-PHPを使う
PHPはサーバー内で動作して、HTMLを吐くプログラムです。これ...
・[[PHP]]
~
~
***I.E.で見るとHTML5のレイアウトが崩れる
&color(red){この問題の発生率は下がってきました。そろそろ...
独自路線色の強かった少し前のI.E.（InternetExplorer）ではH...
-html5shivの導入
IE8以前のブラウザにHTML5のタグを認識させるためのライブラ...
Download > http://code.google.com/p/html5shiv/
--1) ダウンロード・解凍して html5shiv.js を見つけて下さい。
--2) ファイルを適当な場所に置いて下さい
（ここではドキュメントルートにjsフォルダを作って置きま...
--3) HTMLの<head>内に以下のコードを記述して下さい。
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
HTMLの記述としては、単なる注釈扱いになりますが、IEのみが...
「もしもIEのバージョンがv9未満だったならば、スクリプトを...
-IE9.jsの導入
IE6,7,8 を ie9 に近づけるためのライブラリをリンク導入しま...
以下のソースコードをHTML内に書くだけです。
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/versio...
<![endif]-->
この情報のオリジナルは以下にあります。最新の情報を使って...
http://code.google.com/p/ie7-js/
//DLするファイル名には ie7 の表記がありますが、解凍すると...
//Download > http://code.google.com/p/ie7-js/
//--1) ダウンロード・解凍して IE9.js というファイルを見つ...
//--2) ファイルを適当な場所に置いて下さい
// （ここではドキュメントルートにjsフォルダを作って置き...
//--3) HTMLの<head>内に以下のコードを記述して下さい。
// <!--[if lt IE 9]>
// <script src="js/ie9.js"></script>
// <![endif]-->
-以下、比較してみて下さい
--[[普通にHTML5で作ったもの>https://design.kyusan-u.ac.jp...
--[[上2つを実装したもの>https://design.kyusan-u.ac.jp/Sam...
当然ですが、IE8以前のブラウザでないとこの2つの違いは確認...
~
~
ページ名:
