WEBサイト制作の勉強

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

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

Webサイト制作

モダンリセット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…

Faviconの設定

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

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

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

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

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

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

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

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

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

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

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

htaccessを使った動的配信

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

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

ワイヤーフレーム の作成

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

この10年間でwebサイトがどのように変化したか

この10年でwebサイトがどの様に変わったか、が一目でわかる非常に興味深いサイトです。 10年前というとスマートフォンの普及も一般的では無く、多くのwebサイトはPCをターゲットにしていました。 なので、リンクの多くはテキストリンクだったり、リンク同士…

第6回実技試験|レスポンシブサイトの制作

モバイルファーストでレスポンシブサイトにする事(ブレイクポイントは自由) ロゴはsvg形式にする事 flexboxを1箇所以上で使用する事 .containerの幅には最大値を指定する事 img要素をフルード化する事 画像のホバーアニメーションにcssのfilter機能を使う…

Instagram API を使ってインスタグラムの画像をサイトに表示させる

最近はwebサイト上にインスタグラムに投稿した画像を表示しているサイトも珍しくなくなってきました。 ここではInstagram API を使ってインスタグラムのデータをhtmlファイルに埋め込む方法を説明していきます。 Instagram APIを使って出来る事・出来ない事 …

「クックパッドを支える仕組み」

株式会社クックパッドの総合職・デザイナー向け技術基礎研修で使った資料がネット上で公開されています。webの基礎知識が非常に解り易くまとまっているので、web初学者は一度目を通す事をお勧めします。 speakerdeck.com

bxsliderとハンバーガーメニューの実装

index.html <html lang="ja"> <head> <meta charset="utf-8"> <title>bxsliderの導入</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/jquery.bxslider.css"> <script src="js/jquery.min.js"></script> </link></link></meta></meta></head></html>

Photoshopによるスライスとコーディング

既存のサイトを真似してコーディングしてみるのは、非常に良い練習なので、積極的にやりましょう。ただ、練習に向いているサイトとそうでないサイトがあるので、注意が必要です。 作業手順 1. 既存のサイトのキャプチャーを撮る 2. Photoshopで開き、各画像…

広告関係4団体が「広告制作取引『受発注』ガイドライン」を策定

広告関係4団体「新しい働き方」円卓会議、広告制作取引「受発注」ガイドラインを策定。 広告業務に携わる関係者全員がこれまでの働き方を見直し、長時間労働を抑制するための取り組みとして、公益社団法人日本アドバタイザーズ協会、一般社団法人日本広告業…

モバイル・ファースト・インデックス、始めました!

3月27日、Googleが検索結果に使用するインデックスを今までのデスクトップ版のコンテンツから、モバイル版のページを使用する方法に切り替えました。 これまで、Google のクロール、インデックス、ランキング システムでは、主にデスクトップ版のコンテンツ…