読者です 読者をやめる 読者になる 読者になる

バナー模写20

ローソンのバナー模写です。 元バナー 模写バナー Photoshopのレイヤー

バナー模写19 Illustratorで放射状の線を描く

Illustratorで放射状に線が入ったバナーを描きます。 元バナー 模写したバナー Illustratorのレイヤー 放射状の線の描き方 横300px × 縦250pxの長方形を描き、線なしで塗りを黄色にします。 中央に正円を描き、線は少し濃い黄色にして、塗りをなしにします。…

バナー模写18

過去に作成したバナーをブログにまとめます。 朝日新聞社「心の旅時計」のバナーをPhotoshopで模写しました。 モデルの表情が良くてお気に入りのバナーです。 元バナー 模写したバナー Photoshopのレイヤー 使用した背景画像 オリジナル画像 トーンカーブで…

バナー模写17

過去に作成したバナーをブログにまとめます。バナーのほとんどをPhotoshopで作成しており、このANAハローツアーのバナーもPhotoshopで作成しました。 元バナー 模写バナー Photoshopレイヤー 使用した背景画像

バナー模写16

過去に作成したバナーのまとめです。 HPサーバーのバナーをPhotoshopで模写したものです。 元バナー 模写したバナー Photoshopのレイヤー 使用したサーバー画像

バナー模写15

過去に作成したバナーのまとめです。 科学技術学園高校のバナーをPhotoshopで模写したものです。 元バナー 模写したバナー Photoshopのレイヤー 使用した背景画像

バナー模写14

過去に作成したバナーのまとめです。 PARAFTのバナーをPhotoshopで模写したものです。 元バナー 模写したバナー Photoshopのレイヤー 使用した背景画像

バナー模写13

Photoshopでバナーを模写しました。今回も、サイズ336×280pxのバナーを、サイズ300×250pxにして模写しました。 元バナー 模写したバナー Photoshopのレイヤー 使用した背景画像

バナー模写12

Photoshopでバナーを模写しました。今回は、サイズ336×280pxのバナーを、サイズ300×250pxにして模写しました。 元バナー 模写したバナー Photoshopのレイヤー 使用した背景画像

バナー模写11

Photoshopでバナーを模写しました。 元バナー 模写したバナー Photoshopのレイヤー ボタンの制作 使用した背景画像

東京の100年をカラー映像で振り返れるWebページ

東京の100年をカラー映像で振り返れるWebページ東京の100年をカラー映像で振り返れるWebページ 東京の100年をカラー映像で振り返ることができるNHKスペシャルのページです。このWebページだけでテレビのドキュメンタリー番組を観たような感覚になります。 NH…

かっこいいWebページ

ニコンダイレクトのAW1というカメラのページを紹介します。 Nikon 1 AW1 Nikon 1 AW1 - Present Campaign | NikonDirect - ニコンダイレクト トップページはアニメーションでタイトルや画像が時間差で表示されます。 画面を下にスクロールしていくと、防水15…

バナー模写10

Photoshopでバナー模写をしました。 元バナー 模写したバナー Photoshopのレイヤー 使用した背景画像 使用したカメラの画像

バナー模写9

Photoshopでバナー模写をしました。 元バナー 模写したバナー Photoshopのレイヤー 模写に使用した画像 D7000 D3100 D3100のレンズ

バナー模写8

作成したバナーの数が少ないので、もう少し練習したいと思います。 Photoshopで「ゆこゆこ」のバナーを模写します。 元バナー 模写したバナー Photoshopのレイヤー

Google search consoleの検索アナリティクスを使ってみる

Google search consoleの検索アナリティクスによってクリック数、表示回数、CTR、掲載順位について、それぞれを「検索ワード」、「閲覧ページ」、「検索に使用された端末」別に見ていきます。 以下の用語説明は、Googleの検索アナリティクスレポートからのコ…

Photoshopによるgifアニメを使ったバナー制作

過去に授業でPhotoshopを使って動きのあるバナーを制作しましたので、忘れないように手順を記しておきます。 作成したバナーです。 作成手順 2種類のタイトルと4種類の色のシューズを準備しました。 「ウィンドウ」メニュー内の「タイムライン」を選択します…

バナー模写7

楽天バナーの模写です。 楽天スーパーセールのバナー 元バナー 模写バナー Photoshopのレイヤー

PHPでデータベースを検索する

PHPを使用してデータベースを検索して表示するプログラムを学習しました。 実行画面 「お問い合わせ内容一覧」の結果 テーブルに登録されている全データを表示しています。 お問い合わせ内容検索 No.(プライマリキー)を入力します。 「お問い合わせ内容検索…

