WordPressとは?

WordPressとは

wordpressとはヒューストンに住んでいた若者とイギリスに住んでいた若者がインターネットを通じてコラボレーションで開発を進めたオープンソースのプロジェクトです。2003年にリリース。

WordPressとは、オープンソースのブログソフトウェアである。PHPで開発されており、データベース管理システムとしてMySQLを利用している。単なるブログではなくCMSとしてもしばしば利用されている。
WordPressのテンプレートはすべてPHPであるため、PHPとHTMLをある程度知っていれば容易にテンプレートをカスタマイズできる。テンプレートは多くの場合、ヘッダー部とサイドバー部、コンテンツ部、フッター部、に分けて記述され、1ページはそれらの組み合わせで表示される。WordPressでは、PHPテンプレートにスタイルシートを組み合わせたセットをテーマと呼ぶ。多くの無料テーマが、公式サイトのほかサードパーティから提供されている。テーマの中には、ページを構成する要素をメニューから選択できるウイジェットという機能が使えるものがある。

WordPressは圧倒的なシェアを誇るCMS

W3Techsという調査サービスが発表した統計によると、世界中のウェブサイトのうち26.5%はWordPressで作成されているというデータがあります。また、CMSで作られたサイトに限定すると、59.6%と圧倒的なシェアを占めています。


blog-bootcamp.jp


 

CMSとは?

CMSとは、コンテンツ・マネジメント・システムの略で、Webサイトを管理・更新できるシステムのことをいいます。
Webサイトの更新は、テキストや画像の情報だけでなく、HTML(ハイパー テキスト マークアップ ラングエジ)やCSS(カスケーディング スタイル シート)と呼ばれる専門的な知識が必要で、他のページからのリンクを設定するなど、大変手間がかかる作業です。
CMSでは、専門知識が必要な部分は全てシステム側に制御させ、テキストや画像などの情報のみを入れていくことで、簡単にWebサイトを更新することができます。また、サイト内のナビゲーション(左メニューなどのリンク)や、新着情報など、必要なリンクの更新は、自動的に行われます。


簡単にいえばHTMLなどのWeb専門知識がない方でも、簡単にホームページの作成・更新・運営ができるシステムのことです。

studio.design


www.shopify.com










logmi.jp






 

wordpressの運用

この授業では、CMSを簡易的に使用するのでは無く、wordpressを自身でイチから構築する事で、wordpressのシステム部分やデータベースの知識などCMSを運用する為のスキルを身につけて行きます。

wordpressのダウンロード

wordpressオープンソースの為、無料で使用する事が出来ます。使用する際は、必ず公式のWordPress日本語ローカルサイトから最新の日本語版をダウンロードしましょう。



ja.wordpress.org




photoshopvip.net

SEO概論

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

オーガニック検索

オーガニック検索(自然検索 / Organic Search)とは、検索結果画面(SERPs)に表示されるURLのリストのうち、リスティング広告のような広告枠を含まない部分を指します。

リスティング広告

リスティング広告とは、ユーザーが検索したキーワードに応じて検索結果上に表示される広告を指して使われています。この広告は、広告が検索されたキーワードに連動して表示されるため、検索連動型広告とも呼ばれます。

 

https://www.seohacks.net/basic/terms/listing-ads/www.seohacks.net




 

検索エンジン最適化(SEO)スターター ガイド

Googleはサイトの品質の向上を目的とし、SEOの基礎知識を包括的に学びたい人に、ガイドを公表しています。Googleでサイトが自動的に掲載順位 1 位になるための秘訣が紹介されているわけではありませんが、以下に示すおすすめの方法を取り入れると、検索エンジンがコンテンツをクロールしてインデックス登録し、理解するのが容易になるでしょう。
support.google.com



 

description

