魔術師見習いのノート

プロフィール

魔術師見習い
Author魔術師見習い-_-.
Twitter魔術師見習い

コンピュータ関係のメモを主に書きます．

MENU

HTML 箇条書き(横書き)

投稿日:
タグ:

HTMLで，ニコニコ動画の上にある登録タグのようなものを書く(カンマやスペース等で区切って横に並べる)時，マークアップ言語的に<ul>を使って，見た目はCSSに任せるべきだと思い調べてみた．

見た目はこんな感じになる(Google Chrome19,Opera12, firefox12で確認)．

  • hoge
  • fuga
  • piyo
  • hoge
  • fuga
  • piyo
以下が上のHTMLのCSSのサンプルコードである． 
<style>
li {
  list-style:none;
  text-indent:0;
  margin:0;
  padding:0;
}
li:last-child {
  float:none;
}
li:not( :last-child ){
  float:left;
}
li:not( :last-child ):after{
  content:"・";
}
li:last-child:after{
  content:"";
}
</style>
contentの値を変えれば他の区切り記号になる．

また，Aタグを加えるとこういう見た目になる．

飛び先アドレスは全てgoogle．

HTMLタグとCSSによるデフォルメ日本地図

投稿日:
タグ:

tableタグとCSSで書くデフォルメ日本地図。「タグで作った日本地図素材-地方別色分けB(リンクあり)」や「なぜ人はテーブルタグで日本地図を作るのか - 寄せては返す館主専用」を参考に，HTMLとCSSで記述。 

<style>
<!--
table.jp td {
    text-align:center;
    padding:5px;
}
td.hokkaido{
    background-color:#87cefa;
}
td.tohoku {
    background-color:#40e0d0;
}
td.koshinetsu {
    background-color:#3cb371;
}
td.hokuriku {
    background-color:#2e8b57;
}
td.kanto {
    background-color:#66cdaa;
}
td.kinki {
    background-color:#bdb76b;
}
td.tokai {
    background-color:#9acd32;
}
td.chugoku {
    background-color:#deb887;
}
td.kyusyu {
    background-color:#ff8c00;
}
td.shikoku {
    background-color:#ff7f50;
}
td.okinawa {
    background-color:#ff6347;
}
-->
</style>

<table class="jp">
<tr>
 <td colspan="15"></td>
 <td colspan="3" class="hokkaido" style="height:80px;">
  北海道
 </td>
</tr>

<tr>
<td></td>
</tr>

<tr>
<td colspan="15"></td>
<td colspan="2" class="tohoku">
青森
</td>
<td style="min-width:10px;"></td>
</tr>

<tr>
<td colspan="15"></td>
<td class="tohoku">
秋田
</td>
<td class="tohoku">
岩手
</td>
</tr>

<tr>
<td colspan="15"></td>
<td class="tohoku">
山形
</td>
<td class="tohoku">
宮城
</td>
</tr>

<tr>
<td colspan="12"></td>
<td class="hokuriku">
石川
</td>
<td class="hokuriku">
富山
</td>
<td class="koshinetsu" colspan="2">
新潟
</td>
<td class="tohoku">
福島
</td>
</tr>

<tr>
<td colspan="2"></td>
<td class="kyusyu">
長崎
</td>
<td class="kyusyu">
佐賀
</td>
<td class="kyusyu">
福岡
</td>
<td></td>
<td class="chugoku" rowspan="2">
山口
</td>
<td class="chugoku">
島根
</td>
<td class="chugoku">
鳥取
</td>
<td class="kinki" rowspan="2">
兵庫
</td>
<td class="kinki">
京都
</td>
<td class="kinki">
滋賀
</td>
<td class="hokuriku">
福井
</td>
<td class="koshinetsu" rowspan="2">
長野
</td>
<td class="kanto">
群馬
</td>
<td class="kanto">
栃木
</td>
<td class="kanto">
茨城
</td>
</tr>

<tr>
<td colspan="3"></td>
<td class="kyusyu">
熊本
</td>
<td class="kyusyu">
大分
</td>
<td></td>
<td class="chugoku">
広島
</td>
<td class="chugoku">
岡山
</td>
<td class="kinki">
大阪
</td>
<td class="kinki">
奈良
</td>
<td class="tokai">
岐阜
</td>
<td class="koshinetsu">
山梨
</td>
<td class="kanto">
埼玉
</td>
<td class="kanto">
千葉
</td>
</tr>

<tr>
<td colspan="3"></td>
<td class="kyusyu">
鹿児島
</td>
<td class="kyusyu">
宮崎
</td>

<td colspan="5"></td>

<td class="kinki">
和歌山
</td>
<td class="tokai">
三重
</td>
<td class="tokai">
愛知
</td>
<td class="tokai">
静岡
</td>
<td class="kanto">
神奈川
</td>
<td class="kanto">
東京
</td>
</tr>

<tr>
<td colspan="7"></td>
<td class="shikoku">
愛媛
</td>
<td class="shikoku">
香川
</td>
</tr>