バナー模写6

JALのバナーをPhotoshopで模写しました。 元バナー 模写したバナー Photoshopのレイヤー 背景画像 ロゴ画像

バナー模写5

ANAのバナーをPhotoshopで模写しました。 元バナー 模写したバナー Photoshopのレイヤー 旅客機の加工 旅客機の背面が暗いので、その部分だけトーンカーブで少し明るくしました。 旅客機の元画像

バナー模写4

GAZOOのバナーをPhotoshopで模写しました。 元バナー 模写したバナー Photoshopのレイヤー 背景に使用した写真

バナー模写3

コミュファ光のバナーをPhotoshopで模写しました。 元バナー 模写したバナー Photoshopのレイヤー 背景の元画像

バナー模写2

Relo国内旅行のバナーをPhotoshopで模写しました。 元バナー 模写したバナー Photoshopのレイヤー 模写で使用した背景画像

フォームデータをデータベースに登録します

PHP

データベースの準備 MySQLにてデータベース名:mydb、テーブル:formを作成します。 formテーブルのカラムデータを作成 1 id int(11) AUTO_INCREMENT PRIMARYキー 2 name VERCHAR(20) 3 email VERCHAR(50) 4 blood VERCHAR(10) 5 message VERCHAR(400) ここ…

バナー模写

LCCジェットスターのバナーをPhotoshopで模写しました。 元バナー 模写したバナー Photoshopのレイヤー Photoshopで旅客機を切り抜き 使用した旅客機の画像(Google画像検索にて)

職業訓練講習 面接編

面接に臨む前に「緊張しない心構え」と「想定質問」について考えました。 緊張しない心構え 練習したんだから しょうがないよ やる事はやったんだから 面白いことを考える 感謝 気合 自信を持つ 誠意を持つ チャンス 身だしなみ マナー、笑顔 自分を営業する…

robots.txtのDisallowでもクロールはされている

Disallowはクロールを禁止する場合に用います。しかし、インデックスに登録されないだけで情報の取得は行われているようです。 テスト用のサーバーに/monicaというディレクトリを作り、そこにWebページ一式を置いておきました。robots.txtを設置してDisallow…

Googleアナリティクス

Google AnalitycsはGoogleが無料で提供するWebサイトのアクセス解析ツールです。 サイトを訪問した人のサイト内の動きを把握することで、サイトの改善すべき点が見えてきます。 クライアントワークで制作したWebサイトに導入し、改善すべきところを調べたい…

PCとスマホで検索順位を比較

Google Chromeのプライベートモードを使用し、PCとスマホの検索順位を比較しました。検索順位を調査するサイトはスマホ対応してあります。 結果は、まったく同じではありませんが大差はありませんでした。 スマホで上位表示されているサイトを見てみると、ス…

作成したサイトのワード別検索順位を調べる 2回目

1回目の検索は12月8日に行いました。それから1週間経ちましたので、検索順位に変動があるのか確認しました。 結果は検索ワードに久喜や埼玉など地域を含めた検索では大きな順位の変動はありませんでしたが、検索ワードに地域を含めない検索では、表示順位が1…

WebサイトがGoogleにインデックスされたかSearch Consoleで確認する (続き)

12月8日のブログの続きです。 12月5日に7ページのサイトマップを送信しましたが、2日後にインデックスに登録されたのは1ページだけでした。しかし、12月12日に 6ページが登録されていました。 このサイトの「トップ」、「お店紹介」、「素材へのこだわり」、…

ノーマライズ・スタイルシート - normalize.css

CSS

ノーマライズCSSとは、リセットCSSとは異なり、ブラウザに初期設定されているCSSをすべてリセットするのではなく、リセットの必要のないものはそのまま利用しようという考え方です。 ブラウザごとに異なる初期設定の差を無くす働きもあるようですが、結局基…

アニメーティブスライドショー - Refine Slide

「Refine Slide」は、14種類ものアニメーションを選択して簡単に実装することができる、レスポンシブ対応のjQueryライブラリです。 ランダムを選択すると、多種多様な動きにしばらく見入ってしまいます。特に「3D Cube horizontal」と「3D Cube vertical」の…

レスポンシブで縦方向の間隔をコントロールする

padding-topでアスペクト比をコントロールする img要素の場合はwidth:100%とすると、自動的にアスペクト比を維持してくれますが、他の要素の場合はheightの代りにpadding-topを使うことで、アスペクト比をコントロールすることができます。 アスペクト比を求…

PageSpeed Insights モバイル編

