WEBサイト制作の勉強

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

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

Webサイト制作

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

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

3月23日のデータ

<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"> </head> <body> <header> </header></body></html>

ヒーローヘッダー

最近、よく見かける「1枚画像」を画面全体に表示させているようなフルスクリーンレイアウト。 「ヒーローヘッダー」と呼ばれています。 ヒーローヘッダー(Hero Header)とは、ウェブサイトのファーストビューに全画面の画像を使用するなど、巨大なイメージ…

ヒーローヘッダーを使ったサイト制作

今回の制作のポイント メインビジュアルはヒーローヘッダーでbxsliderを使ってフェードで見せる お知らせ部分はajaxを使って外部データを読み込む Movie部分にmp4データを設置 Menu部分にモーダルウィンドを設置(jQuery) Access部分にGoogleMapを設置 Form…

Webサイトの構成表の作成

Webサイトの構成を明確にする為に必ず、Webサイト構成表を作成しましょう。 「サイト全体で何ページになるか?」「どのページにどんな内容のコンテツを入れるか?」「どういう順番でコンテンツを並べたら、ユーザーが見やすい・解りやすいか?」 などは、必…

htaccessを使った動的配信

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

LPの作成・実践編

フェリカテクニカルアカデミーwebサイト制作科の生徒募集用のランディングページの作成 ゴール フェリカ公式サイトの見学会申し込みページへのリンクボタンをクリックしてもらう URL:http://www.felica.info/kikin/web/web_form/index.shtml ポイント ユーザ…

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

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

フィルタリングやソートが出来る高機能プラグイン「muuri.js」

フィルター機能、ソート機能が付いて可変グリッドレイアウトも実現出来さらにレスポンシブにも対応した、無料で商用利用も可能な Javascriptプラグインの「muuri.js」 haltu.github.io 付いている機能 フィルター機能 ソート機能 検索機能 Masonryレイアウト…

スニペットを使ってホバーエフェクトをかける

スニペットを使ってホバーにエフェクトをつけましょう。 photoshopvip.net

cssのクラス命名規則

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

Googleフォームに自作のCSSを当ててカスタマイズする

以前授業でも使ったGoogleフォームですが、設置も簡単でスプレットシートと紐付けする事でお問い合わせ内容をデータベース化する事も簡単に出来てしまう、とても便利なツールですが、唯一の問題が「自分で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 スマートフォン利用者を自動的に「スマートフォン版サイト」へ誘導できるよう、「アクセス者の端末に応じて自動でアクセス先を振り分ける機能」を…

モダンリセットCSSの「ress.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…

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

スプリット=分割するデザインレイアウトのことです。画面を縦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)ですが、今でもシングルページを利用したウェブサイト、特にコンテンツの量が豊富…