2015-04-01から1ヶ月間の記事一覧
変数名の付け方のルール 変数名に使用できる文字は、基本的に半角アルファベット、半角数字、アンダースコア(_)です。 さらに、 ・最初の1文字目には数字を使ってはいけない ・変数名に予約語を使用しない があります。 予約語 予約語で登録されている文字列…
input type= で様々なフォームの構成部分を作成することが出来ます。 属性効果見た目 input type="text"テキスト入力 input type="password"パスワード入力 input type="file"ファイル名入力 input type="checkbox"チェックボックス input type="radio"ラジ…
<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>
算術演算子 演算子働き例結果 +足す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文 変数の初期値； while（ループ条件；…
position: abusolute; position: abusolute;が設定された要素は通常の配置として扱われるのではなく、「基準ボックス」というものを基点として自由に配置することが出来ます。 ①絶対配置したい要素にposition: absolute;を設定する #content { width: 100px;…
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 枠や画像に影を付けることが出来ます。 box-shadow: A B C D 影の色; A = 水平方向の距離 B = 垂直方向の距離 C = ぼかし距離 D = 広がり距離 text-shadow 文字にも影を付けることが出来ます。 text-shadow: E F G 影の色; E = 水平方向の距離 F …
基本的な流れは一緒なのですが、知っておきたいことを少しだけ書いておこう。 ・レイヤー効果の境界線の位置は「内側」に設定する。 こうすることで１ｐｘのずれが無くなります。 ・Shift + 十字キーで１０ｐｘ分動かすことが出来ます。 細かい移動は十字キ…
JavaScriptの基本 ①初期値 ②演算（計算） ③出力（可視化） この順番に書いていく。 出力について alert・document.write・console.logの3種類あります。 alertはブラウザの上に出る警告みたいなやつに表示されます。 document.writeはブラウザ上に表示されま…
ボタンの真ん中に文字を持ってくる 「インフォメーション」を水色の枠の中に持っていく。 まずは入れたいところに長方形ツールで枠をとる 水平方向左に整列させた後に、水平方向中央に分布させると このように真ん中に来ます。 後は黒い枠を消して十字キーで…
ナビゲーションの復習 ・li要素の横並びはfloatを使う。 ・floatを使ったらoverflow:hiddenを指定する。 ナビゲーションの文字を隠す ・右にずらす white-space: nowrap; text-indent: 100%; overflow: hidden; ・左にずらす text-indent: -999em; ・そのほ…
background: url(~~) no-repeat left top; left = x軸 top = y軸 画像がどれくらい動いたかを入れる。 左上が画像の起点となるので、基本的には画像は左側に動くので「ー」になることが多い。
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は青色が作りやすく、補色の黄色や白が作りにくい。 そのため、寒色系は自動補正で上手くい…
縦リンクと２カラムの復習でした。 出来なかったとこ ・display: block; をどこに入れれば良いかわからなかった。
HTMLでのルール ・<strong>と<h1>は一緒に使ってはいけない。 すでに<h1>は強調タグなので<strong>はいらない。 ・<img src="">で直リンクは禁止。 http://~~はネットの住所扱いなので、勝手に人の住所を使ってはいけない。 １６進数 普段の生活で使っているのは１０進数であり、９の次に０へ戻り</strong></h1></h1></strong>…
ポイント ・liではなくてli a にborder指定をする。 ・line-height や text-alignは liに指定する。 ・ul にはレイアウト幅を入れる。 ・floatには必ずwidthを指定する。 ・display: block; で幅全体をクリック出来るようにする。
３種類の文字の隠し方 HTMLには文字を入れておきたいがレイアウト的には邪魔なので消しておきたい時に、背景と文字色を同色にして見えないようにするのは検索エンジンはマイナス評価をします。 ではどうすれば良いのでしょうか。 ・visibility: hidden; レイ…
<dt>と<dd>を横並びにする 文字サイズを１６ｐｘ、幅を３００ｐｘとして何もいじらないと こうなります。 dt要素にfloat: left; と clear: left; の両方を指定すると ddがdtと横並びになります。 dtの下に文字が来てほしくないって場合は、margin-leftでddの文字分だ</dd></dt>…
