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

WEBサイト制作の勉強|フェリカテクニカルアカデミー

WEBサイト制作の勉強の為の解説ブログ。東京池袋のフェリカテクニカルアカデミーでは求職者支援訓練の一環として、WEBサイト制作を学ぶことができます。

Facebookのページ・プラグインをレスポンシブ対応(可変)にする

基本的にFacebookのページプラグインは作成する際にプラグインの幅を決めなければいけません。(最小値は180、最大値は500です)空白にしてもデフォルト値である340pxが指定されます。 指定したwidthの値はコードの中にエンベッドで「data-width=""」と記述…

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

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

学生症候群(がくせいしょうこうぐん) 英:student syndrome

納期のある作業を行う際に、余裕時間があればあるほど、実際に作業を開始する時期を遅らせてしまうという、多くの人間に見られる心理的行動特性のこと。 人間は、やるべき仕事に時間的な余裕を感じると、「後でやっても間に合う」と考えてしまい、すぐに着手…

Googleフォームに自動返信機能を付ける

Googleフォームに自動返信機能を付ける 以前作ったフォームをカスタマイズして、フォームを記入してくれた人に自動でメール返信が出来る機能を追加します。 自動返信機能を付ける事でフォームを利用したユーザーにタスクの進行状況を伝える事が出来るので、…

webサイトにGoogleAPIを導入する

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

ロリポップ!レンタルサーバー |今だけ初期費用無料キャンペーン中!4月28日まで!

現在、ロリポップ!レンタルサーバーでは、通常1500円かかる初期費用が無料になるキャンペーンを開催中。 締め切りは4月28日までです。(※エコノミープランを除く) ロリポップ!レンタルサーバー |今だけ初期費用無料キャンペーン中! ◆内容 サーバー新規ご…

無料サーバーの取得とデータのアップロード

制作したデータをインターネット上で表示させるためには作ったデータをサーバーにアップロードする必要があります。 サーバーには無料のものと有料のものがありますが、授業では無料サーバーを使用していきます。 webサイト制作においてサーバーは必須のもの…

モバイルファーストを意識したレスポンシブデザインサイトの制作 3

レスポンシブサイトのタブレット・PCレイアウトを完成させます。 作例http://yachin29.webcrow.jp/sp-pc/ タブレット・PCレイアウトを完成させる為に行うことHTMLにタブレット・PC専用のコンテンツを挿入する。 ブレイクポイントを指定し、タブレット・PC用…

ローディング中にアニメーション画面を表示させる

liginc.co.jp photoshopvip.net uxmilk.jp 最近は、トップページに全画面サイズの画像や動画を表示させているサイトも珍しくありません。アイキャッチとしては非常に有効ですが、どうしてもデータサイズが大きくなり、表示に時間がかかってしまいます。また…

未経験者のポートフォリオの作り方

未経験者にとってポートフォリオをどうやって作れば良いか? 非常に悩むところです。 http://katoshun.com/blog/からの抜粋です。 未経験者のポートフォリオに載っている作品は、以下のようなものがほとんどです。 スクールの課題で作った架空の会社のサイト…

webライティングの練習

ー宿題ー 以下の内容を読み、メールで提出 インターネットについてなるべく 200 文字に近い文字数で記述して下さい。(200 文字を越えてはいけません) *キーワードは必ず文章内で使用して下さい。 *書き出し例文を参考にして文章を書いてください。書き出…

サイト制作のワークフロー

webサイト制作におけるワークフローの一例 ヒアリング クライアントとのヒアリングの時点で、方向性やサイトの目的、そしてサイトに盛り込むコンテンツなどを明確にします。また、その事をクライアントとしっかりと共有する事が大事です。その為にはしっかり…

Facebookページのフィード情報を取得する(JSON形式)

