2013-07-01から1ヶ月間の記事一覧

H15/C15

課題

課題の回答です。 HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>liquid_layout_2</title> <link rel="stylesheet" href="css/common.css"> </head> <body> <div id="container"> <header> <div id="header_inner"> <h1><span>カスケーディング モーニング ニュース</span></h1> <div></div></div></header></div></body></html>

for文を使って、掛け算の表を作成

JS

for文を使って、掛け算の表を作りました。 9×9だけでなく、引数に入れた数値を元に作成します。 calc(row,line)でrowが横、lineが縦です。 以下スクリプトになります。 JavaScript window.onload = function(){ calc(18,18); } function calc(row,line){ var…

whileを使って、最大値 - 最小値の分繰り返させるスクリプト

JS

授業中のスクリプトを少し変えて見ました。 関数の引数に最小値と最大値を設定して、その差だけ繰り返します。以下のスクリプトはフォームでの年齢の選択で、限られた範囲のみ表示するスクリプトです。 以下コードになります HTML <form action="#" method="post"> <p id="slct_age">年齢 :</p> </form> JavaScript windo…

入力した月の季節を表示するスクリプト

JS

授業でのスクリプトを自分なりに書いてみました。 HTML <h1>月別に季節を判別</h1> <p>ボタンをクリックすると月を入力するウィンドウが表示されます。</p> <p><button id="btn">月別に季節を判別</button></p> JavaScript window.onload = function(){ distinctionMonth(); } function distinctionMonth(){ va…

可変グリッドレイアウトのスクリプト

JS

作れないだろうなと思って、やってみたんですけど、意外と出来てしまいました。画面がロードされた時、ウィンドウのリサイズ時にボックスが整列します。ウィンドウ幅に合わせ、カラム数が決まります。並び順は最初の列は、左から右と並びますが、２列目以降…

hoverによる画像置換（２）

JS

先ほどのスクリプトを少し変えて、サムネイルをマウスオーバーしたら、メインの画像が切り替わるスクリプトを授業中に作りました。以下コードになります。HTML <html lang="ja"> <head> <meta charset="utf-8"> <title>img_change02</title> <link rel="stylesheet" href="img_change02.css"> <script src="img_change02.js"></script> </head> <body> <div id="container"> <ul> </ul></div></body></html>

hoverによる画像置換

JS

いつも使ってるjavascriptによる画像置換スクリプトです。 すこし簡略化しています。 以下コードになります。JavaScript function changeImg(){ var images = document.getElementsByTagName('img'); for(var i = 0; images.length > i; i++){ var img = ima…

課題管理ページを改良

課題

アクセスした、７日以内の課題リストに「NEW」画像をつけるスクリプトを作ってみました。 以下コードになります。CSS .new a:after{ position: absolute; top: 0; left: 120%; content: url(../img/new.png); } マッチするリストにスクリプトで「new」class…

リキッドレイアウト

課題

課題の回答です http://yuto-m.sakura.ne.jp/admin/ ↑ こちらからサーバーにアップした課題が見れます。まずはコードです。HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>liquid-layout</title> <link rel="stylesheet" type="text/css" href="css/common.css"> </head> <body> <div id="container"> <header></header> </div></body></html>

さくらのレンタルサーバー借りました。

課題

早速レンタルサーバー借りました。ですので、課題提出用の管理ページも早速アップロードしました。 ロリポップと悩みましたが、安定しているということで、さくらインターネットにしました。課題提出用管理ページ

授業の応用　setTimeoutでbodyの背景色をランダムで変化させる

JS

まずはコードになります。 JavaScript window.onload = function(){ change(); } function change(){ function num(){return Math.floor(Math.random()*256)}; function opacity(){return Math.floor((Math.random()*10+1)) / 10}; var rgba = 'rgba('+num()…

授業の復習

JS

授業で出た、スクリプトをすこしだけ工夫してみました 関数の引数に、入力した値段と消費税（％）で計算し、コンソールに表示します。JavaScript window.onload = function(){ var price = parseInt(prompt('金額を入力してください')); var t = parseInt(pr…

課題提出用の管理ページのスクリプトを変えました。

課題

よくよく考えたら、ADOBEのカテゴリがあるのですが、中に入るリストのカテゴリーもadobeだと意味がないような感じに思えたので、jsonでcategoryキーの値のadobeを削除し、ai、ps、flを追加しました。 これを、jQuery側でADOBEにカテゴライズしてもらいます。…

課題提出用の管理ページが出来ました

課題

課題提出用の管理ページを作りました。 １から作る代わりに自由に作っていいということだったので、自由に作りました。 まずは試しに管理ページのgifアニメを作ってみたので貼っておきます。 以下コードになります。HTML <html lang="ja"> <head> <meta charset="utf-8"> <title>Yuto Mori | Administration Pag</title></meta></head></html>…

三項演算子

JS

うる覚えだったのでメモ書きです。 if (a > b){ a = b; }else{ a = c; } この条件式は省略することができ、以下のようになります。 (a > b)? a = b: a = c; a = (a > b)? b: c; そして、三項演算子は式なので、以下のようにもできます。 var sex = ['男','女…

復習(6)フォーム

HTML

課題の回答です。 Q27HTML <h1>お問い合わせフォーム</h1> <form action="#" method="post"> <p>名前 : <input type="text" name="name" value="お名前" size="10" maxlength="5"></p> <p>内容 : <textarea name="subject" cols="40" rows="5">お問い合わせ内容</textarea></p> <p><input type="submit" value="送信"></p> </form> Q28HTML <h1>ラジオボタン</h1>

あめやえいたろうのサイトのレイアウトを作ってみた

HTML CSS

CSSでのレイアウト作りには慣れが必要だと思ったので、センスいいなーと思ったサイトの一つである、あめやえいたろうのサイトのレイアウトを練習台に作ってみました。本家のデザイン レイアウトだけ真似て作ったもの 以下、コードになります。HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>copy</title> <link rel="stylesheet" href="css/style.css" media="all"> </head></html>…

Jimdo始めました

ブログ

Jimdoにて、センスいいなーと思ったサイトを紹介してます。 http://hop-head.jimdo.com/

H13/C13

課題

課題の回答です。 positionを使った無理やりなレイアウトになってしまった… 良い組み方が思いつかなかったです。。 HTML <body> <div id="container"> <div id="left"> <h1><span>Patisserie camellia</span></h1> <nav> <ul> <li><a href="#" id="info"><span>Information</span></a></li> <li><a href="#" id="menu"><span>Menu</span></a></li> <li></li></ul></nav></div></div></body>

H12/C12

課題

課題の回答です。 HTML <body> <div id="container"> <div id="page"> <header> <h1><span class="hide_text">サンプルスタイルシートカンパニー</span></h1> <nav id="header_innner"> <ul> <li><a href="#" id="top"><span>トップページ</span></a></li> <li><a href="#" id="solution"><span>ソリューション</span></a></li> <li><a href="#" id="achevement">…</a></li></ul></nav></header></div></div></body>

H06/C06

課題

課題の回答です。 HTML <body> <div id="container"> <header id="page_head"><h1><span>建築散歩</span></h1></header> <div id="wrapper"> <div id="content"> <header> <h2>フンデルトヴァッサー・ハウス</h2> <p>ウィーンの市営住宅はこんなに元気だ！</p> </header> <div id="content_body"> <p><img src="img/ph01.jpg" width="180" height="125">旅行中に、「フンデルトヴァッサー…</p></div></div></div></div></body>

H07/C07

課題

課題の回答です。 HTML <body> <div id="container"> <div id="content"> <h1>薬玉文様（くすだまもんよう）</h1> <p>薬玉とは、薬・香料を玉にして錦の袋に入れ、造花や蓬・菖蒲などを飾り、五色の糸を長く垂らしたもの。古代中国で端午の節句に薬玉を柱などに掛け、邪気払いや長寿を祈願する風習が、平安時代に日本</p></div></div></body>…

H08/C08

課題

課題の回答です。 HTML <body> <div id="container"> <header> <div class="image"> <img src="img/p_mystery.jpg" width="195" height="102"> </div> <div class="head_main"> <h1>今月の本棚</h1> <h2>推理小説</h2> </div> <nav> <ul> <li><a href="#">ホーム</a></li> <li><a href="#">バックナンバー</a></li> </ul> </nav> </header> </div></body>

H09/C09

課題

課題の回答です。 HTML body> <div id="container"> <header><h1>Computer Technology Groups</h1></header> <nav> <ul> <li><a href="#">エコロジー</a></li> <li><a href="#">コンピューター</a></li> <li><a href="#">モバイル</a></li> <li><a href="#">ショッピング</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </nav> <div id="content"> <h2><…</h2></div></div>

H10/C10

課題

課題の回答です。 HTML body> <div id="container"> <header><h1>Typograpy.<span>71</span></h1></header> <nav> <ul> <li><a href="#">HOME</a></li> <li><a href="#">BLOG</a></li> <li><a href="#">PHOTOGRAPH</a></li> <li><a href="#">GUESTBOOK</a></li> <li><a href="#">CONTACT</a></li> </ul> </nav> <div id="content"> …</div></div>

H11/C11

課題

課題の回答です。 HTML <body> <div id="container"> <header> <h1>Cafe de la plante</h1> <p>サブタイトルサブタイトルサブタイトル</p> </header> <div id="wrapper"> <nav> <ul> <li><a href="#">トップページ</a></li> <li><a href="#">カフェについて</a></li> <li><a href="#">本日のおすすめ</a></li> <li><a href="#">ブログ</a></li> <li><a href="#">お問い合わせ</a></li></ul></nav></div></div></body>

復習(5)float

課題

課題の回答です。 Q26 HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <header> <h1>Homepage Title</h1> <p>サブタイトルサブタイトルサブタイトル</p> </header> <div id="wrapper"> <div id="content"> <h2>コンテンツのタイトル</h2>…</div></div></div></body></html>

復習(3)画像と背景画像

課題

課題の回答です。 Q16HTML <div> <h1>Background Design</h1> <p>Sharing your disital photos with family and friends is such an easy thing todo these days</p> </div> CSS div{ width: 400px; height: 252px; background-color: #333333; background-image: url(image.gif); backg…

復習(4)リスト

課題

課題の回答です。 reset cssは省略 Q21HTML <li id="new"><a href="#">新着情報</a></li> <li id="info"><a href="#">お知らせ</a></li> <li id="item"><a href="#">製品情報</a></li> <li id="shop"><a href="#">店舗案内</a></li> <li id="company"><a href="#">会社案内</a></li> </ul> CSS ul{ width: 100px; } li{ height: 78px; padding: 1px; } #new…

復習(5)float

課題

課題の回答です。 Q24HTML <div> <p><img src="" width="200" height="150px">段落１のテキストです。段落１のテキストです。段落１のテキストです。</p> <p>段落２のテキストです。段落２のテキストです。段落２のテキストです。段落２のテキストです。段落２のテキストです。段落２のテキストです。段落２のテキス</p></div>…