HTML
初めて制作したWebサイトも、公開から約一ヶ月が経ちました。実は公開後も検索エンジンや解析ツールを使ってどうしたらより多くの人の目に触れるかを考えていました。検索エンジンでは上がっても8～10位前後、うー、あの某ポータルサイトを抜きたいなあ、う…
![はてなブックマーク - 1014 [SEO] 検索エンジンで1位になりました](https://b.hatena.ne.jp/entry/image/https://nkjm24.hatenablog.com/entry/2014/10/14/130000)
CSS3コードについて まず文字部分を透過した画像を作成します。 HTMLにimg指定をして、今回はboxというID名を付けたdivで囲みました。 そこに対してスタイルシートで下記のように記述します。#box{ margin: auto; padding: 10px; width: 450px; height: 200p…
![はてなブックマーク - 0926 [CSS3] CSS3でグラデーション変化するバナーを表示する](https://b.hatena.ne.jp/entry/image/https://nkjm24.hatenablog.com/entry/2014/09/27/123000)
イベント click() $( セレクター ).click(function(){ 処理 return false; }); a要素にクリックイベントを設定する際に注意する事 a要素はクリックするとhrefの参照先へジャンプする機能を持つ →click指定をするためにはその機能をストップさせなければなら…
inner.HTML id名の付いたタグのテキストを書き換える 書き換える文字列にHTMLタグを含める事ができる document.getElementById( ‘id名’ ).innerHTML = ‘書き換えテキスト’ ; 変数にしても指定できる var a = document.getElementById( ‘id名’ ); a.innerHTML…
Ajax 非同期通信を利用し、動的にページの一部を書き換える DOM: Document Object Model ドキュメント内の任意の要素にアクセスする仕組み IDを指定して要素を取得 document.getElementById( ‘ID名’ ); ex <head> <title>a</title> <script> function setValue(){ var elm = document.getE</script></head>…
イベントハンドラ < onClick=”イベント” > クリック時の処理 < onLoad=”イベント” > ページや画像の読み込みが完了したときに発生 function init(){ alert( ‘ロード完了’ ); } window.onLoad=init; イベントハンドラに指定した関数を呼び出す時は原則<head>内に記</head>…
ボタンを表示する <button onClick =” ボタンを押した後の処理 ”> ボタンに表示する文字 </button> ユーザー定義関数 function 関数名 ( 引数 ) { 処理 } 自分で関数を定義することができる 今日の演習 演習１。コード。 ボタンを押すと入力ボックスが出て 結果が表示される。 演習２。 ボタンを押すとポップアップ…
JavaScriptによる画像置換 カーソルを当てるとサムネイルがモノクロからカラーに変化し、かつ、カーソル上の画像が大きく表示されるような指示をする。 画像の準備 大画面用の５枚、サムネイル用のモノクロ／カラー各５枚の計15枚をPhotoshopを使って用意し…
JavaScriptによる画像置換 onMouseOver=” this.src= ’img/***.jpg’ ” onMouseOut=” this.src= ’img/***.jpg’ ” <script>タグ無しでHTMLに直接書き込むJavaScriptのタグ イベント属性の値に関数名を指定し、マウスが指定した要素に触った瞬間／離れた瞬間に関数が実行…
架空の企業サイトを作ってみよう。制限時間は50分×５。 サイト制作時における指定 全体は、#conatiner幅「980px」 ヘッダー情報とフッター情報の見栄えは、ブラウザ幅全体を利用する 横幅「140px」高さは「50px」ピクセルのナビゲーションボタンを7個作成 「…
画像の扱い 意味のある画像：HTMLに <img> で指定、altを記述せねばならない 意味のない画像：CSSに {background} として指定 HTMLに<img>指定をする場合 altに記述する内容は？ …そもそものaltの役割とは、 画像を表示しないブラウザの場合、画像の代わりにこのテキス…
Illustrator パスファインダーで型抜きする こんな形を作りたいとき 角丸で各要素を描き、斜めの角丸の余分な箇所を四角形で囲む 四角形と斜めの角丸のみを選択する [パスファインダー]の[形状モード]の[前面オブジェクトで型抜き]を選択すると 前面オブジェ…
CSS 検索エンジンは読んで200行 スタイルシートを外部化しなければhead部分に大量の記述があった場合、検索エンジンはbody部分まで読み取ってくれない。そのためスタイルシートは外部化することでbody部分のコンテントをできるだけHTMLの上部に配置しSEO効果…
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命令を適用する…
SEO 検索エンジンで上位表示をさせるためにやるべきこと。 <head>部分に<meta name=”keywords” content=”XX”> は使わない。 なぜならKeywordsは、少なくともGoogleでは上位表示の対象にはならないから。 重要なのは<meta name=”description” content=”ここにキーワード”>。Description部分は検索時にリンクの下に出る説明文に該当する。この部分をうまく使う</meta></meta></head>…
「抽象」 抽象から具現を生む。それは抽象に名前を付けることで始まる。 それが新たなものを生み出すひとつの方法。 それを行うためには、「抽象」を知っていなければならない。 抽象を知るためにはまず、自分を客観的に見ることができるようになること。 ７…
