Webサイト制作
この10年でwebサイトがどの様に変わったか、が一目でわかる非常に興味深いサイトです。 10年前というとスマートフォンの普及も一般的では無く、多くのwebサイトはPCをターゲットにしていました。 なので、リンクの多くはテキストリンクだったり、リンク同士…
モバイルファーストでレスポンシブサイトにする事（ブレイクポイントは自由） ロゴはsvg形式にする事 flexboxを１箇所以上で使用する事 .containerの幅には最大値を指定する事 img要素をフルード化する事 画像のホバーアニメーションにcssのfilter機能を使う…
最近はwebサイト上にインスタグラムに投稿した画像を表示しているサイトも珍しくなくなってきました。 ここではInstagram API を使ってインスタグラムのデータをhtmlファイルに埋め込む方法を説明していきます。 Instagram APIを使って出来る事・出来ない事 …
株式会社クックパッドの総合職・デザイナー向け技術基礎研修で使った資料がネット上で公開されています。webの基礎知識が非常に解り易くまとまっているので、web初学者は一度目を通す事をお勧めします。 speakerdeck.com
index.html <html lang="ja"> <head> <meta charset="utf-8"> <title>bxsliderの導入</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/jquery.bxslider.css"> <script src="js/jquery.min.js"></script> </link></link></meta></meta></head></html>
既存のサイトを真似してコーディングしてみるのは、非常に良い練習なので、積極的にやりましょう。ただ、練習に向いているサイトとそうでないサイトがあるので、注意が必要です。 作業手順 1. 既存のサイトのキャプチャーを撮る 2. Photoshopで開き、各画像…
広告関係4団体「新しい働き方」円卓会議、広告制作取引「受発注」ガイドラインを策定。 広告業務に携わる関係者全員がこれまでの働き方を見直し、長時間労働を抑制するための取り組みとして、公益社団法人日本アドバタイザーズ協会、一般社団法人日本広告業…
3月27日、Googleが検索結果に使用するインデックスを今までのデスクトップ版のコンテンツから、モバイル版のページを使用する方法に切り替えました。 これまで、Google のクロール、インデックス、ランキング システムでは、主にデスクトップ版のコンテンツ…
フレームワークとは、アプリケーションソフトを開発する際によく必要をされる汎用的な機能をまとめて提供し、アプリケーションの土台として機能するソフトウェアのことです。元々は枠組み、下部構想、構造、組織という意味の英単語です。アプリケーションの…
複数人でコーディング作業を進める場合、共通のルールや約束事を「コーディング規約」として事前に決めておきます。例えば担当者が独自の勝手なルールでコーディング作業を進めてしまうと、その担当者以外の者がコーディング作業する事が出来なくなってしま…
スプリットレイアウト(Split Layout)とは スプリットレイアウトとは、中央などの境界線をもとにコンテンツを分割したレイアウトの事です。例えば左右に分割し、画面を大きく使用することで、制約のあるウェブページを有効に使うことができ、また各コンテンツ…
サーチコンソールとはGoogle 検索結果でのサイトのパフォーマンスを監視、管理できる Google の無料サービスのことです。自分のサイトが Google 検索結果に表示されるようにするために Search Console に登録する必要はありませんが、登録していただくとサイ…
色のもつ心理的・生理的・物理的な性質を利用して、まとまりのある雰囲気を作るなど、目的に合った配色を行うための設計。 サイト制作において配色は非常に大事で配色次第で、そのサイトのイメージが決まってしまうと言っても過言ではありません。そのサイト…
Googleフォームに自動返信機能を付ける 作ったフォームをカスタマイズして、フォームを記入してくれた人に自動でメール返信が出来る機能を追加します。 自動返信機能を付ける事でフォームを利用したユーザーにタスクの進行状況を伝える事が出来るので、結果…
coliss.com stocker.jp photoshopvip.net liginc.co.jp ics.media on-ze.com weboook.blog22.fc2.com www.webopixel.net www.wan55.co.jp blogs.adobe.com
Traversingメソッドを利用 Traversingのメリット トラバースを利用することで、イベントが発生した要素に関連した要素を操作する事ができます。ボタンが複数ある場合などは「this」を使う事になりますが、このトラバースを使えば操作したい要素を「this」か…
Webサイトの構成を明確にする為に必ず、Webサイト構成表を作成しましょう。 「サイト全体で何ページになるか？」「どのページにどんな内容のコンテツを入れるか？」「どういう順番でコンテンツを並べたら、ユーザーが見やすい・解りやすいか？」 などは、必…
使用するサンプルテキスト <div class="inner news-box"> <div class="news"> <h2>ニュースリリース</h2> <dl> <dt>2018年1月4日</dt> <dd>EC限定“バレンタイン用ギフトセット”「GRAND KIRIN GRAND GIFT（グランドキリン グランドギフト）」をAmazon.co.jpおよびLOHACOにて数量限定で先行発売</dd> <dt>2017年12月27日</dt> <dd>紅茶飲料のNo.1ブランド「</dd></dl></div></div>…
ワイヤーフレーム ワイヤーフレームとは 簡単に言えば「サイト設計図面」です。 つまり、制作するウェブサイトの要素や機能、情報を設計図面のように配置しておき、クライアントや制作者と認識を合わせるためのものです。 Wirify-見ているサイトを一瞬でワイ…
未経験者にとってポートフォリオをどうやって作れば良いか？ 非常に悩むところです。 http://katoshun.com/blog/からの抜粋です。 未経験者のポートフォリオに載っている作品は、以下のようなものがほとんどです。 スクールの課題で作った架空の会社のサイト…
Googleが提供しているGoogleAPIを使うことで簡単に様々な便利な機能をwebサイトに導入する事が出来ます。 Webサイトにスケジュール表やメールフォームを追加したい場合、PHPで作成する事が可能ですが、「Googleカレンダー」と「Googleフォーム」を使うのも選…
もちろんIE11もEdgeもSVG形式の画像をサポートしているので表示自体は問題なく出来ますが、やはりSafariやChromeなどでは問題無く表示されるのに、IE11とEdgeでは表示されない、もしくは形が崩れている、なんて事が良くあります。その場合に気をつけて欲しい…
以前、授業でGoogleのwebフォントを使用してみましたが、最近はテキストだけでなくアイコンもwebフォント化されていて、それを使用しているサイトもよく見かけます。 フォントなのでテキストとのベースラインが合わせやすい フォントなので拡大縮小はcssのfo…
HTMLソース <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>スプリットレイアウト</title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/jquery.bxslider.css"> </link></link></meta></meta></head></html>
会社概要会社名 株式会社フェリカ企画 所在地 東京都豊島区南池袋2－12－9 KKビル４F 設立日 2000年1月1日 代表取締役 山田太郎 資本金 10億円 関連会社 フェリカ・インターナショナル Company infoCompany Name Felica Co.,Ltd. Company Address KK Bldg-4F…
GoogleMapは通常インラインフレームで表示させている場合が多いですが、カスタマイズをするには DOMで表示させる必要があります。 var map; function initMap() { // マップ基本設定 var latLng = new google.maps.LatLng(35.725968, 139.713874); map = new…
全プラン初期費用無料キャンペーン実施中！ ロリポップ！レンタルサーバー |今だけ初期費用無料キャンペーン中！■□━━━━━━━━━━━━━━━━━━━━━■□ロリポップ！では無料独自SSLのリリースを記念し、 【全プラン初期費用無料キャンペーン】を実施中です！■キャンペー…
スプリットレイアウト(Split Layout)とは スプリットレイアウトとは、中央などの境界線をもとにコンテンツを分割したレイアウトの事です。例えば左右に分割し、画面を大きく使用することで、制約のあるウェブページを有効に使うことができ、また各コンテンツ…
webnaut.jp
今回トレースするサイトは非常にシンプルで今時な感じがする全画面を使ったグリッドデザインで出来たサイトです。 今の段階で細かい部分の作りをするのは少し難しいので、まずはワイヤーフレームのようにレイアウトのみにしぼって作っていきましょう。www.bl…
