WEBサイト制作の勉強

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

Photoshop 基礎

Photoshopの基本的な使い方 Photoshopで行う作業は大きく別けると以下の3つ 画像を作る。 画像を補正する。 画像を加工する。 ・Photoshopの初期化 目的は、無駄に消費されているメモリの記憶をリセットすること。 アイコンをダブルクリック等で起動。 この…

ボタンの変遷

グラデーションツールを使う前に、なぜわざわざグラデーションツールを使って色を塗るのかを理解しましょう。 グラデーション=光と影 ディスプレイという平面の世界に、立体感や質感を出すために光の当たっている部分とそうでない部分(影の部分)をグラデ…

スプリットレイアウト完成版

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>

スムーススクロール

サイトのトップに戻すだけであれば、以下のようにシンプルな記述で大丈夫です。 $(function() { $("#to_top").on('click', function () { $('html,body').animate({ scrollTop: 0 }, 'swing'); return false; }); }); 複数の場所にスムーススクロールで移動…

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

http://yachin29.webcrow.jp/sprit/ <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…

課題用画像データ

画像素材 http://yachin29.webcrow.jp/test05-img.zip

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

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

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

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

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

webnaut.jp

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

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

Unknown collation: 'utf8mb4_unicode_ci' のエラーの原因

WordPressを仮想サーバーからレンタルサーバー等にデータ移行(デプロイ)する際に Unknown collation: 'utf8mb4_unicode_ci というエラーが出る事があります。 これは仮想サーバーよりレンタルサーバーのデータベースのバージョンが低い場合に出る事があり…

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

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

.htaccessの作成

「.htaccessファイル」を使った自動振り分け スマートフォン利用者を自動的に「スマートフォン版サイト」へ誘導できるよう、「アクセス者の端末に応じて自動でアクセス先を振り分ける機能」を作ってみましょう。この授業では「.htaccessファイル」を使って、…

jQuery.3 では .loadは廃止

2016年6月に「jQuery.3.x」バージョンがリリースされ、現在では、最新版のv3.2.1がリリースされています。 「jQuery.2.x」バージョンから「jQuery.3.x」バージョンへの大きな変更として、 .load .unload .error のイベントが廃止されました。 中でもよく使わ…

SVGを使ったアニメーション

carlphilippebrenner.comtympanus.netgardenstudio.com.br SVGとは? SVG【 Scalable Vector Graphics 】とは、XMLベースの2Dベクター画像記述言語。2001年9月にW3C勧告として公開された。 ベクター画像は画像をビットマップ形式ではなく、線や面などの図形…

星空メッセンジャーササキユウタ

星空メッセンジャー ササキユウタ 星空メッセンジャーササキユウタの星に関する活動と旅の履歴をご覧いただくWebサイトです。星空解説や星空ガイドの活動履歴や、世界一周の旅で撮影した星景写真がご覧いただけます。 http://yuta-sasaki.com/

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

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

CSS3によるアニメーション・animation

CSS3によるアニメーションは大きく分けて、トランジション(transition)とアニメーション(animation)の2つに別ける事が出来ます。CSS3におけるトランジション(transition)とアニメーション(animation)の違い 「transition」 動かすために:hoverなど…

jQuery演習

使用するjQueryメソッド .on() .css() .fadeIn() .fadeOut() 【問01】「変化」ボタンをクリックしたら300pxの正方形であるdiv#boxの背景色が黒色から、赤色に変わるように記述しなさい。 【問02】「変化」ボタンをクリックしたらh2に対して文字色が赤、背景…

商用利用可能なアイコン素材をフリー(無料)でダウンロードできる「ICOOON MONO」

ICOOON MONOとは? 商用利用可能なモノトーンのアイコン素材をフリー(無料)でダウンロードできる素材配布サイトです。『ICOOON MONO』は、WEBデザインやDTPのほか、ビジネスシーンで活用できるアイコン素材をストックしています。 使用条件に違反しない限り…

フルスクリーンレイアウトのレスポンシブデザイン

スマホレイアウト 今まではカラムレイアウトを中心にレスポンシブデザインサイトの制作をして来ましたが、今回は既存のサイトをモデルにした全面レイアウトでのレスポンシブサイトを作っていきましょう。全面レイアウトの場合、そのような考えで画像をサイズ…

css3のfilter機能

css3のfilter機能を使うと今までPhotoshopなどで行っていた画像加工を簡単に加える事が出来ます。 対応ブラウザー 上の図によると IE ✕ FireFox ◯ webkit-系はベンダープレフィックスを入れれば ◯ といった感じです。 使用できる効果使用できる効果は約10 種…

Flexboxの応用

