WEBサイト制作の勉強

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

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

Webサイト制作

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'); //------------------------------------------------------------ // 設定エリアここから //-----------------------------…

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

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

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

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

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

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

ガントチャートの作成

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

Webサイトの構成表の作成

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

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

いよいよサイト制作が始まります。 サイト制作のワークフローでまず最初にするべき事はクライアントへのヒアリングです。 ヒアリングで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>…

ヒーローヘッダーを使ったサイト制作(2020年3月クラス)

今回の制作のポイント ヒーローヘッダーを使用したメインビジュアル Movie部分にmp4データを設置 Menu部分にタブパネルを設置(jQuery) Gallery部分にモーダルウィンドウを設置(jQuery) sns部分にtwitter APIを使ってtwitterタイムラインの表示 Access部…

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>

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

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

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)ですが、今でもシングルページを利用したウェブサイト、特にコンテンツの量が豊富…

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

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…