<tr>
<td class="okinawa">
沖縄
</td>
<td colspan="6"></td>
<td class="shikoku">
高知
</td>
<td class="shikoku">
徳島
</td></tr>
</table>

videoタグとaudioタグ

投稿日:
編集日:
タグ:

本稿はvideoタグとaudioタグに関するメモ。 参考にしたものとしては，このページなどを利用した。

videoタグ

動画を扱うためのタグ。どうやらWebブラウザはちゃんとバッファリングしてくれるようだった。

動画はWebで検索して見つかった動画素材を使用。ソースコードはこのような感じである。 
<video controls width="320" height="240">
<source src="./downloads/a63/test.mp4">
<p>ご利用のWebブラウザでは再生できません。</p>
</video>
videoタグやaudioタグで囲んだものはそのタグをサポートしていないブラウザ向けの内容を書く。

再生できる動画フォーマットはWebブラウザに依存するが，videoタグはsourceタグを使用することでいくつかの候補を用意することができる。 

<video controls autoplay poster="firstframe.jpg" width="320"
height="240">
<source src="./sample.flv">
<source src="./sample.mp4">
<p>ご利用のWebブラウザでは再生できません。</p>
</video>
videタグの属性には次のようなものがある。
controls
再生やシーク，音量などのインタフェースを表示。
autoplay
読み込み次第再生。
poster
初期画面。
width
横のサイズ。
height
縦のサイズ。

CSSやJavascriptを利用したコメント付き動画のサンプル

videoタグやCSS，Javascriptを使用すればニコニコ動画のように動画にコメントが流れるようなものも生成できる。以下にサンプルを示す。なお停止やシークの移動によりコメントが戻るような機能はついていない。また，サンプルでは追加されたタグは削除されないので注意。

CSS
div#comments {
  position:absolute;
  width:420px;
  height:200px;
  color:black;
  z-index:1;
  font-size:20px;
  text-align:center;
  opacity:0.7;
}

video#comments_video {
    z-index:0;
    position:absolute;
    padding-left:100px;
}
Javascript
const ID = 0;
const COMMENT = 1;
const START = 2;
const LEFT = 3;
const TOP = 4;
const DEFAULT_LEFT = 420
const COMMENT_NUM = 11;
var comments = [
    // [element, comment, start_time, default_left, top]
    [null, "comment0", 0, DEFAULT_LEFT, 60],
    [null, "comment1", 1000, DEFAULT_LEFT, 40],
    [null, "comment2", 1000, DEFAULT_LEFT, 80],
    [null, "comment3", 2000, DEFAULT_LEFT, 40],
    [null, "comment4", 3000, DEFAULT_LEFT, 140],
    [null, "comment5", 5000, DEFAULT_LEFT, 40],
    [null, "comment6", 5000, DEFAULT_LEFT, 80],
    [null, "comment7", 5000, DEFAULT_LEFT, 100],
    [null, "comment8", 6000, DEFAULT_LEFT, 80],
    [null, "comment9", 6500, DEFAULT_LEFT, 100],
    [null, "comment10", 7000, DEFAULT_LEFT, 160]
];
var rtime;
var time=0;
var min = 0;
var index=0;

function controlComments()
{
    var child;
    
    time += 50;
    if (index < COMMENT_NUM)
	while (comments[index][START] < time){
	    comments[index][ID] = document.createElement("span");
	    child = comments[index][ID];
	    document.getElementById("comments").appendChild(child)
	    child.innerHTML = comments[index][COMMENT];
	    child.style.color = "black";
	    child.style.position = "absolute";
	    child.style.left = comments[index][LEFT] + "px";
	    child.style.top = comments[index][TOP] + "px";
	    document.getElementById("comments").appendChild(comments[index][ID])
	    index += 1;
	}
    
    
    for (i=min;i<index;i++){
	if (comments[i][LEFT] > 0){
	    comments[i][LEFT] -= 5;
	    comments[i][ID].style.left = comments[i][LEFT] + "px";
	}else{
   	    // TODO: spanタグの削除
	    if (i>min)
		min = i;
	}
    }
}

function doPlay()
{
    rtime = setInterval('controlComments()', 50);
}

function doPause()
{
    clearInterval(rtime);
}
html5
<div id="comments">
</div>

<video id="comments_video" controls poster="firstframe.jpg" onplay="doPlay();" onpause="doPause()" width="320" height="240">
<source src="./downloads/a63/test.mp4">
<p>動画を再生するにはvideoタグをサポートしたブラウザが必要です。</p>
</video>

audioタグ

音楽を扱うためのタグ。 audioタグもvideoタグ同様controls属性を使えるが，以下にjavascriptやhtml，cssでインタフェースを作成した例を示す。



曲はWebで検索したものから適当なページを選択。

css3
hr {
    display:none;
}

section#music_controller {
    background-color:black;
    text-align:center;
    width:20em;
    padding:1em;
}

select {
    background-color:#111111;
    color:white;
    width:20em;
}

#music_seek {
    height:2em;
    width:20em;
}

