WEBサイト制作の勉強

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

20190820001044

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

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

ajaxを使った非同期通信

Ajaxとは「Asynchronous(エイシンクロナス) JavaScript + XML」の略です。簡単に言えばJavaScriptとXMLを使って非同期にサーバとの間の通信を行うことが出来ます。 通常Webページの内容を変更するためには画面遷移やリロードする必要がありますが、ajaxを…

求職者支援訓練 webサイト制作科 2019年10月開講クラスを募集中

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

本庄市の四季の里にあるイタリアンのお店|アペティート

本庄市のイタリアン|アペティート 本庄市の四季の里にあるイタリアンのお店「アペティート」のサイトです。 イタリア家庭料理を提供しています。 appetito.starfree.jp

西伊豆 海鮮 宿 | 御宿 波止場

西伊豆戸田にある海鮮料理が自慢の宿、御宿 波止場苑 西伊豆戸田にある海鮮料理が自慢の宿、御宿 波止場苑です。御宿波止場苑は直ぐ側に海辺がありゆったりとした時間を過ごすことができます。岩風呂・泡風呂の二種類のお風呂に入り海の幸を堪能できる、ここ…

バナーの制作

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

スマートフォンでのナビメニュー

ナビゲーションメニューの押し易さ(使い易さ)というのはページ全体の使い易さに繋がる為、非常に大切です。 PCレイアウトの場合は、ある程度大きい面積の中でホバーアクションと組み合わせる事で、ある程度の解り易さは確保出来ます。 スマホでは制限され…

栄区飯島町の定食屋|つばき食堂

つばき食堂 横浜市栄区飯島町でお昼ご飯(ランチ)、夜ごはんが食べれる定食屋、つばき食堂です。テーブル席、お座敷があり、お子様連れの方もゆっくりくつろげます。ご飯お替り無料で、和食や中華、カレーなどボリュームたっぷりのメニューをご用意しており…

レスポンシブデザイン概論

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

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

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

position:fixedを使ったレイアウト

使用するテキスト Cafe de Felica Home Concept Menu Access Cafe de Felicaは、 食とアートと音楽が交差する空間を創造します。 シェフ・矢島が提供するのは、スペイン料理に「東京」の エッセンスを取り入れたモダンスパニッシュ。 店内は、新進気鋭のアー…

%とvhを使ったレイアウト

index.html <html lang="ja"> <head> <meta charset="utf-8"> <title>フルスクリーンレイアウト</title> <style> html,body,h1,p { margin:0; padding:0; } body { width:100%; height:100vh;/*1画面分の高さ*/ background:url(img/main.jpg) no-repeat center center/cover; background-attachment:fixed;/*背景画像を固定にす</meta></head></html>…

フリー素材を編集してロゴ画像を作成する

ベクター形式のロゴデータであれば、文字などを自由に編集できるので、場合によってはフリー素材などを使って編集してみましょう。 photoshopvip.net

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

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

画像の作成

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

ナビゲーションボタンの作成

<html lang="ja"> <head> <meta charset="utf-8"> <title>ナビゲーションボタンの作成</title> <style> html,body,ul,li { margin:0; padding:0; } ul { list-style:none; } a { text-decoration:none; color:#222; } .g-nav>ul { display:flex; width:800px; margin:50px auto 0; } .g-nav li { width:200px; height:50…</meta></head></html>

HTMLの復習

ホテル・フェリカ池袋 シングル・スタンダードルーム 最上階12階に位置し、「シンプルさの中のさりげない上質感」をコンセプトとした、ゆっくりくつろげるお部屋です。 シングルルームの見取り図 ツイン・スタンダードルーム 上層階に位置しスタイリッシュな…

Photoshopでのマスク処理

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

Photoshop 基礎

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

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

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

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

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

Canvasを使ってグラフが作れる「Chart.js」

canvasとは Canvasとは、ブラウザ上に図を描くために策定された仕様です。これまでHTML上で図を表現するためには、GIFやJPEGといったフォーマットの画像を用意する必要がありました。また、条件に応じて表示する図を変化させたり、アニメーションを実現する…

fullscreen-sliderの実装

GitHub - ykob/fullscreen-slider: This asset controls sections in a page. It resizes sections to fullscreen resolution and moves these individually by wheel/touch events.

必要なスキルセット

現状、web業界では様々な職種・肩書きがあり、場合によってはその会社独自の職種・肩書きなどもありますが、大きく区別すると以下のように別ける事が出来ます。 管理進行系 プロデューサー ディレクター 主な業務 企画立案、予算管理、クライアントとの打ち…

ポートフォリオの作成

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

object-fitを使って動画を要素にはめ込む

object-fitプロパティは、置換要素(img要素やvideo要素など)をボックスにどのようにはめ込むかを指定する際に使用します。 fill 置換要素(img要素やvideo要素など)をボックスサイズに合わせて縦横比を維持しないでリサイズして、全体が見えるようにはめ…

「.htaccessファイル」を使った自動振り分け

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

MySQLが動かない時の対処法

MAMPのMySQLが起動しないときにやること | マテンロワークス

リセットcssのスニペット

/*! * ress.css • v1.2.2 * MIT License * github.com/filipelinhares/ress * 全ての要素にbox-sizing: border-box;. * 全ての背景画像にbackground-repeat: no-repeat. */html{box-sizing:border-box;-webkit-text-size-adjust:100%}*,:after,:before{backg…

スムーススクロール

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