Biomod/2014/example

From OpenWetWare
Jump to navigationJump to search

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Tyoe" content="text/javascript" /> <title>ここにキーワードを含むページのタイトルを記入</title> <meta name="Description" content="ここにキーワードを含むページの説明文を記入" /> <meta name="Keywords" content="キーワード,キーワード,キーワード" /> <script src="js/modernizr.custom.63321.js"></script>

<style>

.form { width: 800px; border-collapse: collapse; margin: 0 auto; }

.form th, td { border: none; padding: 5px 5px; color: #333; font-weight: normal; font-size: 1.5em; text-align: left; }

input { height:auto !important; line-height:auto !important; margin-top: 3px !important; }

strong.ttl { text-align:left; border-left:none; display:block; padding:2px 5px; margin-bottom:1.5em; font-size: 1.2em; font-weight: bold; }

input.button { width:120px; }

.msg { color:#dd0000; }

form.jqtransformdone label { margin-top:4px; margin-right: 8px; display: block; float:left; }

form.jqtransformdone div.rowElem { clear:both; padding:4px 0px; }

/* ------------- 

* Buttons
* ------------- */

button.jqTransformButton { margin: 0px; padding: 0px; border: none; background-color: transparent; cursor: pointer; overflow: visible; font-family: Arial; }

  • first-child+html button.jqTransformButton[type] {

width: 1; } /* IE7 */

button.jqTransformButton span { background: transparent url(../images/img/btn_right.gif) no-repeat right top; display: block; float: left; padding: 0px 4px 0px 0px; /* sliding doors padding */ margin: 0px; height: 33px; }

button.jqTransformButton span span { background: transparent url(../images/img/btn_left.gif) no-repeat top left; color: #333; padding: 8px 4px 0px 8px; font-weight: normal; font-size: 12px; line-height: 13px; display: block; text-decoration: none; height: 33px; }

/*hover*/ button.jqTransformButton_hover span span { background-position: left -33px; }

button.jqTransformButton_hover span { background-position: right -33px; }

/*clicked*/ button.jqTransformButton_click span span { background-position: left -66px; }

button.jqTransformButton_click span { background-position: right -66px; }

/* IE 6 */

  • html button.jqTransformButton {

height:33px; }

  • button.jqTransformButton span span {

height: 25px; }

/* IE 7 */

  • + html button.jqTransformButton {

height:33px; }

  • + button.jqTransformButton span span {

height: 25px; }

/* ------------- 

* Inputs
* ------------- */

.jqTransformInputWrapper { background: transparent url(../images/img/input/input_text_left.gif) no-repeat left top; height: 31px; padding: 0px; float:left; }

.jqTransformInputInner { background: transparent url(../images/img/input/input_text_right.gif) no-repeat top right; padding: 0px; margin: 0px; }

.jqTransformInputInner div { height: 31px; margin:0px 0px 0px 8px; }

.jqTransformInputInner div input { font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height: 18px; vertical-align: middle; height: 31px; color:#404040; border: none; padding: 5px 0px 0px 0px; margin: 0px; background:transparent; }

/* IE6 */

  • html .jqTransformInputInner div input {

padding: 6px 0 0 0; margin: 0 0 0 -8px; height:24px; }

/* Ie7 */

  • + html .jqTransformInputInner div input {

padding: 6px 0 0 0; margin-left:-10px; height:24px; }

/*hover*/ .jqTransformInputWrapper_hover { background-position: left -31px; }

.jqTransformInputWrapper_hover div.jqTransformInputInner { background-position: right -31px; }

/*focus*/ .jqTransformInputWrapper_focus { background-position: left -62px; }

.jqTransformInputWrapper_focus div.jqTransformInputInner { background-position: right -62px; }

.jqTransformSafari .jqTransformInputInner div { position: relative; overflow: hidden; margin:0px 8px; }

.jqTransformSafari .jqTransformInputInner div input { background-color: none; position: absolute; top: -10px; left: -2px; height: 42px; padding-left: 4px; }

/* ------------- 

* Textarea
* ------------- */

table.jqTransformTextarea td#jqTransformTextarea-mm textarea { font-size: 12px; line-height: 16px; }

table.jqTransformTextarea td { font-size: 1px; line-height: 1px; width: 5px; height: 5px; margin: 0; padding: 0; }

table.jqTransformTextarea { }

table.jqTransformTextarea tr { /*border: 1px solid red;*/

}

table.jqTransformTextarea textarea { margin: 0; padding: 0; border: 0; background: none; }

table.jqTransformTextarea td#jqTransformTextarea-tl { background: url(../images/img/textarea/textarea_tl.gif) no-repeat top left; }

table.jqTransformTextarea td#jqTransformTextarea-tm { background: url(../images/img/textarea/textarea_tm.gif) repeat-x top left; }

table.jqTransformTextarea td#jqTransformTextarea-tr { background: url(../images/img/textarea/textarea_tr.gif) no-repeat top left; }

table.jqTransformTextarea td#jqTransformTextarea-ml { background: url(../images/img/textarea/textarea_ml.gif) repeat-y top left; }

table.jqTransformTextarea td#jqTransformTextarea-mm { background: url(../images/img/textarea/textarea-mm.gif) repeat; }

table.jqTransformTextarea td#jqTransformTextarea-mr { background: url(../images/img/textarea/textarea_mr.gif) repeat-y top left; }

table.jqTransformTextarea td#jqTransformTextarea-bl { background: url(../images/img/textarea/textarea_bl.gif) no-repeat top left; }

table.jqTransformTextarea td#jqTransformTextarea-bm { background: url(../images/img/textarea/textarea_bm.gif) repeat-x top left; }

table.jqTransformTextarea td#jqTransformTextarea-br { background: url(../images/img/textarea/textarea_br.gif) no-repeat top left; }

/*hover*/ table.jqTransformTextarea-hover td#jqTransformTextarea-tl { background-position:0px -5px; }

table.jqTransformTextarea-hover td#jqTransformTextarea-tm { background-position:0px -5px; }

table.jqTransformTextarea-hover td#jqTransformTextarea-tr { background-position:0px -5px; }

table.jqTransformTextarea-hover td#jqTransformTextarea-ml { background-position:-5px 0px; }

table.jqTransformTextarea-hover td#jqTransformTextarea-mm { background-image: url(../images/img/textarea/textarea-mm-hover.gif); }

table.jqTransformTextarea-hover td#jqTransformTextarea-mr { background-position:-5px 0px; }

table.jqTransformTextarea-hover td#jqTransformTextarea-bl { background-position:0px -5px; }

table.jqTransformTextarea-hover td#jqTransformTextarea-bm { background-position:0px -5px; }

table.jqTransformTextarea-hover td#jqTransformTextarea-br { background-position:0px -5px; }

/*focus*/ table.jqTransformTextarea-focus td#jqTransformTextarea-tl { background-position:0px -10px; }

table.jqTransformTextarea-focus td#jqTransformTextarea-tm { background-position:0px -10px; }

table.jqTransformTextarea-focus td#jqTransformTextarea-tr { background-position:0px -10px; }

table.jqTransformTextarea-focus td#jqTransformTextarea-ml { background-position:-10px 0px; }

table.jqTransformTextarea-focus td#jqTransformTextarea-mm { background-image: url(../images/img/textarea/textarea-mm-focus.gif); }

table.jqTransformTextarea-focus td#jqTransformTextarea-mr { background-position: -10px 0px; }

table.jqTransformTextarea-focus td#jqTransformTextarea-bl { background-position:0px -10px; }

table.jqTransformTextarea-focus td#jqTransformTextarea-bm { background-position:0px -10px; }

table.jqTransformTextarea-focus td#jqTransformTextarea-br { background-position:0px -10px; }

table.jqTransformTextarea .jqTransformSafariTextarea div { position: relative; overflow: hidden; border: 0px solid red; }

table.jqTransformTextarea .jqTransformSafariTextarea textarea { background: none; position: absolute; top:-10px; left:-10px; padding: 10px 10px 10px 10px; resize: none; }

/* ------------- 

* Radios
* ------------- */

.jqTransformRadioWrapper { float: left; display:block; margin:0px 4px; margin-top:13px; }

.jqTransformRadio { background: transparent url(../images/img/radio.gif) no-repeat center top; vertical-align: middle; height: 19px; width: 18px; display:block;/*display: -moz-inline-block;*/ border: none; }

/* ------------- 

* Checkboxes
* ------------- */

span.jqTransformCheckboxWrapper { display:block; float:left; margin:0px 4px; margin-top:13px; }

a.jqTransformCheckbox { background: transparent url(../images/img/checkbox.gif) no-repeat center top; vertical-align: middle; height: 19px; width: 18px; display:block;/*display: -moz-inline-block;*/ border: none; }

/* ------------- 

* Checked - Used for both Radio and Checkbox
* ------------- */

a.jqTransformChecked { background-position: center bottom; }

/* ------------- 

* Selects
* ------------- */

.jqTransformSelectWrapper { width: 45px; position:relative; height: 31px; background: url(../images/img/select_left.gif) no-repeat top left; float:left; border: none; }

.jqTransformSelectWrapper div span { font-size: 12px; float: none; position: absolute; white-space: nowrap; height: 31px; line-height: 15px; padding: 8px 0 0 7px; overflow: hidden; cursor:pointer;/*border: 1px solid #CCCCCC;*//* border-right: none;*/ border: none; }

.jqTransformSelectWrapper a.jqTransformSelectOpen { display: block; position: absolute; right: 0px; width: 31px; height: 31px; background: url(../images/img/select_right.gif) no-repeat center center; border: none; }

.jqTransformSelectWrapper ul { position: absolute; width: 43px; top: 30px; left: 0px; list-style: none; background-color: #FFF; border: solid 1px #CCC; display: none; margin: 0px; padding: 0px; height: 150px; overflow: auto; overflow-y: auto; z-index:10; }

.jqTransformSelectWrapper ul a { display: block; padding: 5px; text-decoration: none; color:#333; background-color: #FFF; font-size: 12px; }

.jqTransformSelectWrapper ul a.selected { background: #EDEDED; color: #333; }

.jqTransformSelectWrapper ul a:hover, .jqTransformSelectWrapper ul a.selected:hover { background:#3582c4; color: #fff; }

/* ------------- 

* Hidden - used to hide the original form elements
* ------------- */

.jqTransformHidden { display: none; }

.center { text-align: center; }



.gallery { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 20px; }

.gallery h2 { font-size: 2em; margin: 30px 0; font-weight: normal; text-align: center; text-transform: uppercase; }

.topbar { position: relative; padding: 20px 0; margin: 0 0 40px; }

.back { width: 40px; height: 40px; position: absolute; left: 50%; top: 50%; margin: -20px 0 0 -20px; border-radius: 50%; text-align: center; line-height: 38px; color: #999; background: #ddd; background: rgba(255,255,255,0.5); cursor: pointer; display: none; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.no-touch .back:hover { background: #fff; background: rgba(255,255,255,0.9); }

.tp-grid { list-style-type: none; position: relative; display: block; }

.tp-grid li { position: absolute; cursor: pointer; border: 10px solid #fff; box-shadow: 0 2px 3px rgba(0,0,0,0.2); display: none; overflow: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; }

.no-js .tp-grid li { position: relative; display: inline-block; }

.tp-grid li a { display: block; outline: none; border: none; }

.tp-grid li img { display: block; border: none; }

.tp-info, .tp-title { position: absolute; background: #fff; line-height: 20px; color: #333; top: 40%; width: 75%; padding: 10px; font-weight: 700; text-align: right; left: -100%; box-shadow: 1px 1px 1px rgba(0,0,0,0.1), 5px 0 5px -3px rgba(0,0,0,0.4), inset 0 0 5px rgba(0,0,0,0.04); }

.touch .tp-info { left: 0px; }

.no-touch .tp-info { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }

.no-touch .tp-grid li:hover .tp-info { -webkit-transition-delay: 150ms; -moz-transition-delay: 150ms; -o-transition-delay: 150ms; -ms-transition-delay: 150ms; transition-delay: 150ms; }

.no-touch .tp-open li:hover .tp-info { left: 0px; }

.tp-title { padding: 10px 35px 10px 10px; left: 0px; }

.tp-title span:nth-child(2) { color: #aaa; padding: 0 5px; background: #F7F7F7; right: 0px; height: 100%; line-height: 40px; top: 0px; position: absolute; display: block; }



@charset "utf-8"; /*文字コード指定*/

/* ----- css reset(各ブラウザで指定されているスタイルを初期化)と全体設定 ----- */

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, textarea, p, th, td, img { margin: 0; /*ボックス外側の余白(値1つは上下左右をまとめて指定)*/ padding: 0; /*ボックス内側の余白(値1つは上下左右をまとめて指定)*/ border: 0; /*境界線指定*/ }

body { line-height: 2; /*行の高さ指定(数値のみの場合はfont-sizeの倍数)*/ font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro"; /*フォントの種類指定(左から優先順位)*/ font-size: 75%; /* フォントサイズ指定(%はブラウザに設定した標準文字サイズ(通常16px)に対する値)*/ color: #333; /*文字色指定*/ }

ol, ul { list-style: none; /*リストマーカーの種類指定(noneはなし)*/ }

a { /*リンクの文字設定(マウスをのせる前)*/ color: #333; /*文字色指定*/ text-decoration: none; /*テキストの装飾指定(下線、上線など)(noneはなし)*/ border-bottom: 1px solid #333; /*境界線の一括指定(solidは1本線,線の太さ,線の色)*/ padding-bottom: 1px; /*ボックス内側下の余白*/ }

a:hover { /*リンクの文字設定(マウスをのせた時)*/ text-decoration: none; /*テキストの装飾指定(下線、上線など)(noneはなし)*/ border: none; /*境界線指定(noneはなし)*/ }

.color1 { color: #dc143c; /*文字色指定*/ }

/* ----- レイアウト ----- */

  1. container { /*container(入れ物、容器)の中に各要素(ボックス)を配置*/

width: 100%; /*幅指定(100%は画面横幅いっぱいに表示)*/ margin: auto; /*ボックス外側の余白(autoはボックス幅や隣接する他ボックス幅による自動余白割り当て)*/ background-color:transparent; /*背景色指定*/ }

  1. content {

width: 100%; /*幅指定(100%は画面横幅いっぱいに表示)*/ float: right; /*要素を左か右に寄せて配置(rightは右に寄せる)*/ margin: 20px 0; /*ボックス外側の余白(値2つは左から上下,左右の値)*/ margin-left: -120px; /*ボックス外側左の余白*/ 

       background-color:transparent;*/

}

  1. content_inner {

margin-left: 120px; /*ボックス外側左の余白*/ 

       background-color:transparent;*/


}

  1. leftside {

width: 120px; /*幅指定*/ position:fixed; /*ボックスの配置方法(fixedは固定配置)*/ height: 100%; /*領域の高さ指定(100%は縦いっぱいに表示)*/ margin: 0; /*ボックス外側の余白*/ padding: 0; /*ボックス内側の余白*/ background-color: #E6E6E6; /*背景色指定*/ }

/* ----- 画像を背景いっぱいに表示 ----- */

  1. bg {

position:fixed; /*ボックスの配置方法(fixedは固定配置)*/ top:-50%; /*上からの距離(positionで指定している場合に適用)*/ left:-50%; /*左からの距離(positionで指定している場合に適用)*/ width:200%; /*幅指定*/ height:200%; /*領域の高さ指定(100%は縦いっぱいに表示)*/ z-index:-1; /*ボックスの重なりの順序を指定*/ }

  1. bg img {

position:absolute; top:0; /*上からの距離(positionで指定している場合に適用)*/ left:0; /*左からの距離(positionで指定している場合に適用)*/ right:0; /*右からの距離(positionで指定している場合に適用)*/ bottom:0; /*下からの距離(positionで指定している場合に適用)*/ margin: auto; /*ボックス外側の余白(autoはボックス幅や隣接する他ボックス幅による自動余白割り当て)*/ min-width:50%; /*領域幅の最小値指定*/ min-height:50%; /*領域高さの最小値指定*/ }


/* ----- コンテンツ ----- */

.post { text-align: center; /*行の水平方向の揃え方(centerは中央揃え)*/

}

.post h2 { font-size: 2em; /*フォントサイズ指定(emはフォントの高さを１とした相対指定)*/ margin: 30px 0; /*ボックス外側の余白(値2つは左から上下,左右の値)*/ font-weight: normal; /*フォントの太さ指定(normalは標準)*/ text-transform: uppercase; /*大文字と小文字の変換を指定するプロパティ(uppercaseは全ての文字を大文字に変換)*/ }

.post ul { font-size: 1em; /*フォントサイズ指定(emはフォントの高さを１とした相対指定)*/ }

/* ----- テーブル設定 ----- */

.ta { width: 600px; /*幅指定*/ border-collapse: collapse; /*境界線の表示指定(collapseは重ねて表示)*/ margin: 0 auto; /*ボックス外側の余白(値2つは左から上下,左右の値(左右autoで中央配置))*/ }

.ta th, td { border: none; /*境界線の一括指定(noneはなし)*/ padding: 0 0 10px 10px; /*ボックス内側の余白(値4つは左から上,右,下,左の値)*/ color: #333; /*文字色指定*/ font-size: 1.5em; /*フォントサイズ指定(emはフォントの高さを１とした相対指定)*/ font-weight: normal; /*フォントの太さ指定(normalは標準)*/ text-align: left; /*行の水平方向の揃え方(leftは左寄せ)*/ }

/* ----- ページ左のメニュー設定 ----- */

  1. menu li a {

display: block; /*要素の表示形式指定(blockはブロックレベルで表示)*/ border: none; /*境界線指定(noneはなし)*/ }

  1. home {

min-height: 800px; /*領域高さの最小値指定*/ padding-top: 100px; /*ボックス内側上の余白*/ }

  1. news {

min-height: 800px; /*領域高さの最小値指定*/ padding-top: 50px; /*ボックス内側上の余白*/ }

  1. about {

min-height: 800px; /*領域高さの最小値指定*/ padding-top: 50px; /*ボックス内側上の余白*/ }

  1. works {

min-height: 800px; /*領域高さの最小値指定*/ padding-top: 50px; /*ボックス内側上の余白*/ margin: 50px; /*ボックス外側の余白*/ }

  1. contact {

min-height: 800px; /*領域高さの最小値指定*/ padding-top: 50px; /*ボックス内側上の余白*/ }



  1. column-one{display:none;width:0px;}


  1. footer{display:none;width:0px;}


.firstHeading{display:none;width:0px;}


  1. conterSub{display:none;width:0px;}



</style>

</head>

<body> 

 <img src="https://upload.wikimedia.org/wikipedia/commons/0/06/Toop.jpg" alt="トップページ画像"/>

     <noscript>

※このページはJavaScriptを使用しています。JavaScript設定を有効にしてご覧ください。

     </noscript>

<img src="https://upload.wikimedia.org/wikipedia/commons/0/02/Team_Hokudai%EF%BC%92.jpg" width="500" height="200" alt="サイト名" />

テンプレートのご利用について

  • このテンプレートはすべて無料でご利用いただける <a href="http://saetl.net/"> Saetl.net </a> から配布しています。
  • 著作権表示は必要ありません（テンプレートにも記載はありません）
  • 無料テンプレートでよくあるページ内の著作権表示は一切必要ありませんのでご自由にお使いください。
  • 詳しくは <a href="http://saetl.net/about.html"> 利用規約 </a> をご覧ください。
  • <a href="http://saetl.net/index.html#browser"> 対応ブラウザ </a> （動作確認済みブラウザ）
  • <a href="http://saetl.net/howtoall.html"> ご利用方法はこちら </a> からお願いします。

news

2013,xx,xx テキストテキストテキストテキスト
2013,xx,xx テキストテキストテキストテキスト
2013,xx,xx テキストテキストテキストテキスト
2013,xx,xx テキストテキストテキストテキスト
2013,xx,xx テキストテキストテキストテキスト

about

商号 テキストテキストテキスト
設立 20xx年（平成xx年）xx月xx日
所在地 〒xxx-xxxx　テキストテキストテキストテキストテキスト
Tel xxx-xxxx-xxxx    Fax xxx-xxxx-xxxx
代表取締役 テキスト
業務内容 テキスト、テキスト
取引金融機関 テキスト

contact

       <form action="./clipmail.cgi" method="post" enctype="multipart/form-data">
         <input type="hidden" name="need" value="お名前 email 会社名 メッセージ" />
         <input type="hidden" name="match" value="email email2" />
お名前 【必須】 <input type="text" name="お名前" size="35" />
お名前フリガナ <input type="text" name="お名前フリガナ" size="35" />
メールアドレス 【必須】 <input type="text" name="email" size="35" />
メールアドレス再度入力 【必須】 <input type="text" name="email2" size="35" />
会社名 【必須】 <input type="text" name="会社名" size="35" />
会社名フリガナ <input type="text" name="会社名フリガナ" size="35" />
ラジオボタン <input type="radio" name="ラジオボタン" value="ボタン1" /> 
               <label>ボタン1</label>
               <input type="radio" name="ラジオボタン" value="ボタン2" />
               <label>ボタン2</label>
               <input type="radio" name="ラジオボタン" value="ボタン3" />
               <label>ボタン3</label>
               <input type="radio" name="ラジオボタン" value="ボタン4" />
               <label>ボタン4</label>
               <input type="radio" name="ラジオボタン" value="ボタン5" />
<label>ボタン5</label>
チェックボックス <input type="checkbox" name="チェックボックス" value="チェック1" /> 
               <label>チェック1</label>
               <input type="checkbox" name="チェックボックス" value="チェック2" />
               <label>チェック2</label>
               <input type="checkbox" name="チェックボックス" value="チェック3" />
<label>チェック3</label>
セレクトボックス <select name="セレクトボックス"> 
                 <option value="A">A</option>
                 <option value="B">B</option>
                 <option value="C">C</option>
                 <option value="D">D</option>
</select>
お問合せ内容 【必須】 <textarea name="メッセージ" rows="7" cols="70"></textarea>
<input type="image" src="images/kakunin.png" onMouseover="this.src='images/kakunin2.png'" onMouseout="this.src='images/kakunin.png'" value="submit"> 
       </form>

※上記フォームを利用するには <a href="http://www.sophia-it.com/content/CGI" target="_blank"> CGI </a> などのプログラムが必要です。

<a href="http://cgi-design.net/" target="_blank"> CGI-design </a>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="js/jQuery.ScrollTo.js"></script> <script type="text/javascript" src="js/rollover2.js"></script> <script src="js/jquery.jqtransform.js" ></script> <script> $(function(){ $('form').jqTransform({imgPath:'images/img/'}); }); </script> <script type="text/javascript" src="js/jquery.stapel.js"></script> <script type="text/javascript"> $(function() {

var $grid = $( '#tp-grid' ), $name = $( '#name' ), $close = $( '#close' ),

$loader = $( '

Loading...

' ).insertBefore( $grid ),

stapel = $grid.stapel( { randomAngle : true, delay : 50, gutter : 70, pileAngles : 5, onLoad : function() { $loader.remove(); }, onBeforeOpen : function( pileName ) { $name.html( pileName ); }, onAfterOpen : function( pileName ) { $close.show(); } } );

$close.on( 'click', function() { $close.hide(); $name.empty(); stapel.closePile(); } );

} ); </script> </body> </html>

Retrieved from "https://openwetware.org/mediawiki/index.php?title=Biomod/2014/example&oldid=872503"