前回の記事でFlexboxの便利さがなんとなく判ったと思います。今回はもう少し具体的な使い方をしていきます。前回の記事 yachin29.hatenablog.com 今回は 高さが分からないフッタを常に最下部に表示 高さが分からない要素を天地左右の中央に配置 Flexboxを使…

レスポンシブに対応したアコーディオンパネル

<body> <div class="seminar toggle"> <h2><a href="#">セミナー<span class="plus-icon close"></span></a></h2> <dl class="informationLink se"> <dt>2017年2月11日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd> <dt>2017年1月19日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd> <dt>2016年12月14日</dt><dd></dd></dl></div></body>

色の組み合わせを人工知能が選んでくれる!

複数の色を組み合わせる場合、バランスが非常に難しく苦戦する人も多いと思います。このツールを使えば、カラーセオリーに基づいた学習型のAIが色の組み合わせをゼロから組み合わせてくれます。また指定色がある場合、その指定色に合った組み合わせを作成す…

jQuery演習問題

【問01】300pxの色違いの2の正方形を、それぞれ「表示1」ボタン、「表示2」ボタンを押したら幅・高さ共に0pxから300pxに表示するよう記述しなさい。1つは「「スローで表示」もう1つは「1秒かけて表示」と表示の仕方をわけて記述しなさい。表示中、ボタ…

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時間を超える講座を無料で受講出来、プロになるために必要なスキルを身につける事が出来ます。また、職業訓練受講給付金と…

PHPでの配列

PHP

配列はJavascriptでも出て来ましたが、まずは配列の特性を復習しましょう。 通常、変数は1つの値しか入れる事が出来ず、新しい値を入れると上書きされてしまいます。一方、配列ではひとつの箱に複数の値を入れることができます。データベースと連動させる事…

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

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

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

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

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

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

ヒーローヘッダーを使ったサイト制作

今回はクライアントワークに向けて、より実践的な内容のシングルページを作成していきます。今回の制作のポイント トップはヒーローヘッダーで複数枚をスライド(フェード)で切り替え ナビゲーションはある程度スクロールしたら固定 SNSの埋め込み googleマ…

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

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

webサイトにGoogleAPIを導入する

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

background-size: の値

background-sizeプロパティは、背景画像のサイズを指定する際に使用します。これまで使ってきたようなピクセルやパーセンテージの他に「contain」「cover」といった値でも設定出来ます。 「contain」 縦横比は保持して、背景領域に収まる最大サイズになるよ…

画像をレスポンシブに対応させる(可変にする)

画像をレスポンシブに対応させる為にはたった2種類のやり方しかありません。img画像であればフルードイメージ化させる。background画像であれば、background-sizeの指定をする。 この2種類の使い方と特徴を覚えれば、画像に関しては問題なくレスポンシブに…

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

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

グリッドレイアウトのレスポンシブ化

グリッドレイアウトはレスポンシブデザインとの親和性が高く、容易にレスポンシブ化出来るため、初心者にとっては良い練習素材になります。 レスポンシブ化するために必要な作業 まずは今回のレイアウトでの必要なブレイクポイントの数とサイズを理解する。…

レスポンシブデザイン基礎1

レスポンシブデザインとは? レスポンシブWebデザイン(Responsive Web Design)とは、PC、タブレット、スマートフォンなど、あらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制作手法です。ブラウザーのスクリーンサイズを基準にCSSでレイア…

レスポンシブデザイン基礎2

レスポンシブWebデザイン(RWD)の制作 レスポンシブWebデザインでは、あらゆるデバイスに対して単一のWebページ(HTML)を使い、スクリーンサイズ(画面幅)を基準にCSSだけを切り替えてレイアウトを調整します。小さいスクリーンに対しては小さいスクリー…

グリッドレイアウト

グリッドレイアウトとはグリッドとは「格子状の」という意味がありますが、画面をいくつかのサイズのブロックで組み合わせ、コンテンツを配置していく画面設計手法のひとつです。元々紙媒体でよく使われたレイアウト方法ですが、Webでもレスポンシブデザイン…

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

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

Googleとアドビ、オープンソースフォント「Noto Serif CJK(源ノ明朝)」をオープンソース化

Googleとアドビシステムズ株式会社は4日、日本語では明朝体にあたる新たなセリフ書体を発表した。Googleは「Noto Serif CJK」、アドビは「源ノ明朝」の名称でオープンソースフォントとして無償で提供する。 Noto Serif CJKは、2014年にリリースされたゴシッ…

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

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

複数ページの作り方

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

slideToggleに合わせてテキストを変更させる

今回は以前作った既存サイト(キリン)の二ユースリリース部分に「もっと見る」ボタンを作り、さらにそのボタンのテキストをslideToggleの動きに合わせて「もっと見る」と「閉じる」に切り替えます。 slideToggleの動きに合わせたスイッチの作成 以前はtoggl…