WEBサイト制作の勉強

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

フェリカテクニカルアカデミー

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

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

複数ページ構成のサイト制作

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

htmlに動画を埋め込む

www.ditjapan.com jam-cf.com html5からhtmlに直接動画データを埋め込むことが出来るようになりました。 htmlで扱える動画データはmp-4とweb-mの2種類です。 <video src=""></video> html5ではvideoタグを使うことで簡単にページに動画データを埋め込む事が出来ますが、スマートフ…

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

carlphilippebrenner.comtympanus.nethttp://gardenstudio.com.br/gardenstudio.com.brjakearchibald.com SVGとは? SVG【 Scalable Vector Graphics 】とは、XMLベースの2Dベクター画像記述言語。2001年9月にW3C勧告として公開された。 ベクター画像は画像…

フリー素材集

画像編 burst.shopify.com girlydrop.com https://www.pexels.com/ja-jp/ O-DAN (オーダン)- 無料写真素材・フリーフォト検索 stock.adobe.com イラスト編 illust-navi.com www.linustock.com tyoudoii-illust.com loosedrawing.com www.opendoodles.com en…

svgで手書き風のテキストアニメーション

See the Pen svgで手書き風アニメーション by yachin29 (@yachin29) on CodePen. 1.IllustratorでSVG画像を作成 まずはIllustratorでアニメーションで動かしたい文字を書きます。この時、なるべく細い筆記体のフォントを選ぶと良いでしょう。レイヤー名はtex…

cssのセレクタと疑似クラス一覧

webliker.info

1月24日の作業データ(モバイル幅で作成するページ)

作例 felica29.starfree.jp index.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>モバイル幅でページを作成</title> <link rel="stylesheet" href="css/style.css"> </link></meta></meta></meta></head></html>

アコーディオンパネルをhtmlで作成する

以前はjQueryで作るのが一般的でしたが、現在はhtmlのみで作成する事が出来ます。 <details> <summary> <h3>注文した商品はいつ届きますか。</h3> </summary> <div class="answer"> <p>神奈川県の配送センターより出荷し、ご注文日から2、3日前後でお届けいたします。</p> </div> </details> 使用するテキスト 返品・交換はできますか 室内での…

課題の提出先

ここに必要事項を記入して、提出して下さい。 特にURLは間違いの無いように送信する前に必ず確認する癖をつけましょう。 forms.gle

Pinterest風のカラムレイアウトの作成

このカラムレイアウトの一番のメリットは画像をすべて同じ大きさにトリミングする必要が無いことです。 See the Pen css column layout by yachin29 (@yachin29) on CodePen. break-inside: avoid; ボックス途中でのカラムの区切り方法を指定する。avoidにす…

バナーの作成

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

インターネット広告について

Web広告とは、「インターネットの媒体上に掲載される広告」のことです。 広告枠を持つWebサイトや検索エンジンの検索結果ページ、メール、SNSなど、あらゆる媒体に掲載され、web広告やオンライン広告、デジタル広告と呼ばれることもあります。 dentsu-ho.com…

余白の意味

近接の法則 近接の法則は、距離が近いもの同士が同じグループだと考えるという法則です。 それぞれの要素数が異なっていても同じグループと認識します。 適切な余白を設定することでユーザーが情報を適切にグループ分け出来るようします。 bulan.co cssをリ…

reset.cssのスニペット

