1014 [SEO] 検索エンジンで1位になりました

初めて制作したWebサイトも、公開から約一ヶ月が経ちました。実は公開後も検索エンジンや解析ツールを使ってどうしたらより多くの人の目に触れるかを考えていました。検索エンジンでは上がっても8～10位前後、うー、あの某ポータルサイトを抜きたいなあ、う…

2014-10-11

1010 [CSS] position: absolute? rekative? fixed?

CSS 職業訓練

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

2014-10-10

1009 [HTML5][CSS3] 縦書きにしてみる、ルビを振ってみる

CSS3 HTML5 職業訓練

HTML5でルビを振る rubyタグを使います。<ruby>ルビを振りたい漢字<rt>ルビ</rt></ruby>こんな感じ。簡単。だけど結構面倒。いやがんばりました。置換置換。しかしながらこのタグ、firefoxでは対応しておらず、普通の文字として認識されてしまいます。そのため、firefox対策として、<rp></rp>…

2014-10-03

1003 [WordPress] Webデザインまとめたサイト作ってみた

職業訓練 WordPress デザイン

WordPressをテキストで一通り学んだので、自分で作ってみました。 >> Webデザイン集｜素敵なWebデザイン集めてみました Webデザインの勉強も兼ねて、素敵なデザインのページをキャプチャと共に一言所感を加えて紹介しています。デザインがメインという事で…

2014-09-27

0926 [CSS3] CSS3でグラデーション変化するバナーを表示する

職業訓練 CSS3 HTML

CSS3コードについてまず文字部分を透過した画像を作成します。 HTMLにimg指定をして、今回はboxというID名を付けたdivで囲みました。そこに対してスタイルシートで下記のように記述します。#box{ margin: auto; padding: 10px; width: 450px; height: 200p…

2014-09-25

0925 [SEO] 制作したサイトがGoogle検索で上位に

職業訓練

サイトのアップからもうすぐ一週間。 Google検索でようやっと10位以内に出てきました。今のところ、8位。健闘です。わーい。 10位は先生のブログですね。勝った勝った。しかしながら、店舗名での検索で上位表示されてもそれは新規顧客の獲得には繋がりませ…

2014-09-19

0919: [Webサイト制作] 初めてのサイト、公開しました。

職業訓練

初めてのWebサイト制作が終了しました。課題として、各個人でクライアントを探し、実店舗のWebサイトの制作をするというもの。私は、地元の美容院、美容室オータム様のサイトを制作させていただきました。http://autumn.html.xdomain.jpまだWebに関する勉強…

2014-09-09

0908: [CSS] 忘れていたこと→CSS spritesとborder指定

職業訓練 CSS

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

2014-09-03

0902: [HTML5] フォームの作成

職業訓練 HTML5

placeholder属性テキストボックスにサンプル文字をあらかじめ入力させておく autofocus属性ページを開いたときに自動的に指定した項目にフォーカスがいく input要素内の属性・ type=”email” メール用。ooo@xxxというメールアドレス書式でないと入力できな…

2014-09-02

0901: [HTML5] 新たに追加された要素

職業訓練 HTML5

header要素 body直下に書く→そのサイトの大見出し <header> <h1>～～</h1> <p>～～</p> </header> article要素何でも囲えばいいわけじゃない！・自己完結した内容・独立した記事・見出しを付ける→付けないとレイアウトのためのタグになってしまう・雑誌で言うところの閑話休題なコラ…

2014-08-28

0827 CSS: ブラウザサイズに関係なく背景画像が全面に広がるレイアウト

CSS 職業訓練

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

2014-08-27

0826 CSS: どのブラウザでもcontainerが真ん中に表示される方法２つ

CSS 職業訓練

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

2014-08-07

0806　jQuery: イベント(2)、アニメーション効果

職業訓練 jQuery

イベント mousemove() 特定の要素上でマウスカーソルが動いた時に処理を実行 one() 指定した要素で発生したイベントに対して一度だけ実行する処理を設定できる $( セレクター ).one( ‘イベント発生の条件’, function(){ イベント発生時に処理 }); イベント発…

2014-08-05

