2013-01-01から1年間の記事一覧

Fire Worksでスライスで画像を切り出す

ページパレットに全てのページのカンプを読み込む 前頁共通部分の画像をスライスで切る スライス名を付ける（それがファイル名になる） 最適化パレットで拡張子と圧縮率や色数を設定 スライスを切ったオブジェクトの上で右クリック→選択したスライスの書き出…

複数ページのCSS管理方法

HTMLとCSS

共通やresetはcommon.cssに記述 style.cssに各ページのidをbodyにつけてページ毎のCSSを記述。 html側： CSS側：body#ページ名 { }※DW上でフォルダ移動する際の注意。 テストサーバー上ではアドレスの更新をしてくれないので、ローカルビューにしてから行う。

セレクタの色々な記述方法

jQuery

ID セレクタ <h1 id="sample">この文字は赤になります</h1> <script> $(function(){ $('#sample').css('color','red'); }); </script> CLASSセレクタ <ul> <li class="man">Paul</li> <li class="man">Billy</li> <li class="woman">Alice</li> <li class="man">Taro</li> <li class="woman">Hanako</li> </ul> <script> $(function(){ $('#cat…

HTML 5の独自タグを使用

HTMLとCSS

<header> ヘッダー <nav> ナビゲーション <article> 本文 <aside> 本文の解説、補足など <footer> フッター <section> 章HTML 5は、正しい文法で記述しましょうとルールを変更したもの。 HTML4.0 XHTMLでは、見出しは１〜６まで順番に書かないといけなかった。 書く数字に意味があるため。 h1 大見出し h2 </section></footer></aside></article></nav></header>…

jQuery導入

jQuery

40分で覚える！jQuery速習講座 //ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js最新バージョンが良いとは限らないので、現段階ではver.1.9.1を使う。 $(document).ready.(function(){ })正確に書くと上記だけど、下記のように略してもいい。 $(…

switch文

JavaScript

<html lang="ja"> <head> <meta charset="utf-8"> <title>switch文の特徴</title> <body> <script> var color = '赤'; switch(color){ case '青': case '緑': console.log('進む'); break; case '黄': console.log('急いで進む'); break; case '赤': console.log('止まる'); break; default: console.log('信号機の故障') } </body></meta></head></html>

for文

JavaScript

指定した回数だけ処理を繰り返す カウンタ変数「i」の初期値（「i」は、indexの意） 処理を１回実行するたびに、変数「i」の値をどのように変更するか <html lang="ja"> <head> <meta charset="UTF-8"> <title>和暦西暦for文</title> <style> table { border-collapse:collapse; } th, td { width: 100px; border: 1px solid; p</style></meta></head></html>…

while文

JavaScript

反復処理。falseになるまで反復する。 <html lang="ja"> <head> <meta charset="UTF-8"> <title>無題和暦（平成）と西暦を並べて表示</title> <style> table { border-collapse:collapse; } th, td { width: 100px; border: 1px solid; padding: 5px; text-align: center; } </style> </head> <body> <table> <tr><th>和暦（平成）</th><th>西暦</th></tr></table></body></html>

H13・C13

課題

<html lang="ja"> <head> <meta charset="UTF-8"> <title>H13-C13</title> <link rel="stylesheet" href="css/style.css" media="all"> </head> <body> <div id="container"> <div id="header"> <h1><span>Patisserie camellia</span></h1> </div> <div id="nav"> <ul> <li><a href="#"></a></li></ul></div></div></body></html>

JavaScriptで画像置換

JavaScript

imgタグに直接書き込む方法 <html lang="ja"> <head> <meta charset="UTF-8"> <title>JavaScriptでの画像置換</title> <link rel="stylesheet" href="css/style.css" media="all"> </head> <body> <div id="nav"> <ul> <li><a href="#"></a></li></ul></div></body></html>

H12・C12

課題

<html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/style.css" media="all"> <title>C13</title> </head> <body> <div id="container"> <div id="header"> <h1>サンプルスタイルシートカンパニー</h1> </div> <div id="nav"> <ul> <li id="top"><a href="#"><span>トップページ</span></a></li></ul></div></div></body></html>

fanction

JavaScript

//関数の定義 function関数名(引数){命令} //関数の呼び出し 関数名(引数); <html lang="ja"> <head> <meta charset="utf-8"> <title>標準体重</title> <body> <script> function sWeight(man, height){ var weight; //計算を行う if(man){ weight = (height-80)*0.7; }else{ weight = (height-70)*0.6; } return weight; //値を返して</body></meta></head></html>…

テスト

JavaScript

<head> <meta charset="UTF-8"> <title>テスト１</title> <style> p img { cursor: pointer; } </style> </head> <body> <h2>【J02】</h2> <p> <img src="img/01.jpg" alt="タワーブリッジの写真" onClick="alert('タワーブリッジの写真です');"> </p> <h2>【J03】</h2> <p> </p></body>

警告ダイアログに表示

JavaScript

<script> var height; var wieght; var man; man = confirm('あなたは男性ですか？'); height = prompt('身長を入力してください','半角英数'); height = parseInt( height ); if( man ) { weight = ( height - 80 ) * 0.7; } else { weight = ( height - 70 ) * 0.6…

ブラウザに表示（出力）

JavaScript

<head> <meta charset="UTF-8"> <title>Javascriptの勉強1</title> <script src="sample.js"></script> </head> <body> <script> a='あいうえお'; num=parseInt(a); console.log(num);//NaNになるよう矛盾したもの </script> <script> a = typeof ('123'); console.log(a); //123は文字列だよという指示 </script> <script> var a = 1…</body>

H11・C11

課題

<body> <div id="container"> <div id="header"> <h1 lang="en">Caf&#233; de la plante</h1> <p class="subTitle">サブタイトルサブタイトルサブタイトル</p> </div> <div id="wrapper"> <div id="nav"> <ul> <li><a href="#">トップページ</a></li> <li><a href="#">カフェについて</a></li> <li><a href="#">本日のおすすめ</a></li> <li></li></ul></div></div></div></body>

H10・C10

課題

<body> <div id="container"> <div id="header"> <h1>Typograpy.<span>71</span></h1> </div> <div id="nav"> <ul> <li class="current"><a href="#">HOME</a></li> <li><a href="#">BLOG</a></li> <li><a href="#">PHTOGRAPH</a></li> <li><a href="#">GUESTBOOK</a></li> <li><a href="#">CONTACT</a></li></ul></div></div></body>

H09・C09

課題

<body> <div id="container"> <div id="header"> <h1>Computer Technology Groups</h1> </div> <div id="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> </div></div></body>

H08・C08

課題

<body> <div id="container"> <div id="header"> <h1><span>今月の本棚</span><br> 推理小説</h1> <div id="headerInner"> <ul> <li><a href="#">ホーム</a></li> <li><a href="#">バックナンバー</a></li> </ul> </div> </div> <div id="content"> <div id="contentInner"> <h2>『鋼鉄都市』</h2> <ul> <li>（1953・米）</li> <li>アイザック・…</li></ul></div></div></div></body>

GIFアニメ

Illustratorから書き出しでpsd保存 レイヤーフォルダーが分かれてた場合、統合 アニメーションパットの右上から、レイヤーからフレームを作成 web用に保存からgifで保存

H06 C06

課題

<html lang="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/style.css" media="all"> <title>C06</title> </head> <body> <div id="container"> <div id="header"> <h1>建築散歩</h1> </div> <div id="content"> <h2>フンデルトヴァッサー・ハウス</h2> <h3>ウィーンの市営住宅はこんなに元気だ！</h3> </div></div></body></html>

フォーム

HTMLとCSS

問い合わせフォーム <form action="#" method="post" name="form1"> <p>名前：<input type="text" name="name" size="20" mexlemgs="10"></p> <p>内容：<textarea name="subumit" rows="5" cols="30">問い合わせ内容</textarea></p> <p><input type="submit" value="送信"></p> </form> ※「内容：」とフォームの囲みはベースラインでそろう。（インライン要素だから） Googleドライブからもフォームが作…

positionを使ったレイアウト

relative（相対的） abusolute（絶対的）relativeで基準点を作り、それに対してabusoluteと値で位置指定する。 #wrapper{ width: 800px; height: 500px; position: relative; } #content{ width: 600px; height:500px; position: abusolute; right: 0; top: …

CSS Sprite（縦移動）

HTMLとCSS

横並びのナビボタンをマウスオーバーで切り替える方法。 #nav ul{ width:800px; overflow: hidden; } #nav li{ float: left; } #nav li a{ width: 160px; height:60px; display: block; background: url(../img/btn.jpg) no-repeat 0 0; } #nav li#home a:li…

横並びのナビ

HTMLとCSS

li { float:left; } ul { overfloe:lhidden; } この二つはセット。 ulはliのwrapperみたいなものと考えればいいのかな？ borderを付ける際の注意 liにboederを付けるとborderの線幅分太るので、その分ulも太らせないといけない。 li aにborderを付ければ、li…

Q25

課題

<body> <div id="container"> <div id="header"> <h1>Homepage Title</h1> <h2>サブタイトルサブタイトルサブタイトル </h2> </div> <div id="wrapper"> <div id="content"> <h3>コンテンツのタイトル</h3> <p>コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテン</p></div></div></div></body>…

Q23

課題

ul { margin: 20px 0 0 20px; width: 200px; height: auto; } li { font-size: 18px; font-weight: bold; margin-bottom: 10px; width: auto; height: auto; } li a { color: dodgerblue; padding: 5px 0 4px 10px; display: block; border: 3px solid dodge…

Q22

課題

ul { margin: 20px 0 0 20px; width: 200px; height: auto; } li { font-size: 18px; font-weight: bold; margin-bottom: 10px; width: auto; height: auto; background: url(../img/arrow.gif) no-repeat 0 16px; } li a { color: dodgerblue; padding: 5px…

Q21

課題

《例A》 ul { margin: 20px 0 0 20px; width: 150px; height: auto; } li { font-size: 20px; font-weight: bold; width: 130px; height: auto; text-align: center; } li a { padding: 25px 0; display: block; } li#new a:link, li#new a:visited { backgr…

Q15

課題

<body> <p id="sectionA">複数行の文章が一つのかたまりとして表示されている場合、行と行の間隔を「行間」と見なします。行間が狭いとたくさんの情報量を詰め込むことができますが、読みづらくなる場合があります。逆に行間を広くすると余白が確保されてゆったりとしたレイアウトに</p></body>…