リセットcssには色々な方法があり、どれが1番優れているかは難しいので、自身の必要な用途に合わせて使い分けましょう。 html{box-sizing:border-box;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:afte…

ヒーローヘッダーを使ったページ制作

要件定義 レストランサイトの作成 ページ構成:シングルページ ページ内容 メインビジュアル(3枚の画像をスライド) ナビゲーションメニュー(pcからハンバーガーメニュー) ロゴ(svg) ニューステキストの差し込み(ajaxを使って外部データを読み込む) …

1月17日の作業データ完成版(Furniture-store)

index.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>家具屋のECサイトの作成</title> <link rel="stylesheet" href="css/style.css"> </link></meta></meta></meta></head></html>

cssプラグインを使ってハンバーガーメニューを作る

プラグインを使う事でハンバーガーメニューを簡単に作る事が出来ます。 jonsuh.com アイコンの切り替えはjQueryでclass「is-active」をトグルさせるだけで良いので自身で記述してしまいましょう。 <p class="hamburger " id="ham-btn"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </p>

モバイル幅でwebサイトを作成する

今ではpcでもspでも最適に表示されるレスポンシブサイトは当たり前で、最近はむしろspでの表示を優先させ、pc時は画面いっぱいの固定背景(多くはbody要素を固定)を置き、モバイル幅の中にコンテンツを入れるようなspファースト、もしくはspオンリーのサイ…

メインビジュアル画像の作成

header画像の作成 photoshopのフィルター機能やレイヤースタイルなどを使い、header画像を作成しましょう。 使用するテキストCafé Italia Melbourne; Café Italia, Carlton; Get Menu, Reviews, Contact, Location, Phone Number, Maps and more for Café It…

Photoshop演習

画像のマスク処理 マスク処理とは、特定の部分のみを表示し、それ以外の部分を表示しないようにする画像処理のことをいいます。 Photoshopには、クリッピングマスクとレイヤーマスクという2つの「マスク機能」があります。この2つのマスク機能を使い分ける…

HTMLの復習

ホテルフェリカ 池袋駅東口より徒歩3分と絶好のロケーション。世界のトップアーティストが数々の公演を繰り広げる「東京芸術劇場」など新しく生まれかわった文化の街池袋、東京の城北地区唯一のグランドホテルです。 シングル・スタンダードルーム 最上階12…

Photoshop 基礎

Photoshopの基本的な使い方 Photoshopで行う作業は大きく別けると以下の3つ 画像を作る。 画像を補正する。 画像を加工する。 ・選択範囲を取る 選択ツール 自動選択ツール マグネット選択ツール などで選択範囲を取る。 微調整はクイックマスクモードで作…

Visual Studio Codeの設定

IDE(統合開発環境)とは IDE (Integrated Development Environment)とは、従来、コンパイラ、テキストエディタ、デバッガなどがばらばらで利用していたものをひとつの対話型操作環境から利用できるようにしたものです。以下からVS Codeをダウンロードします…

Webサイトを見る、知る、そして作る

Webサイトを見る Webの勉強を始めるうえで大事な事はまず数多くのWebサイトを見る事です。 もちろん見ているだけで作れるようにはなりませんが、画家を志している人が名画を見るように、建築家を志している人が建築物を見るように、音楽家を志している人が音…

道具の使い方を覚える

PCの使い方 物を作るうえで、その物を作る為の道具の使い方を覚える、という事が非常に大事になってきます。web制作者にとってパーソナルコンピューター(PC)は料理人にとっての包丁や美容師にとってのハサミと同様に、非常に大事な道具です。 今までのよう…

12月27日作業データ(家具屋のECサイト)

index.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>家具屋のECサイトの作成</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <h1>…</h1></header></body></html>

ポートフォリオの制作

ポートフォリオ制作でまず自身が把握する事は中に入れるコンテンツの分量です。今までの授業で作ったデータをもう一度見直し、手直しする物は手直して、ポートフォリに掲載する物を決めましょう。 次にwebのポートフォリオを何で作るかを決めましょう。選択…

JavaScriptのメソッドの使い方

基本的なメソッドの使い方を覚える window.document(ブラウザーに文字を表示させる) JavaScriptで文字列を表示するには、「window.document.write( )」を使います。 表示したい文字列をシングルコートではさみます。「window.」は省略できます。 window.do…

JavaScriptとは

プログラムとは?いよいよJavaScriptの授業が始まります。人によっては今回のJavaScriptがプログラムに触れる初めての機会になる場合もあります。 プログラムという物を触った事が無い人はまず、「プログラム」という物がどういう物なのか、という事を理解し…