meta descriptionは、s検索結果でユーザーがクリックするかどうかに大きく影響する要素です。というのも、検索結果に表示されるスニペット(説明文)に使われるからです(クエリによっては使われないこともある)。検索ユーザーが「このページを見てみたい」と思うように、興味や期待をかきたてるmeta descriptionにする事が重要です。

  • SEO上の順位上昇の効果はほとんどない
  • 検索結果上のクリック率には大きく関与する
  • ページ内容を端的にまとめた内容にする
  • 全角でおよそ120文字以内で対策キーワードを含む内容にする
  • 各ページ異なる内容にする

Lighthouse

Lighthouse(ライトハウス)は、Googleが無料で提供しているWebサイトを分析・診断するための、Google Chrome拡張機能です。

search.google.com


blog.microcms.io


 

PageSpeed Insights API

PageSpeed Insights API(PSI)は、モバイル端末向けとパソコン向けの両方のページにおけるパフォーマンスに関するレポートと、そのページを改善する最適化案を提供します。

pagespeed.web.dev





 

Google Search Console

Google Search Console(以前はGoogle web マスターツールという名前でした)という、Googleが無料で提供しているツールで、これをサイトに組み込む事によって、アクセス数や流入キーワード、どれくらいリンクされているかなど、自分のサイトの状況を教えてくれます。また、場合によっては改善点とその解決方法を提示してくれます。
この作業は上位検索をする上では必須と言っても良いと思います。

Google Search Console



bazubu.com


coliss.com


dentsu-ho.com

CMS(コンテンツ・マネジメント・システム)とは

CMSとは?

CMSとは、コンテンツ・マネジメント・システムの略で、Webサイトを管理・更新できるシステムのことをいいます。
Webサイトの更新は、テキストや画像の情報だけでなく、HTMLやCSSと呼ばれるプログラム言語の専門的な知識が必要で、他のページからのリンクを設定するなど、大変手間がかかる作業です。
CMSでは、専門知識が必要な部分は全てシステム側に制御させ、テキストや画像などの情報のみを入れていくことで、簡単にWebサイトを更新することができます。また、サイト内のナビゲーション(左メニューなどのリンク)や、新着情報など、必要なリンクの更新は、自動的に行われます。


簡単にいえばHTMLなどのWeb専門知識が無くても、簡単にホームページの作成・更新・運営ができるシステムのことです。現在、世界のwebサイトの半数以上はこのCMSと呼ばれる方法で制作されていると言われています。その中で圧倒的に使用されているのが「WordPress」です。


WordPressは圧倒的なシェアを誇るCMS



blog-bootcamp.jp




 

wordpressの運用

この授業では、CMSを簡易的に使用するのでは無く、wordpressを自身でイチから構築する事で、wordpressのシステム部分やデータベースの知識などCMSを運用する為のスキルを身につけて行きます。

wordpressのダウンロード

wordpressオープンソースの為、無料で使用する事が出来ます。使用する際は、必ず公式のWordPress日本語ローカルサイトから最新の日本語版をダウンロードしましょう。



ja.wordpress.org




photoshopvip.net

CSS Scroll Snap

 


www.nike.com




以前はjavascript等で制御していたスクロールスナップも現在ではcssのみで簡単に実装出来ます。またflexvw、vhを使う事でレスポンシブにも簡単に対応出来ます。


Y方向にスクロールスナップ

 

 

 

X方向にスクロールスナップ

 

 


 

スクロールの方向とスナップの種類

scroll-snap-type: y mandatory;

ある程度スナップしたら、次のコンテンツに自動でスナップさせる場合は「mandatory」
コンテンツ中間地点にいる場合はその位置で停止するのが「proximity」
親要素に指定します



 

 


 

子要素の停止位置

scroll-snap-align:start;

「start」 エリアの開始位置
「end 」エリアの終わりの位置
「center 」親要素の中央で位置します


子要素のスキップ

scroll-snap-stop:normal;

スクロール速度が早い場合にアイテムをいくつか飛ばしてしまう事があります。その時に、
「normal」いくつかスキップしてしまう(デフォルト)
「always」1つ1つ止まるようになる


scroll-padding

scroll-paddingはショートハンドのプロパティで、paddingと同様に上下左右にスクロールのパディングを親要素に定義します。

