WEBサイト制作の勉強

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

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

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

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

HTMLの復習

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

Photoshop基礎

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

summary要素の黒い三角形を消す

iOSでsummary要素の黒い三角形を消すには以下のコードを使っていましたが、それでは消えない場合があるので、下のコードに差し替えて下さい。 誤 summary::-webkit-details-marker { display: none; } 正 details summary::-webkit-details-marker, details …

Figmaについて

Figmaとは、ブラウザ上で動作するUI/UXデザインツールです。2016年にリリースされて以降、その使いやすさや豊富な機能から、多くのデザイナーに愛用されています。 Figma の特徴 ブラウザ上で動作する: インストール不要で、どこからでも作業可能です。 リア…

モックアップを使って自身の作品を載せる

www.anthonyboyd.graphics https://photoshopvip.net/freebies/mockupphotoshopvip.net www.youtube.com 自身の制作したサイトをモックアップで見せる Gif画像でアニメーションで見せる chromewebstore.google.com

Cookie(クッキー)を使ってアクセス済みか判別する

Cookie(クッキー)とは? Cookie(クッキー)とは、ホームページを訪問した ユーザーの情報を一時的の保存する仕組み、またはそのデータです。ID、パスワード、メールアドレス、訪問回数などが ユーザー情報として保存されます。これによって再訪問したとき…

ファビコン・タッチアイコンの設定

ファビコンの設定 ブラウザーによって微妙に記述が異なりますが、IE11以上であれば、.icoの場合 <link rel="icon" href="favicon.ico"> .pngの場合 <link rel="icon" href="favicon.png" type="image/png"> でOKです、 サイトのルートディレクトリに「favicon.ico」という名前でファイルを配置しておけば、下層ページでも上記の記述が無くてもファビコン</link></link>…

3月15日の作業データ(レストランサイトの作成)

index.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>レストランサイトの作成</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>…</link></link></meta></meta></head></html>

svgアニメーションの作成

See the Pen q-chan by yachin29 (@yachin29) on CodePen. tympanus.nethttp://gardenstudio.com.br/gardenstudio.com.brjakearchibald.com SVGとは? SVG【 Scalable Vector Graphics 】とは、XMLベースの2Dベクター画像記述言語。2001年9月にW3C勧告として…

3月14日の作業データ

index.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>レストランサイトの作成</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>…</link></link></meta></meta></head></html>

配色のルール

配色には色々なルールがありますが、まずはこの3つを覚えましょう 1、コントラスに気を付ける 2、色数を抑える 3、トーンを合わせる HSBを使った配色 photoshopではRGB以外にもHSBやLabといった数値でも色の調整が出来ます。特にHSBは配色時によく使うので是…

background-attachment

background-attachmentをfixedにすると簡単にパララックス(視差効果)を使ったスクロールが実装出来ます。 ただ、iOSはどういった理由か、この「background-attachment:fixed;」を頑なに対応させない為(ベンダープレフィックスを付けてもダメ)、iOSでは別…

CODEPENを使って自身のコードを掲載させる

https://codepen.io/ CODEPENとは? 「CODEPEN」とは、HTML・CSS・JSなどのソースコードを保存・公開・共有できるWEBサービスです。他の人が作ったソースをその場で編集できたり、プレビューで確認出来、動作確認などにも使えて非常に便利です。ソースをブロ…

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

GoogleのBardを使ってサイトの要件定義を作成する

BardはGoogleが開発した大規模言語生成 AIです。大規模言語モデル(Large Language Models、LLM)とは、非常に巨大なデータセットとディープラーニング技術を用いて構築された言語モデルです。 どういった事が出来るか本人に聞いてみました。 私の名前はBard…

オブジェクトの操作

オブジェクトとは、関連するデータや 機能の集合体です。JavaScriptには多くのオブジェクトが用意されています。これを目的別に使っていきます。 documentオブジェクト(ファイル関連のデータを操作する) windowオブジェクト(ウィンドウ関連のデータを操作…

CSS × jQueryのハイブリッドアニメーション

最近のWebアニメーションはスマホで表示する事も考慮し、動きの軽いアニメーションが求められています。その為には単一のスクリプトではなく複数のスクリプトを合わせる必要があります。 jQueryのアニメーションはカクカクでちょっと重い jQueryの特徴の1つ…

JavaScriptとは

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

ワイヤーフレームの作成

ワイヤーフレームとは「サイトの設計図」です。 サイトを作成する前に「何を・どこに・どのように」画面に配置するかを明らかにする事で、実際の作成作業をスムーズに進める事が出来ます。また複数人で作業する場合やクライアントとデザインイメージを共有す…

webサイトの代表的なレイアウト

レイアウトを考える時に常に独創的でユニークなレイアウトである必要はありません。それどころか訪問者の多いサイトを見れば、多くのサイトで似たようなレイアウトが採用されています。それは偶然でも手抜きでもありません。そこには次のような利点があるの…

レスポンシブ演習

作例 使用テキスト Net Smart よりスマートなインターネットライフを HOME CONCEPT SERVICE ACCESS 必要なものは、ビジネスの価値を届ける>デザインの力。 Net Smartは、ビジネスとユーザーを理解し、関係性を構築するためのストーリーの設計とUXデザインを…

高解像度ディスプレイへの対応

Retinaディスプレイ Retinaディスプレイの特徴は画面解像度の高さにある。iPhone 4の画面サイズは前モデルのiPhone 3GSと同じ3.5インチのままであるが、Retinaディスプレイの搭載によって解像度は320×480ピクセルから640×960ピクセルに、つまり倍になってい…

css animation-timing-functionの違い

animation-timing-functionとは、アニメーションの変化(速度)のスタイルを指定します。 cssのkeyframe animation には非常に多くのtiming-functionが用意されています。ちなみにjQueryでデフォルトで使えるのは2種類です。 それぞれのanimation-timing-funct…

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

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

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

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

バナーの作成

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

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

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

htmlに動画を埋め込む

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