Skip to content

Instantly share code, notes, and snippets.

@tseijp
Last active July 29, 2018 10:27
Show Gist options
  • Save tseijp/66efcfd679ee4961aaafedd4a13a2ed2 to your computer and use it in GitHub Desktop.
Save tseijp/66efcfd679ee4961aaafedd4a13a2ed2 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<!--processing.jsを読み込む-->
<script src="js/processing.js"></script>
<!--#wrapperのサイズを取得してcanvasの幅と高さに指定しcanvasを全画面に-->
<script type="text/javascript">
$(function () {
sizing();
$(window).resize(function () {
sizing();
});
});
function sizing() {
$("#main").attr({ height: $("#wrapper").height() });
$("#main").attr({ width: $("#wrapper").width() });
}
</script>
<meta charset="UTF-8">
<style type="text/css">
header {
height: 8ex;
padding: 2ex;
margin: 0;
background: rgb(50,50,50);
}
body {
margin: 0;
background: rgb(150,150,150);
}
body #wrapper {
width: 100%;
height: 100%;
position: fixed;
}
section {
padding: 1ex;
margin: 0 30ex;
bottom: 100%;
background: rgb(252, 255, 250)
}
aside {
position: absolute;
top: 16ex;
width: 30ex;
background: rgb(50,50,50)
}
ol {
background: rgb(250,80,10);
}
/*クリックした時に表示される枠をCSSで消す*/
*:focus {
outline: none;
}
</style>
<script type="application/processing" data-processing-target="pjs">
<!--processingはここにコード-->
</script>
</head>
<body background="header/backs.jpg">
<!--ヘッダー-->
<header>
<ol><h1>Homepage</h1></ol>
</header>
<!--パンくずリスト-->
<div class="breadcrumbs-inner">
<span typeof="v:Breadcrumb">
<a title="HomePage" href="https://youseitakei.github.io/WebPage/" rel="v:url" property="v:title">HomePage</a>>>
</span>
<!--
<span typeof="v:Breadcrumb">
<a title="任意のタイトル" href="http://https://youseitakei.github.io/WebPage/任意のリンク/ファイル.html" rel="v:url" property="v:title">任意のタイトル</a>>>
</span>
<span typeof="v:Breadcrumb">
<a title="任意のタイトル" href="http://https://youseitakei.github.io/WebPage/任意のリンク/ファイル.html" rel="v:url" property="v:title">任意のタイトル</a>>>
</span>
mo
<span typeof="v:Breadcrumb">
<a title="任意のタイトル" href="http://https://youseitakei.github.io/WebPage/任意のリンク/ファイル.html" rel="v:url" property="v:title">任意のタイトル</a>>>
</span>
-->
</div>
<!--メイン-->
<section>
<!--processingの表示-->
<!--canvasを設置-->
<div id="wrapper"<!--wrapper:フルcanvas--><canvas id="pjs"/></div>
<!--この記述の後にコンテンツ(文章等)を設置すれば、canvasの上に表示される-->
<div class="gridContainer clearfix">
<!--タイトルを記入-->
<h1>タ<font color="#e93d4b">イ</font>トル</h1>
</div>
<div class="gridContainer clearfix">
<div id="LayoutDiv1">
<br>
<!--ここに本文を記述-->
<br>
</div>
</div>
<div class="gridContainer clearfix">
<div id="LayoutDiv2">
<br>
<!--ここに本文を記述-->
<br>
</div>
</div>
</section>
<!--サイド-->
<aside>
<div style="text-align: left">
<ol>
<h3>CONTENTS</h3>
</ol>
<hr>
<a href="https://youseitakei.github.io/WebPage/Memo.html" Memo">Memo</a>
<a href="https://youseitakei.github.io/WebPage/Work.html" Work">Work</a>
<hr>
<h5>Memo</h5>
<nobr>
<a href="https://youseitakei.github.io/WebPage/Memo/July.html" July">July</a>
<a href="https://youseitakei.github.io/WebPage/Memo/August.html" August">August</a>
</nobr>
<hr>
<h5>July</h5>
<nobr>
<a href="https://youseitakei.github.io/Webpage/Memo/Page1.html">Page1</a>
<a href="https://youseitakei.github.io/Webpage/Memo/Page2.html">Page2</a>
<a href="https://youseitakei.github.io/Webpage/Memo/Page3.html">Page3</a>
<a href="https://youseitakei.github.io/Webpage/Memo/Page4.html">Page4</a>
</nobr>
<hr>
</div>
<menu type="toolbar">
<button type="button" onclick="fnew()">新規作成</button>
<button type="button" onclick="fopen()">編集</button>
</menu>
</aside>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment