物理ピクセル(デバイスピクセル)と論理ピクセル(CSSピクセル)について 一般的なディスプレイ デバイスピクセル＝CSSピクセル デバイスピクセル比が1:1 高解像度ディスプレイ デバイスピクセル≠CSSピクセル デバイスピクセル比が2:1や3:1 ■■ ■■ デバイスピク…

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

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

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

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

画像加工２ 制作時間：30分 入校後２ヶ月の作品です。 画像加工のみならず、文字の飾りつけやカーニングについて学びました。 字間にこだわる事で、画像全体の印象がここまで変わるのかと驚きました。 ←ポートフォリオサイトに戻る

画像加工 制作時間：15分 入校後すぐの作品です。 パスタ以外にボケをきかせ、やわらかい印象を持たせるため画像の端にぼかしをいれました。 Photoshopに初めて触り、できることの幅広さに驚いた時でもあります。 ←ポートフォリオサイトに戻る

エモトカホリ(仮)のコーディング 入校後３ヶ月の作品です。 HTML5とCSS3を用いて制作しました。 スマートフォンサイト向けにcontentプロパティでコンテンツを挿入する等、これまでのコーディングと異なる点もあり、スマホサイトの制作の特異性について学びま…

Patisserie camellia(仮)のコーディング 制作時間：３時間 入校後２ヶ月の作品です。 グリッドデザインをposition指定で行いました。 感覚を掴めばposition指定はとても便利で有効なCSSの指定方法だと学びました。 画像さえ用意できたら、おしゃれな雰囲気が…

Cafe Cockeyolly(仮)のコーディング 制作時間：３時間 入校後２ヶ月の作品です。 縦並びのナビゲーションにbackground-imageを指定するレイアウトの仕方に面白さを感じた作品です。 メニュー表示部分の写真と見出し、本文のバランスや配置が、所見で感じた以…

建築散歩(仮)のコーディング 制作時間：２時間 入校後１ヶ月の作品です。 background-imageとpaddingの調整に戸惑いながらのコーディングでした。 このように余白をうまく使って雰囲気を出す方法は難しくも効果的であると学びました。 ←ポートフォリオサイト…

スタイルシートカンパニー(仮)のコーディング 制作時間：４時間 入校後１ヶ月の作品です。 コーディングの勉強と共に、ビジネス系サイトのデザインとレイアウト、色彩についても学びました。 誠実さを表現する方法に対しての意識が強まった作品です。 ←ポー…

石垣島観光ガイド(仮)のコーディング 制作時間：４時間 入校後１ヶ月未満で制作した、初めてのWebページ制作の作品です。 時間はかかりましたが、HTMLの構造全体を理解するにはまずとにかく手を動かしてみることだと学びました。 また、この時色彩の組み合わ…

レスポンシブデザインのコーディング 制作時間：３時間 グリッドスタイルのレスポンシブデザインを制作しました。 スマホサイズ、タブレットサイズ、PCサイズの３種類のデバイスに対応させています。 ←ポートフォリオサイトに戻る

Webデザイン集 ●Webデザイン集へはこちらから WordPressを使用した作品です。 素敵なデザインのWebサイトを集め、ご紹介しています。 自分の学びとして、Webマーケティング的な視点も意識して、良い点・気になる点等も書き記しています。 ←ポートフォリオサ…

WEBはじめました ●トップページへはこちらから このブログです。 入校から日々更新してきました。 未経験からの成長の記録と位置づけています。 習った事の記録という側面と同時に、アクセス解析等を通じて、どんな記事が人気なのか、求められているのかにつ…

美容室オータムの公式サイト ●美容室オータムのWebサイトへはこちらから 入校後３ヶ月の作品です。 クライアントの獲得からヒアリング、デザイン、パーツ制作、コーディング、納品まで全てを手がけました。 検索エンジンで【美容室オータム】と検索すると１…

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

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

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

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

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

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

背景画像の指定 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でマイナス指定する事で 上下のど真…

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

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

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>…

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>…