webサイト制作の勉強|2019年10月クラス用ブログ

ファリカテクニカルアカデミーのwebサイト制作科の授業解説ブログです。フェリカテクニカルアカデミーは池袋にある求職者支援訓練の学校です。

webサイト制作

htaccessを使った動的配信

「.htaccessファイル」を使った動的配信 動的な配信 | Google 検索デベロッパー ガイド | Google Developers スマートフォン利用者を自動的に「スマートフォン版サイト」へ誘導できるよう、「アクセス者の端末に応じて自動でアクセス先を振り分ける機能」を…

コーディング作業のさいのチェックリスト

モバイルフレンドリーテスト search.google.com リンク切れがないか dead-link-checker.com 表示速度 www.thinkwithgoogle.com alt属性を適切に設定する meta属性を適切に設定する ファイルのデイレクトリ ページ毎に適切なタイトル faviconの設定 タッチア…

ファビコンにsvg形式の画像を使う

以前、授業でファビコンを作成した際には、一度、png等のビットマップで作成し、そのあと.ico用のジェネレーターで変換していましたが、とうとうファビコンもSVG形式が対応されるようになりました。SVGを使えばこれまで使われてきたPNGなどのビットマップ形…

フリーで使えるSVGアイコン

icooon-mono.com iconbox.fun flat-icon-design.com iconmonstr.com remixicon.com icons.pixsellz.io アニメーション付きのSVGアイコン www.potlabicons.com SVGパターン また、最近はドット、モザイク柄など、様々なパターンのsvgを要素の背景に簡単に使え…

スニペットを使ってホバーアニメーションを付ける

最近はcss3のアニメーションだけで色々な事が出来るようになっています。特にホバー時のように小さいアニメーション(マイクロインタラクション)であればcssのみで充分表現できます。 とは言え、css3のアニメーションをゼロからスクラッチで書いていくのは…

レスポンシブイメージの設定

img要素を画面幅によって切り替えたい場合、以前はJavascript等でwindow幅によって画像のファイル名を変える、などの方法が取られていましたが、html5.1,で策定された「レスポンシブイメージ」を使う事で手間のかかるCSSやJavaScriptを必要とせず、htmlのみ…

ワイヤーフレーム の作成

ワイヤーフレームとは「サイトの設計図」です。 サイトを作成する前に「何を・どこに・どのように」画面に配置するかを明らかにする事で、実際の作成作業をスムーズに進める事が出来ます。また複数人で作業する場合やクライアントとデザインイメージを共有す…

cssで作るメガドロップダウンメニュー

メガドロップダウンメニュー 最近よく見かけるメガドロップダウンメニュー。特にコーポレートサイトなど情報量が多いサイトでは、リンク先のページに飛んでからさらにそのページの中から目当てのコンテンツを探さなければならない、といった手間がかかります…

webサイトの主なレイアウト

レイアウトを考える時に常に独創的でユニークなレイアウトである必要はありません。それどころか訪問者の多いサイトを見れば、多くのサイトで似たようなレイアウトが採用されています。それは偶然でも手抜きでもありません。そこには次のような利点があるの…

アクセシビリティーについて

「ウェブアクセシビリティ」とは、「高齢者や障害者など心身の機能に制約のある人でも、年齢的・身体的条件に関わらず、ウェブで提供されている情報にアクセスし利用できること」を意味します。 qiita.com 一般的なコントラスト比とは液晶画面の最も明るい部…

サイトマップとディレクトリマップ

サイトマップ サイトマップとは、サイトの全体像を描く見取り図であり、サイト内での情報の分類を定義するものです。サイトマップによってサイトの骨格を設計し、掲載する情報の組織化・構造化を進めていきます。 サイトマップには単なる設計資料としての役…

コーディングルールの設定

複数人でコーディング作業を進める場合、共通のルールや約束事を「コーディング規約」として事前に決めておきます。例えば担当者が独自の勝手なルールでコーディング作業を進めてしまうと、その担当者以外の者がコーディング作業する事が出来なくなってしま…

ガントチャートの作成

クライアントワークが来週から本格的に始まります。 ただ、しばらくは授業と平行でクライアントワークの準備を進めて行くため、どうしても厳しいスケジュールになりがちです。 その為、しっかりとしたスケジュール管理が必要となってきます。 まずはガントチ…

モバイルファーストでの既存サイトのトレース

今回トレースするサイトは非常にシンプルで今時な感じがする全画面を使ったグリッドデザインで出来たサイトです。 今の段階で細かい部分の作りをするのは少し難しいので、まずはワイヤーフレームのようにレイアウトのみにしぼって作っていきましょう。www.bl…