0804　jQuery: イベント

HTML jQuery 職業訓練

イベント click() $( セレクター ).click(function(){ 処理 return false; }); a要素にクリックイベントを設定する際に注意する事 a要素はクリックするとhrefの参照先へジャンプする機能を持つ →click指定をするためにはその機能をストップさせなければなら…

2014-08-02

0801 jQuery: 各種セレクター

jQuery 職業訓練

CSS2.1 子セレクター li > strong li直下のstrongに命令を与える →<li><div><strong>のように、間に別の要素が入った場合にはきかない隣接セレクター #second + li 特定の要素の次に出現する要素に命令を与える ex <li id=”second”> 2 </li> <li id=”third”> 3 </li> →#secondに隣接するliに命令＝#thirdのliに命令がか</strong></div></li>…

2014-07-31

0729　JavaScript: inner.HTML

職業訓練 HTML JavaScript CSS

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

2014-07-29

0729　JavaScript: DOM

職業訓練 HTML JavaScript

Ajax 非同期通信を利用し、動的にページの一部を書き換える DOM: Document Object Model ドキュメント内の任意の要素にアクセスする仕組み IDを指定して要素を取得 document.getElementById( ‘ID名’ ); ex <head> <title>a</title> <script> function setValue(){ var elm = document.getE</script></head>…

2014-07-28

0724　JavaScript: 文字列を扱う

職業訓練 JavaScript

ローカル／グローバル変数ローカル変数関数内で宣言した変数。関数内でのみ有効。グローバル変数関数の中以外で宣言した変数。プログラム全体で有効。！ローカル変数はプログラム全体では通用しない →すなわち、return 戻り値; を使わないと関数外にお…

2014-07-24

0723　JavaScript: Mathオブジェクト、Dateオブジェクト

職業訓練 JavaScript

Mathオブジェクトオブジェクト.メソッド(引数1, 引数2,…) Mathオブジェクトの中のメソッド →メソッドの例 max 最大値 min 最小値 random 0から1の乱数を生成 floor 少数点以下を切り捨てる ceil 少数点以下を切り上げる round 小数点以下第一位を四捨五入す…

2014-07-23

0719　JavaScript: ループから抜ける、関数から抜ける

職業訓練 JavaScript

continue文（ex） for(a=0; a>4; a++){ if(a+b==2){ continue; } document.write(a+’+’+b+’=’+(a+b)); } a+b==2が falseのとき continueを飛ばしてdocument.writeが適用 trueのとき continueが適用されループの最初に戻る（breakのようにループが終了する…

2014-07-18

0717　JavaScript: 初めてのfor文

職業訓練 JavaScript

新しい配列を作る（newArray）その１ var 配列名 = new Array (‘要素１’, ‘要素２’, ‘要素３’, …); 自動的にインデックスは0から順につけられるその２ var 配列名 = new Array (配列の中身の数); 配列名[0] =値1 ; 配列名[1] =値2 ; 配列名[2] =値3 ; セレ…

2014-07-17

0716　JavaScript: イベントハンドラ、switch文

職業訓練 HTML JavaScript

イベントハンドラ < onClick=”イベント” > クリック時の処理 < onLoad=”イベント” > ページや画像の読み込みが完了したときに発生 function init(){ alert( ‘ロード完了’ ); } window.onLoad=init; イベントハンドラに指定した関数を呼び出す時は原則<head>内に記</head>…

2014-07-16

0715　JavaScript: 関数の自作！

職業訓練 JavaScript HTML

ボタンを表示する <button onClick =” ボタンを押した後の処理 ”> ボタンに表示する文字 </button> ユーザー定義関数 function 関数名 ( 引数 ) { 処理 } 自分で関数を定義することができる今日の演習演習１。コード。ボタンを押すと入力ボックスが出て結果が表示される。演習２。ボタンを押すとポップアップ…

2014-07-15

0714　JavaScript:カーソルを当てると画像がモノクロ→カラーになる処理

CSS JavaScript HTML 職業訓練

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

2014-07-11

0710-01　JavaScript: 画像置換はECサイトに使えるワザ

CSS JavaScript HTML 職業訓練

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