お手軽VR「A-Frame」

Web技術で、VRを実現しようとしたら…

昔々でしたら「VRML」とか最近でしたら「Flash」で実現してました。

「HTML5」だと、CSSで可能ですし、JavaScriptのCanvas API・WebGL、three.jsとかを使用すると可能ですね。

ただ初心者がお手軽にするには少々ハードルがあります。そこで思い出したのが「A-Frame」。2015年からMozillaさんが始めたもの

もっとみる
ありがとうございます!
2

GitHub PagesによるWebサイト公開

Github pageを皆さんのWebサイトとして活用しましょう。無料ですし。

それに皆さんの書いたコードが1000年の時を超えて保存されるかもしれませんよ。実際、なかしまぁ先生のコードは保存されてます。

この記事を書いた時点から仕様というのは変わるものです。画面や内容が変わっていたら、ググるなどして柔軟に対応してください。

1. アカウントの作成

① GitHubにアクセスして、Sign

もっとみる
どもです!
5

スマートフォン対応のコーディング

viewportの設定

/*viewport=表示領域*//*縮小を行わせないようにするために、viewportのサイズとデバイス画面のサイズを同じにする*/

<head> <meta name="view port" content="width-device-width,initial-scale=1.0"> <title>シングルページレイアウト</title> <li

もっとみる

なかしまぁ先生の勝手にWeb~HTML5の歴史まとめ

なかしまぁ先生の個人的歴史のまとめです。私の知見に基づいていますので、間違い等あるかもしれません、ご了承ください。

「Web」の表記ですが、固有名詞として古くは「WEB」、そして「Web」になり、最近は普通名詞ということで「web」で表示するなど意見が別れています。私は一応「Web」で記述します。

また「ホームページ」という表現がありますが、一般に「ホームページ」とは、サイトの最初のページ(=

もっとみる
ありがとうございます!
11

displayプロパティ

display:block;

/*要素をブロック要素にする*/

HTML

<a class="btn href="URL">ボタン</a>

CSS

.btn{ background-color: #ccc; /* 背景色 */ text-align: center; /* 文字を要素の中央に */ color: #000;

もっとみる

CSSその他

br要素

<br>要素は、文中に改行を指定する要素です。空要素なので終了タグは必要ありません。改行をして表示することが妥当な場合のみ使用しましょう。見た目の調整はCSSで行うようにしてください。

©は特殊文字

コピーライトの行頭に記述する©は特殊文字の一種です。どの環境でも共通して表示させるためには「&copy;」と記述してください

フォームテンプレート

<!--HTML--><head><title>お問い合わせフォームを作る</title></head><body><form action="program.php method="post"><dl> <dt>お問い合わせの種別</dt> <dd> <label><input type="chckbox" name="category" value="お問い合わせ”>

もっとみる

フォームの装飾について

セレクタの選択

/*input要素にtype属性を指定することで様々な入力や選択用の項目を挿入できる*/input要素の個別の属性セレクタを指定する場合input[type="type属性"]{プロパティ:値;}

フォーム全体のinputセレクタを指定する場合

input{プロパティ:値;}

送信ボタンのを目立たせる

p.submit{text-align:center;}

文字の太さ

もっとみる

表のスタイリング

表や各セルに枠線をつける

table{border:線の太さ 線の種類 線の色;}

線の重なりを調節する

table{border-collapse:値;}

border-collapseプロパティの値

collapse:隣接するセルの線を重ねる /*border-collapse:collapse;で重ねるよう指定した線は相殺される*/ /*優先度はborder-topより

もっとみる

リストとナビゲーションのスタイリング

リストの先頭につく図形や数字の指定

li{list-style-type:種類;}

代表的なlist-style-typeプロパティの種類

none/*なし*/disc/*黒丸*/circle/*白丸*/square/*黒四角*/decimal/*数字*/cjk-ideographic/*漢数字*/decimal-leading-zero/*0から始まる数字*/lower-roman/*小文

もっとみる