以前はFacebookが発信しているRSS/XML形式のfeed情報を取得し、比較的簡単に自身のWEBサイト等にFacebookページの投稿データなどを表示させる事が出来ましたが、Facebookのfeed配信の機能が2015年6月に仕様変更してしまい、現在はJSON (JavaScript Object N…

JPEG, GIF, PNG画像をSVGに変換する無料のオンラインサービス -PicSVG

ベクター形式であるSVG画像は拡大・縮小が可能で、非常に使い勝手が良いのですが、元データがビットマップ画像(JPEG, GIF, PNG)などの場合、ペンツール等でパスに変更する必要があります。 ペンツールに慣れていない人にとって、この作業は意外と大変です…

最新のwebトレンドを知る 2016年上半期

もちろん、常に最新のトレンドを入れなければいけない訳では無いですが、やはり見る事、知る事は非常に大事です。下記のブログでは、最新のトレンドとして主に5点のポイントを上げています。1. ブラウザいっぱいに表示して、スクロール無し 2. 固定表示は見…

svgが表示されない場合の対処法

ベクターデータで出来ているsvgデータは背景画像で使う事でより使いやすさが増します。 background-sizeで拡大・縮小も自由で出来るので、今後ますます使われる機会が増えていきます。しかし、サーバーによってはSVGが上手く表示されない場合があります。 we…

カンプをコーディング

illustratorで作ったカンプを実際にコーディングしてみましょう。 要素や文字の大きさや色、マージンなどの値もカンプのデータをベースに作っていきます。しかし、全てカンプと完全に同じに作っていくのは非常に難しいので、コーディング段階での微調整は必…

Webサイト制作の勉強

Webサイトを制作するうえで、実際に今のwebサイトにはどういう見せ方・動きがあるのかを知る、という事はとても大事です。PCサイトのUIデザインにおける12のトレンド | sogilog サイト制作の勉強をする際にインターネット上から情報を得る、という事も非常に…

Faviconの設定

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

Webサイト制作の時に便利な「placehold.it」

カンプが完成して、コーディング作業に入りたい!けれどまだクライアントから画像データが送られてこない! こんな事がよく起こります。だからと言ってデータがクライアントから送られて来るまで、ただ待っていては締め切りに間に合わなくなってしまいます。…

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

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

Webフォントの使い方

Webフォントとは? 元来、ブラウザは端末にインストールされているフォントを呼び出し文字を表示する。端末のフォント如何では、Webデザイナーが意図しないフォントが表示されてしまい、デザインに制約が生じてしまう。フォントを画像にして表示するという手…

Webフォントの使い方

Webフォントとは? 元来、ブラウザは端末にインストールされているフォントを呼び出し文字を表示する。端末のフォント如何では、Webデザイナーが意図しないフォントが表示されてしまい、デザインに制約が生じてしまう。フォントを画像にして表示するという手…

スマートフォンサイトのテスター「RWD Tester」

レスポンシブデザインサイトの制作ではスマホサイズでどのように見えているかを確認する為にスマートフォンのエミュレーターが必須です。 この「RWD Tester」は無料で利用できるChromeの機能拡張で、インストールするとツールバーから簡単に利用できます。 …

複数ページのwebサイトの作成

前回の授業で制作したCafeサイトの他のページを作成し、複数ページのサイトに作り直しましょう。 複数ページの場合になるとファイル数が一気に増え、各ファイルのデータ管理、ディレクトリ管理がこれまでに比べて難しくなりパスの間違いが増えるのでディレク…

WEBサイト制作の準備

WEBサイトを制作するにあたり、GoogleフォームやGoogleカレンダーなどのWEBサービスを上手に使う事でHTML・CSSやjQueryでは出来ない事が可能になり、クライアントの要望にも答えられるようになります。 また、FacebookやTwirterなどのSNSをWEBサイトに埋め込…

Googleの検索アルゴリズムを理解する

Google検索エンジン最適化スターターガイド Googleのアルゴリズムにおける検索順位に影響を与える200+個の要因のまとめcoliss.com <html lang="ja"> <head> <meta charset="UTF-8"> <title>サイトのタイトル</title> <meta name="description" content="サイトの説明文"> <meta name="keywords" content="サイトのキーワード"> h1の重要性 h1タグはGoogleに強いシグナルをおくるもので、必ずテキストで入れましょう。ロゴなど…</meta></meta></meta></head></html>

借景デザイン

借景 今回はCSS3の「background: rgba()」を使い、ヘッダー要素などの背景色を透明にする事で、その後ろにある背景画像が見えるようになります。 ヘッダーに画像を使う事無く、bodyやcontainerの背景画像を表示させる事が出来ます。 参考サイト 一般財団法人…

フォントファミリーの設定

表示したい文字がゴシック体か明朝体かで指定するフォントファミリーが変わります。 ゴシック体の場合 font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; ゴシック体の場合で、Windowsで英数字は「Verdana」、Macで英数字は「Lucida Grande」…

2015年4 月 21 日のモバイル フレンドリー アップデートについてのよくある質問

4 月 21 日に実施されるモバイル フレンドリー アップデートについてのよくある質問とその回答をご紹介します。Google ではこの 2 月にモバイル フレンドリー アップデートを発表し、モバイル版の検索結果におけるモバイル フレンドリー ページ(スマートフ…

ユーザビリティーを考えたjQuery

Webサイトを作る際には、ユーザーが迷うこと無く目的地に辿り着けるようなレイアウトや導線をしっかり考えます。 ユーザーがストレスを感じないように、ナビゲーションボタンの位置などにも気を配り、必要ならjQueryなどの動きをつけましょう。今回の場合は …

ユーザビリティーを考えたjQuery

Webサイトを作る際には、ユーザーが迷うこと無く目的地に辿り着けるようなレイアウトや導線をしっかり考えます。 ユーザーがストレスを感じないように、ナビゲーションボタンの位置などにも気を配り、必要ならjQueryなどの動きをつけましょう。今回の場合は …

複数ページのサイト構成

今回のチェックポイント 正しいファイル管理が出来ているか ビルボード画像はトップページのみ スタイルシートは1枚で全ページを管理する bodyの色は各ページで別指定 トップページ <html> <head> <meta charset="utf-8"> <title>Cafe-siteのトップページ</title> <link rel="stylesheet" href="css/style.css"> </head> <body id="top"> <div id="container"> <div id="header"> <h1></h1></div></div></body></html>

FTPファイルを使ってサーバーにアップロードする

FTPファイルの設定 自分で制作したサイトをインターネットで見るには、FTPファイルでデータをサーバーにアップロードする必要があります。 サーバーやFTPの設定は多くの初心者がつまずき易いところなのでしっかり覚えましょう。不安のある人はいきなりク…

bodyの横幅一杯に表示するスライダーjQuery

以前、既存のサイトをモデルにしてレスポンシブサイトを制作し、jQueryのプラグインを使いトップにスライダーを導入しましたが、モデルサイトに最も近い形のスライドショーを導入したパターンが今回のやつです。 今回のスライドショーの主なポイント ブラウ…

制作したレスポンシブサイトをカスタマイズ

制作したレスポンシブサイトにスライドするjQueryを追加する index.html <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link href="css/common.css" rel="stylesheet"> <link href="css/style-l.css" rel="stylesheet" media="only screen and (min-width:960px)">…</link></link></meta></meta></head></html>

レスポンシブサイト制作

既存サイトを参考にしてレスポンシブサイトを制作 index.html <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link href="css/common.css" rel="stylesheet"> <link href="css/style-l.css" rel="stylesheet" media="only screen and (min-width:960px)"> </link></link></meta></meta></head></html>