読者です 読者をやめる 読者になる 読者になる

return false

$(function(){ $('a').click(function(){ $('img').attr('src','book.jpg').attr('alt','本'); }); });<a href="book.jpg">画像を変更する</a> <p><img src="pen.jpg" alt="ペン"></p>a要素をクリックするとclickイベントが発生して画像が変更されるはずですが、 その後にブラウザはhrefに設定したリンク先へ飛んでしまい…

nth-childとnth-of-typeの違い

nth-childのscript部分 $(function(){ $('p:nth-child(even)').css('color','#00F'); });p要素の偶数の文字を青色に変える html部分 <h1>勉強の科目</h1> <h2>文系</h2> <p>古典</p> <p>日本史</p> <p>英語</p> <h2>理系</h2> <p>物理</p> <p>数学</p> <p>科学</p> 結果 となります nth-of-typeの場合 $(function(){ $('p:nth-of-ty…

JavaScriptの予約語

変数名の付け方のルール 変数名に使用できる文字は、基本的に半角アルファベット、半角数字、アンダースコア(_)です。 さらに、 ・最初の1文字目には数字を使ってはいけない ・変数名に予約語を使用しない があります。 予約語 予約語で登録されている文字列…

input type

input type= で様々なフォームの構成部分を作成することが出来ます。 属性効果見た目 input type="text"テキスト入力 input type="password"パスワード入力 input type="file"ファイル名入力 input type="checkbox"チェックボックス input type="radio"ラジ…

JavaScriptによる画像置換

<html lang="ja"> <head> <meta charset="utf-8"> <title>JavaScriptによる画像置換</title> <style> html,body,div,img { margin: 0; padding: 0; line-height: 1.0; } .imgBox { width: 600px; margin: 50px auto; } .thumnail { width: 610px; text-align: center; } .thumnail img { margin-right: 10px; } .m…</meta></head></html>

JavaScriptの演算子

算術演算子 演算子働き例結果 +足すa = 5 + 5;10 -引くa = 5 - 5;0 *掛けるa = 5 * 5;25 /割るa = 5 / 5;1 %余りa = 5 % 5;0 複合代入演算子 演算子働き例結果 +=足して代入a = 5; a += 5;10 -=引いて代入a = 5; a -= 5;0 *=掛けて代入a = 5; a *= 5;25 /=割…

while文 for文

while文とfor文の違い 同じ繰り返しの意味で使われるwhileとforですが一体何が違うのでしょうか。 while文は、ループする回数が決まってない場合に使用されます。 当然、for文は指定した回数だけループします。 while文 変数の初期値; while(ループ条件;…

position レイアウト

position: abusolute; position: abusolute;が設定された要素は通常の配置として扱われるのではなく、「基準ボックス」というものを基点として自由に配置することが出来ます。 ①絶対配置したい要素にposition: absolute;を設定する #content { width: 100px;…

ボタンをクリックしてJavaScriptを実行する

Button onclick <script> function OnButtonClick() { //実行するJavaScript alert('Hello'); } </script> <body> <p><button onclick ="OnButtonClick()">計算する</button></p>すると function OnButtonClick() { //実行するJavaScript alert('Hello'); } 計算するこのボタンのようになります。</body>

リキッドレイアウトの作成

作成の際に使用したCSS @charset "utf-8"; /* reset */ html,body,div,h1,h2,p,ul,li { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } ul { list-style: none; } /* body */ body { backgroun…

box-shadow text-shadow

box-shadow 枠や画像に影を付けることが出来ます。 box-shadow: A B C D 影の色; A = 水平方向の距離 B = 垂直方向の距離 C = ぼかし距離 D = 広がり距離 text-shadow 文字にも影を付けることが出来ます。 text-shadow: E F G 影の色; E = 水平方向の距離 F …

Photoshopでナビゲーションのボタン

基本的な流れは一緒なのですが、知っておきたいことを少しだけ書いておこう。 ・レイヤー効果の境界線の位置は「内側」に設定する。 こうすることで1pxのずれが無くなります。 ・Shift + 十字キーで10px分動かすことが出来ます。 細かい移動は十字キ…

JavaScript

JavaScriptの基本 ①初期値 ②演算(計算) ③出力(可視化) この順番に書いていく。 出力について alert・document.write・console.logの3種類あります。 alertはブラウザの上に出る警告みたいなやつに表示されます。 document.writeはブラウザ上に表示されま…

Illustrator ボタンを作る

ボタンの真ん中に文字を持ってくる 「インフォメーション」を水色の枠の中に持っていく。 まずは入れたいところに長方形ツールで枠をとる 水平方向左に整列させた後に、水平方向中央に分布させると このように真ん中に来ます。 後は黒い枠を消して十字キーで…

ナビゲーション

ナビゲーションの復習 ・li要素の横並びはfloatを使う。 ・floatを使ったらoverflow:hiddenを指定する。 ナビゲーションの文字を隠す ・右にずらす white-space: nowrap; text-indent: 100%; overflow: hidden; ・左にずらす text-indent: -999em; ・そのほ…

background: url

background: url(~~) no-repeat left top; left = x軸 top = y軸 画像がどれくらい動いたかを入れる。 左上が画像の起点となるので、基本的には画像は左側に動くので「ー」になることが多い。

hover時のレイアウト崩れ

hoverの時にborder-bottomをすると liの下に線が付いてしまいレイアウトが崩れてしまいます。 liの中に線を入れるとレイアウトが崩れません その時に必要なのが、line-heightとheightです。 #nav li { height: 50px;} #nav li a { line-height: 47px;} #nav …

塗りつぶしなど

Photoshopで学んだ便利なこと 塗りつぶし 描画色(黒)で塗りつぶしたい時には、 Alt+Backspace 背景色(白)で塗りつぶしたい時には、 Ctrl+Backspace 自動補正 PCは青色が作りやすく、補色の黄色や白が作りにくい。 そのため、寒色系は自動補正で上手くい…

縦リンク+2カラム

縦リンクと2カラムの復習でした。 出来なかったとこ ・display: block; をどこに入れれば良いかわからなかった。

ルール

HTMLでのルール ・<strong>と<h1>は一緒に使ってはいけない。 すでに<h1>は強調タグなので<strong>はいらない。 ・<img src="">で直リンクは禁止。 http://~~はネットの住所扱いなので、勝手に人の住所を使ってはいけない。 16進数 普段の生活で使っているのは10進数であり、9の次に0へ戻り</strong></h1></h1></strong>…

横並びのリスト

ポイント ・liではなくてli a にborder指定をする。 ・line-height や text-alignは liに指定する。 ・ul にはレイアウト幅を入れる。 ・floatには必ずwidthを指定する。 ・display: block; で幅全体をクリック出来るようにする。

文字を隠す

3種類の文字の隠し方 HTMLには文字を入れておきたいがレイアウト的には邪魔なので消しておきたい時に、背景と文字色を同色にして見えないようにするのは検索エンジンはマイナス評価をします。 ではどうすれば良いのでしょうか。 ・visibility: hidden; レイ…

<dt>と<dd>を横並びにする

<dt>と<dd>を横並びにする 文字サイズを16px、幅を300pxとして何もいじらないと こうなります。 dt要素にfloat: left; と clear: left; の両方を指定すると ddがdtと横並びになります。 dtの下に文字が来てほしくないって場合は、margin-leftでddの文字分だ</dd></dt>…

span

webデザインの勉強 のように部分的に色や大きさなどを変えたいときには HTML <p>web<span>デザイン</span>の勉強</p> CSS p span { color: #F00; } となります。 いじりたい部分を<span></span>で囲む!

2カラム

今日は軽く触れただけなので予習みたいな感じで float:~とdisplay:inline; どちらも横並びにする際に使うことが出来ます。 何が違うの? →inlineを使うと各カラムがインライン要素となるため、marginやpaddingが使えなくなる。(整える方法はある) 優先順位…

CSS

<div id>と<div class> 復習をしているときにhtmlで<div id>の部分を<div class>に変えてやっていたらCSSに入力したことが何も反映されなくなってしまった。 どうしてかと思って調べているうちに、どうやら<div id="~~">とした場合はCSSでは#~~とするらしく、 <div class="~~">とした場合は .~~としなければならない。 CSSのreset</div></div></div></div></div></div>…

復習

土日は基本的に復習したことを書くので同じことを書くこともあります。 HTML 枠組み 成績 名前2000年2001年2002年 retail50点100点30点 見ないでも上手く作れた! HTML リンク webデザインを勉強するのです|きつね target="_blank"とするとサイトに移動する…

1カラムレイアウトの練習で学んだこと

text-indent 2枚目の画像の1行目が1文字左側にずれました。 text-indent : -1em; を使うことにより1行目を1文字分左にずらしています。 text-indent: 1em; だと右側に1文字分ずれます。 画像の横並び <p class="center"><img src="~~" alt="~~"><img src="--" alt="--"></p> とやると真ん中に画像が2つ横並びになります。

CSSの疑似クラス

疑似クラスの種類は6種類あるのだが本日学んだのは4種類 link(未訪問) visited(訪問済み) hover(カーソルがリンクに重なったとき) active(リンクに対してアクティブな瞬間) これらには記述する順番があります。link→visited→hover→activeの順番です。 この4…