WEBサイト制作の勉強

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

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

2022年1月クラス

SEO概論

SEOとは、”Search Engine Optimization” の略であり、検索エンジン最適化を意味する言葉です。検索結果でWebサイトがより多く露出されるために行う一連の取り組みのことを指します。 オーガニック検索 オーガニック検索(自然検索 / Organic Search)とは、…

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

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

モックアップを使ってみる

Facebookが、誰でも無料で利用可能なApple・Samsung・Google・HTC・Microsoftの各メーカーのスマートフォン・タブレット・スマートウォッチ・スマートTVのモックアップとして使えるビットマップ画像集を公開しています。ファイル形式はPNGとSketchとなってい…

スマホ時にナビゲーションメニューが出ている時はbody要素を固定にする

スマホ時にハンバーガーメニューなどでナビゲーションを表示させた際に、後ろのコンテンツが動かないようにするにはbody要素に「overflow: hidden;」をかけ、固定する必要があります。 ただ、そのままでは場合によってはPC時の時までbody要素が固定になって…

Pinterest風のカラムレイアウトの作成

このカラムレイアウトの一番のメリットは画像をすべて同じ大きさにトリミングする必要が無いことです。 See the Pen css column layout by yachin29 (@yachin29) on CodePen. break-inside: avoid; ボックス途中でのカラムの区切り方法を指定する。avoidにす…

.matchMedia()を使ってハンバーガーメニューを作成する

window.matchMedia window.matchMediaというメソッド使用することでCSS側に記述するブレイクポイントの記述と同じような形でJS側の判定条件を記述する事ができます。 例 1000pxまではjsを有効にさせる $(window).on('load resize', function(){ if(window.ma…

フリー素材集

画像編 burst.shopify.com girlydrop.com https://www.pexels.com/ja-jp/ O-DAN (オーダン)- 無料写真素材・フリーフォト検索 stock.adobe.com イラスト編 illust-navi.com www.linustock.com tyoudoii-illust.com loosedrawing.com www.opendoodles.com en…

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

learndigital.withgoogle.com

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

code-step.com coco-factory.jp

課題3-既存サイトの分析

noteに知見を溜めていましたが、9月からPDFに変えました☺️サイトを分析して、まとめて、考察して深ぼっていくのが大好き。もはや趣味。ちょうど30サイトになったので、統合して1つにまとめました!良ければ見てやってください https://t.co/30CaFZ1l5M pic.…

フルスクリーンナビゲーションの作成

PCレイアウト時にもナビゲーションを隠し、ハンバーガーメニューを付け、全画面で表現をする機会が増えてきました。サイトに合わせた構成をいくつか覚えておきましょう。 webdesignday.jp フルスクリーンナビゲーションのデザイン・ナビのみ・写真付き・検索…

フリー素材を編集してロゴ画像を作成する

ベクター形式のロゴデータであれば、文字などを自由に編集できるので、場合によってはフリー素材などを使って編集してみましょう。 photoshopvip.net https://school.yachin29.com/Vector-Vintage-Logo-Designs.zip

JavaScriptとは

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

2月17日の作業データ

<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> <style> html,body,h1,h2,p{ margin: 0; padding: 0; } img{ vertical-align: bottom; } h1{…</meta></meta></meta></head></html>

複数ページの制作

最近ではシングルページのサイトもよく見かけますが、ほとんどのサイトは複数ページをリンクさせていくという形でこちらの方が一般的です。 複数ページでサイトを作る際に気をつけないといけないのがフォルダー構成です。 developers.google.com 上記の事を…

1月20日の作業データ

<html lang="ja"> <head> <meta charset="utf-8"> <title>余白の設定</title> <style> html,body,h1,h2,p{ margin: 0; padding: 0; } div{ width: 300px; margin: 100px auto; border:1px solid #000;/* 線幅、線の種類、線の色 */ padding: 20px; } h2{ margin-bottom: 20px; border-left: 15px solid #802020; padding-le…</meta></head></html>

表組みの作成

テーブル table要素を使うことで、表を作成することができます。 表内の行とセルは、table要素内に配置するtr要素とtd要素(th要素)で示します。 caption要素は、表のキャプション(タイトルや説明)を表します。table要素=表全体を示す要素です。表の大き…

Photoshop 基礎

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

HTML(Hyper Text Markup Language)基礎

HTMLとは、Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略で、Webページを作るための最も基本的なマークアップ言語のひとつです。 普段、私たちがブラウザで観ているWebページのほとんどが、HTMLで作られています。 もちろ…

Webサイトを見る、知る、そして作る

Webサイトを見る Webの勉強を始めるうえで大事な事はまず数多くのWebサイトを見る事です。 もちろん見ているだけで作れるようにはなりませんが、画家を志している人が名画を見るように、建築家を志している人が建築物を見るように、音楽家を志している人が音…

道具の使い方を覚える

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