WEBサイト制作の勉強

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

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

2021年11月クラス

タイムラインをサイトに埋め込む

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

Traversingメソッドを使ったタブパネルの作成

Traversingメソッドを利用 Traversingのメリット トラバースを利用することで、イベントが発生した要素に関連した要素を操作する事ができます。ボタンが複数ある場合などは「this」を使う事になりますが、このトラバースを使えば操作したい要素を「this」か…

自身のスキルを丁寧に説明する

自身のスキルを他者に説明する事は、そのスキルを身に付けるのと同じくらい重要であり、意味のある事です。 「htmlとcssが出来ます」だけでは無く、この6ヶ月で具体的にどういう事を学んだか、どういう事が出来るようになったか、をしっかりと説明しましょう…

photoshopでまず覚えたい基本操作

Photoshopには非常に多くの機能があるので目的から逆算して学習した方がとても効率的です。自身で以下の機能が使えるか確認してみましょう。 Photoshopをゼロから学ぶ人を対象に「これだけできればOK!」という基礎リストをまとめてみました。Photoshopには…

カラムレイアウトを使ったギャラリーページ

See the Pen css column layout by yachin29 (@yachin29) on CodePen.

SVGを使ったアニメーション

carlphilippebrenner.comtympanus.netgardenstudio.com.brjakearchibald.com SVGとは? SVG【 Scalable Vector Graphics 】とは、XMLベースの2Dベクター画像記述言語。2001年9月にW3C勧告として公開された。 ベクター画像は画像をビットマップ形式ではなく、…

cssプラグインを使ってハンバーガーメニューを作る

プラグインを使う事でハンバーガーメニューを簡単に作る事が出来ます。 jonsuh.com アイコンの切り替えはjQueryでclass「is-active」をトグルさせるだけで良いので自身で記述してしまいましょう。 <p class="hamburger " id="btn"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </p>

reset.cssのスニペット

リセットcssには色々な方法があり、どれが1番優れているかは難しいので、自身の必要な用途に合わせて使い分けましょう。 html{box-sizing:border-box;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:afte…

ポートフォリオの制作

ポートフォリオ制作でまず自身が把握する事は中に入れるコンテンツの分量です。今までの授業で作ったデータをもう一度見直し、手直しする物は手直して、ポートフォリに掲載する物を決めましょう。 次にwebのポートフォリオを何で作るかを決めましょう。選択…

縦書きの設定

「webは横書きが当たり前」そんな常識は変化しつつあります。 実はwebにおける縦書きの取り組みは、Internet Explorer5.5(2000年)が独自に実装していましたが、他のブラウザーでは実装されていませんでした。CSS3の策定を機会に最新の主要なウェブブラウザは…

12月28日の作業コード

index.html <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>CAFE de FELICA</title> <link rel="preconnect" href="https://fonts.googleapis.com"> </link></meta></meta></meta></head></html>

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

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

冬休みの課題2-Googleデジタルワークショップを修了する

learndigital.withgoogle.com

冬休みの課題1-「Codestep」や「動くWebデザイン アイディア帳」でコーディング練習

code-step.com coco-factory.jp

ヒーローヘッダー

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

タッチアイコンの設定方法

スマートフォンの場合、PCのようにブラウザーから検索してWebサイトに行くよりも、ホーム画面に登録してあるアプリからワンタッチでWebサイトなりWebサービスを利用するケースがほとんどです。 なので、スマートフォンサイトを制作する場合には必ずスマート…

javascriptによるonclickイベント

<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>mouse-overイベント2</title> <style> html,body,h1,p{ margin: 0; padding: 0; } img{ vertical-align: bottom; } h…</meta></meta></meta></head></html>

JavaScriptとは

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

jQueryとは

jQuery(ジェイクエリー)とは、ウェブブラウザー用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリである。ジョン・レシグが、2006年1月にリリースした。様々な場面で活用されており、JavaScriptライブラリ…

レスポンシブ演習

作例 PCレイアウト SPレイアウト cssは外部参照で記述すること cssに適切なリセットをかける事 767px以下はモバイルレイアウトになるようにメディアクエリーを設定する flexプロパティを使ってコンテンツを横に並べる 画像を自身で用意しトリミングしフルー…

複数ページの作り方

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

PCの使い方

まず最初にパソコンで覚える事はファイルとフォルダーの作成、及び使い方です。 PCを使って働くのであれば、この記事の内容は必ず理解しなければいけない事です。とにかく読んで、意味の解らない箇所や語句を書き出してみましょう。 次に解らない箇所・語句…

Photoshop 基礎

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

道具の使い方を覚える

PCの使い方 物を作るうえで、その物を作る為の道具の使い方を覚える、という事が非常に大事になってきます。web制作者にとってパーソナルコンピューター(PC)は料理人にとっての包丁や美容師にとってのハサミと同様に、非常に大事な道具です。 今までのよう…