タッチアイコンの設定方法

スマートフォンの場合、PCのようにブラウザーから検索してWebサイトに行くよりも、ホーム画面に登録してあるアプリからワンタッチでWebサイトなりWebサービスを利用するケースがほとんどです。 なので、スマートフォンサイトを制作する場合には必ずスマート…

冬休みの課題2

webライティングとカウンター・アーギュメント Webライティング11のルール from Tsutomu Sogitani www.slideshare.net 今回のテーマは「これからのweb」 以下の記事を読み、webの危険性と利便性を踏まえて、今後のwebとアプリがどうなっていくか、自らの考え…

Google品質評価ガイドラインを読む

SEO対策にはサイトが必ず自動的に掲載順位 1 位になるような秘訣は無く、とにかく自身のコンテンツの品質を高める事が結果として検索結果の上位表示に繋がるという事をしっかりと理解しましょう。 www.dentsudigital.co.jp 低品質のページに該当されやすいペ…

要件定義の作成

要件定義とは、Web サイトやアプリケーションなどの開発初期段階において、発注者と受注者の情報共有のために、実装すべき機能や満たずべき性能を第3者でも分かるように明確化しておく作業のことです。 要件定義は、Web サイトやアプリ開発において非常に重…

クライアントワークの目標

いよいよクライアントワークが始まります。まずはクライアントワークを行う目標を明確にしましょう。http://katoshun.com/blog/からの抜粋です。 未経験者のポートフォリオに載っている作品は、以下のようなものがほとんどです。スクールの課題で作った架空…

Webサイトの構成表の作成

Webサイトの構成を明確にする為に必ず、Webサイト構成表を作成しましょう。 「サイト全体で何ページになるか?」「どのページにどんな内容のコンテツを入れるか?」「どういう順番でコンテンツを並べたら、ユーザーが見やすい・解りやすいか?」 などは、必…

webサイトにGoogleAPIを導入する

Googleが提供しているGoogleAPIを使うことで簡単に様々な便利な機能をwebサイトに導入する事が出来ます。 Webサイトにスケジュール表やメールフォームを追加したい場合、PHPで作成する事が可能ですが、「Googleカレンダー」と「Googleフォーム」を使うのも選…

TwitterやFacebookなどのSNSをサイトに埋め込む

Webサイト上で新着情報や更新頻度の高い情報を表示させたい時には、TwitterやFacebookなど既存のSNSのプラグインを使うのが非常に便利です。SNSのプラグインを使用すれば、わざわざHTML内のデータを触る事無く、SNSに記事を投稿するだけでWebサイト内の情報…

コピーライトの記述方法

フッター要素などにあるコピーライトの記述。サイトによって色々な書き方がありどう書いて良いか迷う所ですが、そもそもコピーライトの記述は絶対に必要なものでは無く、記述しようがしまいが、日本では著作物は法律でちゃんと守られます。それでも何となく…

カンプ作成の練習

1、cssファイルは外部リンクでリンクさせ、適切なリセットをかける事 2、ロゴ画像をSVG形式で作成し、h1の背景画像で表示。この際、h1のテキストはcssで隠すように。 3、webアイコン(Font Awesome)を使う事 4、適切な余白の設定 5、各画像を指定され…

Faviconの設定

favicon(ファビコン)は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。favorite icon(フェイバリット・アイコン:お気に入りアイコン)という英語の語句を縮約したも…

第1回実技試験の内容

作例 今回の実技試験の概要 フォルダー名を「自分の名前_test01」として、試験終了後、講師に提出する事 画像は各自で用意し指定されたサイズにトリミングする事 headerの幅960px高さは350px。背景画像に「CAFE de FELICA」の文字を修飾し入れる cssファイル…

Photoshopによるスライスとコーディング

既存のサイトを真似してコーディングしてみるのは、非常に良い練習なので、積極的にやりましょう。ただ、練習に向いているサイトとそうでないサイトがあるので、注意が必要です。 作業手順 1. 既存のサイトのキャプチャーを撮る 2. Photoshopで開き、各画像…

複数ページの制作

最近ではシングルページのサイトもよく見かけますが、ほとんどのサイトは複数ページをリンクさせていくという形でこちらの方が一般的です。 複数ページでサイトを作る際に気をつけないといけないのがフォルダー構成です。以下のようにページ毎にフォルダーを…

SEO概論

SEOとは、”Search Engine Optimization” の略であり、検索エンジン最適化を意味する言葉です。検索結果でWebサイトがより多く露出されるために行う一連の取り組みのことを指します。 オーガニック検索 オーガニック検索(自然検索 / Organic Search)とは、…