scroll-margin

子要素間の余白を使いたい時に指定します。

gap

アイテム同士の横方向と縦方向の間隔をまとめて指定する際に使用します。


coliss.com

ブランチモデル

mainブランチ
メインブランチ。基本的には現在サーバーで運用されているデータ。このブランチに直接コミットはせずに下のdevelopブランチをマージするだけ。

 

backlog.com



developブランチ
開発用メインブランチ。細かい修正がコミットされる

 

featureブランチ
機能追加・改修などを行う作業ブランチ。完了後はdevelopブランチにマージされて、featureブランチは削除される





いきなり、未経験者が3つのブランチを使い分けるのは難しいので、まずはなんでもかんでもmasterブランチにコミットする、1本道のブランチモデルで作業を進め、慣れてきたら、開発開始時点でmasterブランチからdevelopブランチを作成し、作業内容は全て自身の作成したブランチにコミットし、最終的にmasterからマージしましょう。




 

  1. mainブランチのクローンを作成
  2. developブランチを作成しdevelopブランチに移動後プッシュ
  3. developブランチ上で作業を進める
  4. developブランチ上での作業終了後、masterブランチに移動し、developブランチをマージし、プッシュ
  5. マージした不要なブランチを削除

より実践的なブランチモデル

qiita.com



 

エラーが出た時の対処方法

実際にはケース・バイ・ケースで色々な方法がありますが、強制的にローカルデータをプッシュする方法が「git push -f」です。ただこれは言わば歴史を書き換えてしまうので、チームで共有しているブランチで行う時は注意が必要です。

git push -f origin main

自身のスキルを説明する

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

 

note.com

 

 

html

htmlの授業ではHTML Living Standardの仕様に基づき様々な要素の使い方を学びました。HTMLはマークアップ言語であり文書構造を示す物です。header要素やnav要素、section要素といった要素を使用する事で、明示的に文書構造を示すことが出来るようになりました。h1~h6を使用し、適切な見出しの設定を行い、適切なアウトラインの設定が可能になりました。これらはWHATWG(Web Hypertext Application Technology Working Group)の仕様に準拠した形で記述しています。


またHTMLでは以下の項目も学びました。

  • picture要素を使い、画面解像度や画面幅、画像形式等に基づいて、開発者が任意の画像を出し分ける「アートディレクション」が可能。
  • video要素やaudio要素を使用することで、動画データや音声データをシンプルに扱う事が出来る。
  • フォーム関連の新しい属性やautocomplete属性などを使う事で、今までJavaScript等で行う事が一般的だった入力補助や入力チェックなどの機能を簡単に導入でき、短い作業時間でユーザーにとってもEFOを考慮した解り易いフォームを作成する事が出来る。
  • Canvas API を使いパーティクルを取り入れて、ページに華やかな印象を持たせる事が出来る。
  • details要素とsummary要素を使い、アコーディオンパネルの実装が可能。

css

cssの授業ではレスポンシブデザインを中心に学びました。メディアクエリを使う事でPCだけでなくモバイルに対応したサイトを作る事が出来るようになりました。cssの新しい機能を使う事で今までビットマップ画像でしか出来なかったグラデーションやクリッピングcssだけで表現する事が可能になりました。意図的に余白に強弱を付ける、文字のコントラストを数値で確認する、などのアクセシビリティユーザビリティを考慮したページデザインが出来るようになりました。

flexboxやgridレイアウト

flexboxやgridレイアウトを使用する事で容易にマルチデバイスに対応でき、かつ自由度の高いレイアウトが作れるようになりました。それぞれの特性を理解する事でレイアウトによってflexboxやgridを使い分け、場合によっては双方を使用したレイアウトが可能です。
また、positionレイアウトを使う事でz軸を考慮し要素を重ねる、立体的なレイアウトも可能です。

様々な単位

