position指定のおさらい。 ！divで四角を作った場合、IE対策としてwidthだけでなくheightもきちんと指定すること relative 指定する要素が本来ある場所からx軸、y軸方面にいかに動かすかを指定する。現在の場所に対しての指定なので直感的に分かりやすいかも…

Webサイト制作も後半戦。 コード打ちながら、こんな事忘れてる…ってのがふたつあったので復習メモ。 CSS sprites position指定の際の注意 positionはpxで指定する場合、left(x軸) top(y軸) の順番に書くこと border指定 border: px color form の順番！

背景画像の指定 1600px×900pxの切り抜き画像を作成し、PNGで保存しておく。 PNG画像に圧縮をかけて少しでもファイルサイズを軽くしておく。 スタイルシートの指定をする。 body{ background-image: url(xxx.png); /* 常に転地左右の中央に表示 */ background…

１、％指定 container{ top: 50%; left: 50%; margin-top: -○○px; margin-left: -○○px; } top50％指定でcontainerの左の角がブラウザの上下のど真ん中に表示されるため、 その後containerのheightの半分のpx数をmargin-topでマイナス指定する事で 上下のど真…

inner.HTML id名の付いたタグのテキストを書き換える 書き換える文字列にHTMLタグを含める事ができる document.getElementById( ‘id名’ ).innerHTML = ‘書き換えテキスト’ ; 変数にしても指定できる var a = document.getElementById( ‘id名’ ); a.innerHTML…

JavaScriptによる画像置換 カーソルを当てるとサムネイルがモノクロからカラーに変化し、かつ、カーソル上の画像が大きく表示されるような指示をする。 画像の準備 大画面用の５枚、サムネイル用のモノクロ／カラー各５枚の計15枚をPhotoshopを使って用意し…

JavaScriptによる画像置換 onMouseOver=” this.src= ’img/***.jpg’ ” onMouseOut=” this.src= ’img/***.jpg’ ” <script>タグ無しでHTMLに直接書き込むJavaScriptのタグ イベント属性の値に関数名を指定し、マウスが指定した要素に触った瞬間／離れた瞬間に関数が実行…

/* reset */ html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre,address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset {margin: 0;padding: 0;line-height: 1.0;font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;}table …

架空の企業サイトを作ってみよう。制限時間は50分×５。 サイト制作時における指定 全体は、#conatiner幅「980px」 ヘッダー情報とフッター情報の見栄えは、ブラウザ幅全体を利用する 横幅「140px」高さは「50px」ピクセルのナビゲーションボタンを7個作成 「…

画像の扱い 意味のある画像：HTMLに <img> で指定、altを記述せねばならない 意味のない画像：CSSに {background} として指定 HTMLに<img>指定をする場合 altに記述する内容は？ …そもそものaltの役割とは、 画像を表示しないブラウザの場合、画像の代わりにこのテキス…

Imgはインライン要素 文中に画像を置くと、画像はベースライン上に配置され、ボトムとベースラインに空白ができる。 そのため、レイアウトを適切に行う事を目的として、画像をベースラインでなくボトムラインに置くよう指示する。 img {vertical-aline: bott…

Illustrator パスファインダーで型抜きする こんな形を作りたいとき 角丸で各要素を描き、斜めの角丸の余分な箇所を四角形で囲む 四角形と斜めの角丸のみを選択する [パスファインダー]の[形状モード]の[前面オブジェクトで型抜き]を選択すると 前面オブジェ…

CSS paddingの大きさ 文字に対して1.5文字分のサイズが妥当 子孫セレクタ div内のp全てに命令できる div p {******} リストのインデント li {text-indent: -1em;} 箇条書きの・の下、2行目を1字下げることができる トップ画像を表示させる {background: #***…

CSS 検索エンジンは読んで200行 スタイルシートを外部化しなければhead部分に大量の記述があった場合、検索エンジンはbody部分まで読み取ってくれない。そのためスタイルシートは外部化することでbody部分のコンテントをできるだけHTMLの上部に配置しSEO効果…

Illustrator 楕円の上半分を消す ダイレクト選択ツールで楕円の上部のアンカーをクリックしてBackSpace 円を二つに分割する 円を描きそれを二分する直線／曲線を一本引く（円から両端をはみ出すように描く） →円と線を選択する→[ウィンドウ]→[パスファインダ…

Photoshop 今日のショートカットキー Ctrl＋1：画像の元サイズ（100％）表示 Ctrl＋0：画面いっぱいに表示 背景のサイズを変える（フレームっぽくする） [イメージ]→[カンバスサイズ]→相対にチェック→基準点を変える／高さ・幅を入力 ！左右両方を広げる場合…

Photoshop 初めてPhotoshopに触ってみる。インターフェイスはIllustratorに近いものがある。 Photoshopのファイルの拡張子は .psd 。 環境設定を定規・文字共にpixelに変更する。 Web用の画像編集の場合は72pixel/inchでOK。１inch（2.5cm）に72pixel入る設…

Dreamweaver コーディングに使うAdobeのソフト。コードの入力補助をしてくれる。 CSS Cascading Style Seatのこと。文書構造と体裁を分離させるという理念を実現するために提唱されたスタイルシートのひとつ。 セレクタ 何に対して{ }内のCSS命令を適用する…