.cir_btn {
    color:red;
    background-color:black;
    text-align:center;
    width:3em;
    height:3em;
    margin:0;
    padding:2px;
    border-radius: 30px;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
}
javascript
var playing = false;	// 再生中か否か
var rtime;		// シークバーの管理
var idx=0;		// 音楽番号
var MUSIC_NUM=3;	// 曲数
var MUSIC_LIST = [	// 曲名一覧
    "http://pied-piper.net/note/downloads/a63/Brahms-Symphony-No1-1st.mp3",
    "http://pied-piper.net/note/downloads/a63/Ravel-Bolero.mp3",
    "http://pied-piper.net/note/downloads/a63/Beethoven-SymNo7-1.mp3"
];


/* 再生位置をシークバーの位置に設定 */
function jumpMusicSeek()
{
    document.getElementById("my_audio").currentTime = document.getElementById("music_seek").value;
}


/* 曲名を指定した番号に変更 */
function changeMusic(i)
{
    if (playing)
	stopMusic();
    
    idx = i;
    document.getElementById("my_audio").src = MUSIC_LIST[idx];
    document.getElementById("music_list").selectedIndex = idx;
}


/* 選択された曲を再生 */
function selectMusic()
{
    if (playing)
	stopMusic();
    
    idx = document.getElementById("music_list").selectedIndex;
    document.getElementById("my_audio").src = MUSIC_LIST[idx];
    
    playMusic();
}


/* シークバーを進める */
function advanceMusicSeek()
{
    var audio = document.getElementById("my_audio");
    if (audio.ended){
	idx++;
	if (idx<MUSIC_NUM){
	    changeMusic(idx);
	    playMusic();
	}else{
	    idx = 0;
	    changeMusic(idx);
	}
    }
    document.getElementById("music_seek").value = audio.currentTime;
}


/* 次の曲を再生 */
function nextMusic()
{
    idx++;
    if (idx >= MUSIC_NUM){
        idx = 0;
    }
    if (playing){
        changeMusic(idx);
        playMusic();
    }else{
        changeMusic(idx);
    }
}


/* 前の曲を再生 */
function prevMusic()
{
    idx--;
    if (idx < 0){
        idx = MUSIC_NUM-1;
    }
    if (playing){
        changeMusic(idx);
        playMusic();
    }else{
        changeMusic(idx);
    }
}


/* 曲を再生/一時停止 */
function playMusic()
{
    if (playing){
	document.getElementById("play_button").innerHTML = "▶";
	document.getElementById("my_audio").pause();
	playing = false;
	clearInterval(rtime);
    }else{
	var audio;
	var seek = document.getElementById("music_seek");
	audio = document.getElementById("my_audio");
	audio.play();
	document.getElementById("play_button").innerHTML = "||";
	playing = true;
	rtime = setInterval("advanceMusicSeek()", 500);
    }
}


/* 再生中の音楽を停止 & 再生位置を0に */
function stopMusic()
{
    var audio = document.getElementById("my_audio");
    if (playing){
	audio.pause();	
	document.getElementById("play_button").innerHTML = "▶";
	document.getElementById("my_audio").pause();
	playing=false;
	clearInterval(rtime);
    }
    audio.currentTime = 0.0;
    document.getElementById("music_seek").value = audio.currentTime;
}


/* 早送り */
function ffMusic()
{
    audio = document.getElementById("my_audio");
    audio.currentTime += 2.0;
    document.getElementById("music_seek").value = audio.currentTime;
}


/* 巻き戻し */
function rewindowMusic()
{
    audio = document.getElementById("my_audio");
    audio.currentTime -= 2.0;
    document.getElementById("music_seek").value = audio.currentTime;
}


/* 曲の再生時間を設定 */
function setMaxTime()
{
    document.getElementById("music_seek").max = document.getElementById("my_audio").duration;
}
html5
<div id="music_player">
<section id="music_controller">
<button id="prev_button" onClick="prevMusic()" class="cir_btn">|◀◀</button>
<button id="rewind_button" onClick="rewindMusic()" class="cir_btn">◀◀</button>
<button id="play_button" onClick="playMusic()" class="cir_btn">▶</button>
<button id="stop_button" onClick="stopMusic()" class="cir_btn">■</button>
<button id="ff_button" onClick="ffMusic()" class="cir_btn">▶▶</button>
<button id="next_button" onClick="nextMusic()" class="cir_btn">▶▶|</button>

<br>

<input id="music_seek" type="range" onChange="jumpMusicSeek()" min="0.0" value="0.0">

<br>

<select id="music_list" onChange="selectMusic()" size="3">




<option selected>ブラ1</option>
<option>ボレロ</option>
<option>ベト7</option>
</select>
</section>

<audio id="my_audio" src="http://www.sousound.com/music/jazz_fusion/jazz_01.mp3" onloadeddata="setMaxTime();">
<p>このブラウザはaudioタグをサポートしていません</p>
</audio>
</div>

時期が近い記事

一覧

Glogal link