WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

Webサイト制作

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

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

IE・EdgeでSVG画像が表示されない時に気をつけるポイント

もちろんIE11もEdgeもSVG形式の画像をサポートしているので表示自体は問題なく出来ますが、やはりSafariやChromeなどでは問題無く表示されるのに、IE11とEdgeでは表示されない、もしくは形が崩れている、なんて事が良くあります。その場合に気をつけて欲しい…

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

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

webサイトにGoogleAPIを導入する

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

アイコンをwebフォントで表示

以前、授業で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ビル4F 設立日 2000年1月1日 代表取締役 山田太郎 資本金 10億円 関連会社 フェリカ・インターナショナル Company infoCompany Name Felica Co.,Ltd. Company Address KK Bldg-4F…

GoogleMapのカスタマイズ

GoogleMapは通常インラインフレームで表示させている場合が多いですが、カスタマイズをするには DOMで表示させる必要があります。 var map; function initMap() { // マップ基本設定 var latLng = new google.maps.LatLng(35.725968, 139.713874); map = new…

レンタルサーバー「ロリポップ」今なら全プラン初期費用無料! 7.20まで

全プラン初期費用無料キャンペーン実施中! ロリポップ!レンタルサーバー |今だけ初期費用無料キャンペーン中!■□━━━━━━━━━━━━━━━━━━━━━■□ロリポップ!では無料独自SSLのリリースを記念し、 【全プラン初期費用無料キャンペーン】を実施中です!■キャンペー…

スプリットレイアウトの作成

スプリットレイアウト(Split Layout)とは スプリットレイアウトとは、中央などの境界線をもとにコンテンツを分割したレイアウトの事です。例えば左右に分割し、画面を大きく使用することで、制約のあるウェブページを有効に使うことができ、また各コンテンツ…

有名フォントの代替フォントとしてGoogleフォントを使う

webnaut.jp

既存サイトのトレース|フルスクリーンレイアウト

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

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

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

Traversingメソッドを使ったタブパネル

Traversingメソッドを利用 Traversingのメリット トラバースを利用することで、イベントが発生した要素に関連した要素を操作する事ができます。ボタンが複数ある場合などは「this」を使う事になりますが、このトラバースを使えば操作したい要素を「this」か…

アニメーションを使ったナビボタン

<body> <header> <h1>ナビボタン</h1> <p class="btn"><span class="icon"></span></p> </header> <nav id="menu"> <ul> <li><a href="#">ホーム</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">お店について</a></li> <li><a href="#">アクセス</a></li> </ul> </nav> </body>

webサイト制作(午後科)が7月10日より開講します

東京池袋のフェリカテクニカルアカデミーでは、只今平成29年7月10日より 開講する「Webサイト制作科」の受講生を募集しています。 600時間を超える講座を無料で受講出来、プロになるために必要なスキルを身につける事が出来ます。また、職業訓練受講給付金と…

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

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

未経験者にとってポートフォリオをどうやって作れば良いか? 非常に悩むところです。 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. 固定表示は見…