WEBサイト制作の勉強

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

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

Webサイト制作

cssのクラス命名規則

小・中規模でのサイト制作では、それほど明確なcss設計をしなくても問題は起こりませんが、大規模案件になるとhtmlもcssもかなりの量になり、css設計がないと保守性が悪くなってしまったり、意図しないところに影響してしまったりします。また、複数人で制作…

サイト制作における画像の設定

img要素で見せる場合 ページの情報の1部として見せる ・フルードで表示させる場合 (max-width:100%ので原寸より大きくは見せられない、アスペクト比は一定)・object-fitで表示させる場合(IEは未対応) 幅・高さを自由に指定して表示させる事が可能(backg…

シングルページの作成

今回のページに入れるコンテンツ トップにメインビジュアル(スライダーで動かす。object-fitで高さの調整) お知らせ部分をajaxで外部ファイル化 動画(youtubeからデータを持ってくる) ギャラリー部分 SNS Googleカレンダー GoogleMap Googleフォーム(自…

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

Googleフォームに自動返信機能を付けましょう function sendMailGoogleForm() { Logger.log('sendMailGoogleForm() debug start'); //------------------------------------------------------------ // 設定エリアここから //-----------------------------…

CodyHouse Framework を使って簡単にタイムラインを作成する

年表や沿革などで使うタイムラインを作ってみましょう。cssのみで作れるシンプルな物のありますが、今回は「CodyHouse Framework」というフレームワークを使ったアニメーションタイムラインを作成してみます。 Vertical Timeline codyhouse.co使用するファイ…

スクロールイベントとclip-pathを使ったページ作成

http://school.yachin29.com/sprit-mode/ 今回の作成物のポイント ファーストビュー部分はスプリットレイアウト AOSを使ってスクロールアニメーションを導入 clip-pathを使って斜線を入れる ページ内リンクにスムーススクロール シングルページでのカレント…

ガントチャートの作成

クライアントワークが本格的に始まります。 ただ、しばらくは授業と平行でクライアントワークの準備を進めて行くため、どうしても厳しいスケジュールになりがちです。 その為、しっかりとしたスケジュール管理が必要となってきます。 まずはガントチャートを…

クライアントへのヒアリング

いよいよサイト制作が始まります。 サイト制作のワークフローでまず最初にするべき事はクライアントへのヒアリングです。 ヒアリングで1番大事なのはしっかりと意思の疎通が出来ているか、につきます。こちらの状況や目的をしっかりとクライアントに伝え、…

ファビコンの指定2020年版

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

webサイト制作におけるワークフロー

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

Faviconの設定

favicon(ファビコン)は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。favorite icon(フェイバリット・アイコン:お気に入りアイコン)という英語の語句を縮約したも…

新しいスキルを身に着ける

未経験から就職する為に必要なスキルは授業内でやっている事で充分ですが、さらにその先を見据えた場合、学ぶべきスキルはまだまだあります。仕事を始めると日々の仕事に追われ、なかなか新しいスキルを勉強する機会が持てないので、今の内に興味ある事の勉…

ポートフォリオの雛形

今回使用したプラグイン fancyapps.com 作成 http://felica29.starfree.jp/portfolio/ トップページ <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ポートフォリオ</title> <link rel="stylesheet" href="css/style.css"> </link></meta></meta></head></html>

htaccessを使った動的配信

「.htaccessファイル」を使った動的配信 動的な配信 | Google 検索デベロッパー ガイド | Google Developers スマートフォン利用者を自動的に「スマートフォン版サイト」へ誘導できるよう、「アクセス者の端末に応じて自動でアクセス先を振り分ける機能」を…

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

スプリット=分割するデザインレイアウトのことです。画面を縦2つに分割して見せることで左右の対比が生まれます。 「スプリットレイアウト」の中でも、デザイン上のスプリットレイアウトのみのスクロール一体タイプと、CSSで画面半分を固定表示にして、残り…

レスポンシブサイトの制作

今回のレスポンシブサイトの制作ポイント 1、cssファイルは外部リンクでリンクさせ、適切なリセットをかける事 2、webアイコン(Google Fonts)(Font Awesome)を使う事 3、3つあるコンテンツ部分のホバーにアニメーションを追加 使用するテキスト Ristora…

LP(ランディングページ)の作成

ランディングページ(Landing Page)とは本来、訪問者が最初に着地する(land)ページという意味合いでサイトのトップページの事をLPと呼んでいましたが、今ではLPというと「訪問者のアクションを誘導することに特化した縦長のレイアウトのページ」のことを…

pushStateとajaxを使ってSEOに強い無限スクロールページを作成する

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

既存サイトのトレース|ポカリスエット

index.html <html lang="ja"> <head> <meta charset="utf-8"> <title>既存サイトのトレース|ポカリスエット</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/slick.css"> <link rel="stylesheet" href="css/slick-theme.css">…</link></link></link></meta></meta></head></html>

1つのプラグインでフェードとカルーセルの動きを実装する

使用するプラグインはkenwheeler.github.io 今回はページ上部に「fade」 ページ中央部にカルーセル(pc時は3枚表示、sp時は1枚表示)を実装 <script> $(document).on('ready', function() { //フェード $('.fade').slick({ dots: true, infinite: true, speed: 500, …

cssのみで作るドロップダウンメニュー

コーポレートサイトなど情報量が多いサイトでは、リンク先のページに飛んでからさらにそのページの中から目当てのコンテンツを探さなければならない、といった手間がかかります。 メガドロップダウンメニューであれば、リンク先のページの中の目当てのコンテ…

スクロールアニメーションが簡単に実装できる「Animate on scroll library」

スクロールに合わせて「Fade」「Flip」「slide」「Zoom」の4種類のアニメーションを簡単に実装出来、「duration」などの細かい設定も行えます。michalsnik.github.io index.html <html lang="ja"> <head> <meta charset="utf-8"> <title>AOSを実装してみる</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style.css"> </link></meta></meta></head></html>

ワイヤーフレームの作成

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

既存サイトをトレース|LUMINE 会社情報

既存のサイトを模写するというのは昔からデザイン上達のコツとしてよく取り上げられます。デザインを細かく観察して自分で再現してみることで、自身のパターンを増やすことが出来ます。またトレースで覚えたパターンを実践でも活かしてみましょう。www.lumin…

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

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

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

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

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

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

webサイトにGoogleAPIを導入する

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

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

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

ワイヤーフレーム の作成

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