vh、vwや%、remなどを使用する事で、様々なレイアウトをマルチデバイスに対応出来るようになりました。クランプ関数を使う事で指定した最大サイズと最小サイズの間で文字サイズを可変にする事が出来ます。

自由度の高い画像表示

フルードイメージやobject-fitを使用する事で、画像本来のサイズに囚われない自由度の高い画像表示が可能です。さらにaspect-ratioを使う事で画像や動画をアスペクト比ベースで自由にコントロールが可能です。

主要なブラウザ対応

比較的新しいcssブラウザーによっては未対応な物もあるので、「can i use」等のサイトで細かく対応ブラウザーとバージョンをチェックする必要があります。場合によってはベンダープレフィックスを使用して対応させます。

チーム作業を見据えた命名規則

他人が見てもざっくり命名意図がわかる、保守性を考えた命名規則を使用したコーディングが出来ます。

カスタムプロパティを使用したデザイン設計

メインカラーや余白の基準値などを予め変数として保存しておき、必要なところで使用する事で一貫性のあるデザインが可能になります。

コンポーネント指向

汎用的なスタイルと固有のスタイルを明確に分け、汎用的なスタイルは他の箇所でも使いまわせるようにし、拡張性の高いcssの設計が可能です。


SVG

SVG画像を使用する事で、拡大縮小に強く、どのような解像度のデバイスにも対応出来ます。またSVG画像はXML形式で記述されている為CSSで簡単に操作が出来、CSS3のアニメーション機能とも相性が良く、webサイトに簡単にマイクロインタラクションを導入する事が出来ます。
SVGコードを編集し、モーションパスやドローイングアニメーションを作成しました。
さらに、Ajaxを使う事でhtmlファイルにインラインで挿入した冗長なSVGアニメーションの記述を外部ファイル化し、htmlファイルをシンプルにする事が出来ます。

Javascript/jQuery

  • DOMの操作
  • if文、for文といったプログラミングの基本
  • ランダムを使ったおみくじ
  • 確率を細かく管理したガチャシステムの構築
  • Ajaxでのファイル操作
  • clcikイベントやscrollイベントの設定
  • cssのアニメーション機能と連動(ハイブリッドアニメーション)
  • 様々なライブラリーを利用
  • Ajaxを使った無限スクロール

特にAjaxでは読み込むデータを外部ファイル化し、非同期通信する事で必要な物を必要な分だけ必要な時に読み込む、という現在webアプリなどで主流になっているSPA(シングル・ページ・アプリケーション)の元となる考え方を学びました。またFetch APIを使った非同期通信も行いました。

PHP

  • xampp/mampを使った仮想サーバーの構築
  • get/postを使ったデータ通信
  • データベースとの接続およびデータの挿入や検索
  • includeを使ったデータテンプレート化
  • sessionを使ったデータ保存
  • バーチャルホストを設定して、ルートパスを有効にする

WordPress

  • WordPressのオリジナルテーマの作成
  • WordPressを本番環境にデプロイする
  • 投稿データと固定ページデータの使い分け
  • テンプレートタグを使用し、データを動的なデータに置き換える
  • ContactForm 7などのプラグインを使用
  • GitHubを繋げてデプロイ作業を自動化

photoshop

  • アートボードを使用して、カンプやバナーを複数サイズ展開させる
  • アセット機能を使った画像書き出し
  • 調整フィルターを使用した画像補正
  • フィルター機能を使用した画像加工

figma

  • バナー作成
  • ワイヤー・カンプ作成

SASS

  • @useを使ってパーシャルファイルを読み込む
  • 演算をする
  • if文を使う
  • 変数を使う
  • 自作関数の使用
  • @mixinを使ったメディアクエリの設定
  • コンパイラーを使ってcssコンパイルする

Git

  • Gitの基本設定
  • GitHubとの連動(ローカルにクローンを作成)
  • ブランチモデルに沿ったバージョン管理
  • GitHubでissue管理
  • GitHub pagesを使ったホスティング
  • GitHubのaction機能を使ったCI/CD化

 


ferret-plus.com


webliker.info


note.com