WEBサイト制作の勉強

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

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

スマートフォンの場合、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…

作業効率が劇的に上がる! ショートカットキー早見表

作業効率を上げる為にはショートカットキーを覚える事が非常に大事です。 ただ、よく使うショートカットキーは自然と覚えるものの、普段余り使わない物は忘れがちです。その都度調べていてはそれこそ時間のムダになってしまうので、こういった早見表をPCの隣…

GitHubとSourceTreeの導入

Git

Gitとは? Git(ギット)とは、バージョン管理を行うためのツールのことです。複数人でプログラミングやコーディングを行う場合、ソースコードを効率的に管理・運用する必要があります。「誰がどのファイルのどの部分を修正したのか?」や「リリース予定の機…

バナーの制作

Webデザイナーとして任される最初の仕事として代表的なものがバナー広告の制作です。 バナーのサイズ 広告の場合、ある程度はサイズに規定があります。仕事の場合大抵クライアントの方から指定があります。1種類のバナーに対し様々なサイズを用意する場合も…

Positionレイアウト

練習素材 <html lang="ja"><head><meta charset="utf-8"><title>positionとfloatを使ったレイアウト</title><style>html,body,h1,p { margin:0; padding:0;}img { vertical-align:bottom;}body { background:#979797;}header { width:800px; height:120px; margin:100px auto 0; background:#FFFFFF; position:relative;}h…</meta></head></html>

Google画像検索風のjQuery

Google画像検索っぽいスライドにするjQuery(レスポンシブ対応) Googleで画像検索した際に表示される、サムネイルをクリックすると詳細エリアが広がり画像の情報が出てくるやつです。一応、レスポンシブ対応にもなっていますが、しっかり対応させるには画像処…

header部分の制作

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

レスポンシブサイトのナビボタンを画像で作る

前回の授業で作ったギャラリー部分とスライダーにナビゲーションを追加します。 レスポンシブサイトのナビゲーションを画像で作る場合、レスポンシブを加味した画像作りを心がけましょう。 また、今回のナビゲーションボタンの画像はCSSスプライトで作ります…

SEOに適した無限スクロールの制作

SEOに適した無限スクロールの導入 FacebookやTwitter、Pinterestなどのソーシャルメディアサイトが使っている事で一躍有名になった無限スクロール(英: Infinite Scrolling)ですが、今でもシングルページを利用したウェブサイト、特にコンテンツの量が豊富…

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

ここまでで、PC時のレイアウトも含めほぼ完成ですが、今のままだとPC時にもjQueryのアコーディオンパネルが動いてしまうので、if文でウィンドウサイズがスマホサイズの時のみに動くように条件分岐をしてみましょう。 また、スマホの機種によっては、「touchs…

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

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

ウィンドウサイズによって画像を切り替える

レスポンシブサイトでは基本的に画像は可変に設定するべきですが、幅が960pxの時と幅が320pxの時とで同じ画像で良いか、というと必ずしもそうではありません。例えば画像に文章が乗っている場合であれば、なおさらです。 backgroundプロパティであればメディ…

Flexboxの使い方

Flexbox(Flexible Box Layout Module)はCSS3の新しいレイアウトモジュールで、複雑なレイアウトを今までより少ないコードでフレキシブルなボックスを組むことが出来ます。以前からあった技術ですが、各ブラウザーによって書き方が違ったり、仕様が変わった…

ドロワーメニュー

/* ハンバーガーメニュー ---------------------------------------------------------- */ #globalHeader nav { float: right; } #globalHeader nav p#menuToggle { background: -webkit-linear-gradient(top, #eeedf2 1%, #717171 4%, #2b2b2b 84%);/*古い…