html5

Pannellumを使って、iframeで360度画像をブログに取り込む2

http://d.hatena.ne.jp/kenmituo/20170309/1489035138の続き。Pannellumってのは「親要素のHTMLファイルのiframeに中身の子要素HTMLファイルに画像を貼り付けて表示する。」です。画像ごとにファイルを作るのも面倒なので魔改造することにした。 親要素 ifra…

Pannellumを使って、iframeで360度画像をブログに取り込む

Pannellumてなプラグインを使ってみる。 A simple exampleを改造 panorama.htmlとして保存、cssとjsあと画像も同一ホルダに保存してアップロードすると見える。 <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>A simple example</title> <link rel="stylesheet" href="pannellum.css"/> …</link></meta></meta></head></html>

THETAの360度写真をCMSに埋め込む

プラグインとか公式の変換じゃなくて、2015/05/21 ■ THETAの360度写真を人に渡そう!「人に渡せる」ポータブル・パノラマプレイヤーを作ったを使ったときの手順 写真を撮影して、データをPCに取り込む http://mobilehackerz.jp/panorama/PortablePanoramaPla…

グリフを眺めるだけで覚えられそうなツール

一覧表だと頭に入ってこないのでグリフパターンを画像に加工してスライドショー的に表示させているけど、新しいパターンが出てくると困る。。。そこでテキストベースのデータにして、Webで表示させる手法を思いつく。http://ingress.houkou-onchi.com/ HTML…

クラウド化したWebサーバでアクセス制限

前のWebサーバでアクセス制限をしていたとき order deny,allow deny from all allow from .kenmituo.comこんなかんじで.htaccess(UTF-8、LF)で書いていて制限ができていたのに、クラウド化したらallowにIP/16とか自分の固定IPとか入れても403になる問題に…

同一ドメインのRSSを取得して表示する

難しいことはまったくないとおもう。 /*ヘッダー*/ <script type="text/javascript" src="common/js/jquery-1.5.1.min.js"></script> <script type="text/javascript" src="common/js/xmlRss.js"></script> <script type="text/javascript">

いろんなボタンを動的に仕込める?

流行りのボタンを調べてみた ツイートボタン:twitter プラスワンボタン:google+ Like Button:facebook 他にも沢山あるけど代表的な3つだけ。 どーやって設置するの? googleの場合 <script type="text/javascript" src="https://apis.google.com/js/plusone.js"> {lang: 'ja'} </script>

CSSだけのツリーメニューを印刷するときだけ非表示にする

Drop Down Menus : Massive Blue Drop Down CSSだけでメニューを作るというのが素晴らしいので導入してみたものの、印刷するときには非表示にしたいんだけどレイアウト崩壊がおきていたのをずーっと悩んでいた。 上記サイトから引用 <div class="menu"> <ul> <li><a href="#" target="_self" >Sample</a> <ul> <li><a href="#" target="_self">Sub Menu1</a></li> <li><a href="#" target="_self">Sub</a></li></ul></li></ul></div>…

イロイロと必要な情報

つらつらと 外部リソースの参照

より現実的なHTML5+WAI-ARIA

過去二回の努力 まだ勉強中なり まだ勉強中なり2 そしてtltgさんのコメント 自分が納得できるゴールは見つかっていないところに、プロジェクトは走りだす。このままじゃ泥船決定なので今まで以上にがんばる。 あたらしい情報 http://www.w3.org/TR/wai-aria…

まだ勉強中なり2

まだ勉強中なりで勉強してみたら著者不明の文書の著者さんのコメントでHTML5の考え方が甘いことがよく分かった。 よくあるのはWAI-ARIAを想定していない、健常者しかターゲットにしていないイケてないレイアウト、自分もそうしてきたので反省。 ※よくある健…

ぱんくずリスト

パンくずリスト(wikipedia) 日本語では「パンくずリスト(breadcrumb list)」だが、英語では単に“breadcrumbs”または“breadcrumb navigation”というのが一般的。「パンくずリスト」という名前は、童話『ヘンゼルとグレーテル』で、主人公が森で迷子にならな…

簡素にしたいのよ。

良い表題が思いつかない・・・ ぐちっぽい HTML5で書くことを考える。ページ数は300ぐらいになる。ナビゲーションをちゃんとしたい。楽したい。簡素にしたい。あーしたい、こーしたい。 どこになにを配置するかで誤解していた。 「navはナビゲーションにつかう…

かっこいいナビゲーション

Large Drop Down Menu Demoというのを見つけた。かっこいい。 これをdesktop、mobile、print用のデザインにも応用させたい。 (注意:最後には挫けています。) 簡単な分析 自分用のメモ、他人への理解は気にしない。 <body> <h1>さんぷる</h1> <div class="box"> <h2>おおきな摘んで落とす項目な</h2></div></body>…

W3Cみたいなスタイルシートの切り替え

いいよね、http://www.w3.org/このデザイン。 Views: desktop mobile print 選択したスタイルシートが適用されて、cookieにも保存されるのでページ遷移でも引き継ぐ。 こんなことを実現する奴をさがす。 A List Apart: Articles: Alternative Style: Working…

今日もお勉強

まだ勉強中なりで勉強というか、船頭多いというか、ゴールが見えないというか、、、な状況でもう一度調べてみた。 いままで読んできた中で一番簡潔にまとまっているように思えるページを発見! HTML5+CSS3 入門「http://yoppa.org/」 情報系の先生なのね。納…

まだ勉強中なり

はじめようHTML5【HTML5テンプレートファイル配布してます】修正版 このテンプレを使って作り始めれば良さそう。 (「[YOURSITE]/html5-reset-」なCSSファイルはhttp://code.google.com/p/html5resetcss/downloads/listからDLする。最新版が良ければ書き換え…

webサイトの作り直しを考えている

ボリュームが増えすぎて大変なことになっているサイト管理。PC/携帯端末/iOSと完全に全てを網羅している訳じゃないけど重複があって苛っとする。 作り直すとしたら?目標を考えてみる。 DRY(Don't Repeat Yourself)厳密にはRoRで使うけど、同じ感じなので…

そろそろ本気を出して勉強を始める

HTML5.jpのhtml5doctorの記事を読んで勉強を始める。 必要なモノ いきなりHTML5に完全移行できない。IE9が浸透するまでは。 リセットスタイルシート(code google) HTML5 有効化スクリプトをダウンロード テンプレートファイルを作成するにあたって、こいつら…