PageSpeed Insights を使用すると、すべての端末でウェブページの読み込み時間を短くする方法がわかります。 PageSpeed Insights 制作したサイトに対して実行してみました。 http://monica1818.sakura.ne.jp/ モバイルに対しての結果 速度 59/100 と表示され…

PageSpeed Insights パソコン編

PageSpeed Insights を使用すると、すべての端末でウェブページの読み込み時間を短くする方法がわかります。 PageSpeed Insights 制作したサイトに対して実行してみました。 http://monica1818.sakura.ne.jp/ パソコンに対しての結果 72/100 と表示されまし…

作成したサイトのワード別検索順位を調べる

上位表示させたいワードを入力して掲載順位を確認しました。 検索はPCからGoogle ChromeのシークレットモードでGoogle検索を実行しました。 1ページ目に表示されることを目標にしていましたから、合格ラインはクリアしました。 シークレットモードで検索する…

WebサイトがGoogleにインデックスされたかSearch Consoleで確認する

12月5日にサイトマップを送信し、2日後にはサイトがインデックスに登録されました。サイトのインデックスへの登録は1週間くらいかかると思っていましたから、ずいぶん早く登録されました。しかし、登録されたのは1ページです。実質5ページのサイトですから、…

XMLサイトマップの作成と登録

Google Search Console でWebサイトのドメインを登録しても、サイトの構成まで登録できません。そこでサイトの構成を ”XMLサイトマップ” として作成して、Search Consoleに登録します。 XMLサイトマップの作成は、サイトマップ・ジェネレーターを使うと便利…

Google Search Console にサイトを登録する

Google Search Consoleは、Googleの検索エンジンがどのようにWebサイトを見ているのかを知ることができます。 サイトの登録は、このSearch Consoleで行います。 www.google.com サイトの登録 Google Search Consoleのサイトに入り、「プロパティを追加」をク…

widthを100%でborder、padding、marginを試す

widthを100%で使用した時に border、padding、margin を使用するとどのような表示になるのかを確認しました。 確認内容 親と子のdiv要素を作り、それぞれwidthを100%にしました。 親要素にpadding、border、marginを付けた場合の親子div要素の表示を確認しま…

レスポンシブでwidthとmax-widthを使った画像の表示を確認する

300px X 300px の画像を用意して、ウィンドウ幅を大きくした場合と小さくした場合の画像の変化を確認します。基本的な内容ですが、落とし穴がありそうなのでここで確認しておく必要を感じました。 確認は以下の4通り行います。 CSSで何も指定しない場合の表…

レスポンシブで画像表示を確認

レスポンシブで画像がうまく表示されない場合があって苦労しました。 今後苦労しないために、img要素とbackgroundの4パターンで画像の表示を確認しました。 パターン1 imgタグをdivタグ囲む max-width: 100%; height: auto; パターン2 ※パターン1と2の…

flexboxのプロパティ

flexboxのプロパティ flexboxコンテナプロパティ flex-direction flexコンテナの主軸方向を決める row | row-reverse | col |col-reverse flex-wrap flexアイテムを1行か複数行かを決める nowrap | wrap | wrap-reverse flex-flow flex-directionとflex-wrap…

flexboxを使う 1

フレキシブルボックスレイアウト(flexible Box Layout Module) flexboxはWebページを柔軟にレイアウトするために作られたもので、 親要素(Flexboxコンテナ)の中に子要素(Flexboxアイテム)を並べていくという考え方でレイアウトします。 flexboxの特徴 …

ポジションレイアウト fixed

positionを使って表示位置を指定 表示位置の指定方法の種類 static ポジションレイアウトを行わない relative 通常の表示位置を基点にした位置指定 absolute 親要素を基点にした位置指定 fixed ブラウザ画面を基点にした位置指定 page ページボックスやリー…

ポジションレイアウト absolute

positionを使って表示位置を指定 表示位置の指定方法の種類 static ポジションレイアウトを行わない relative 通常の表示位置を基点にした位置指定 absolute 親要素を基点にした位置指定 fixed ブラウザ画面を基点にした位置指定 page ページボックスやリー…

Webページの画像を一括ダウンロードする

Mozilla Firefoxで画像をダウンロードする手順 1.Firefoxでダウンロードしたい画像があるページを表示 2.表示したページ上でマウスを右クリック 3.「ページの情報を表示」を選択 4.「メディア」を選択し、「すべて選択」をクリック 5.「名前を付け…

レスポンシブでcalc関数を利用する

レスポンシブWebデザインでマージンは可変させないで一定にし、コンテンツのみ可変にしたい場合があります。そんな時に便利な calc 関数の使い方についてまとめます。 参考Webページ developer.mozilla.org calc関数の書式 width:calc( boxSize% - fixedVal…