2024-04-18

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

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

Vertical Timeline

さらにCodyHouse Framework 本体のデータも必要なのでgithubからダウンロードしておきましょう。

<div class="cd-timeline js-cd-timeline">
<div class="container max-width-lg cd-timeline__container">


<div class="cd-timeline__block">
<div class="cd-timeline__img cd-timeline__img--picture">
<img src="img/cd-icon-picture.svg" alt="Picture">
</div> <!-- cd-timeline__img -->

<div class="cd-timeline__content text-component">
<h2>Title of section 1</h2>
<p class="color-contrast-medium"></p>
<div class="flex justify-between items-center">
<span class="cd-timeline__date">2019/10</span>
</div>
</div> <!-- cd-timeline__content -->
</div> <!-- cd-timeline__block -->




<div class="cd-timeline__block">
<div class="cd-timeline__img cd-timeline__img--picture">
<img src="img/cd-icon-picture.svg" alt="Picture">
</div> <!-- cd-timeline__img -->

<div class="cd-timeline__content text-component">
<h2>Title of section 2</h2>
<p class="color-contrast-medium"></p>
<div class="flex justify-between items-center">
<span class="cd-timeline__date">2020/03</span>
</div>
</div> <!-- cd-timeline__content -->
</div> <!-- cd-timeline__block -->


</div><!-- container -->
</div><!-- cd-timeline -->

その他のタイムライン

https://codepen.io/paulhbarker/pen/apvGdv

https://codepen.io/cjl750/pen/mXbMyo

https://codepen.io/viktorjs/pen/KQZYjo

https://codepen.io/bcarvalho/pen/RZqmZX

https://codepen.io/carrrter/pen/ELLmyX

タイムラインインフォグラフィック

www.edrawsoft.com

baigie.me

2024-04-16

要素が画面に表示されたらカーテンが開くアニメーション

jQuery JavaScript

cgworks.jp

要素が画面に表示されたらその要素にクラス名をaddするというアニメーションです。
ここで重要なのはどうしたら要素が画面に表示するタイミングを取得出来るかです。要素が画面に表示するタイミングを取得には以下の4つの値が必要です。

自分のスクロール量
:画面トップから対象要素のトップまで位置
:画面の高さ
:対象要素の高さ

まず、1と2を使って自身のスクロール量と対象要素の位置が同じになったタイミング（要素が画面の上端に到達したら）でaddClassします。
この時の計算式は1 = 2になります

さらに3の値を使って、addClassするタイミングを1画面分下にします。
1 = 2-3

最後に4の値を使って今度は逆に要素の高さ分addClassするタイミングを上にします。
1 = 2-3+4

さらに上記の式を応用して、要素が画面の中央に来たらaddClassというのも可能です。
その場合には対象要素の半分の高さと画面の半分の高さが必要になります。

1 = 2 - 3/2(1画面分の半分の値) + 4/2(対象要素の高さの半分の値)

jquery

$(function(){
$(window).on('scroll resize',function(){
let h =$('p').outerHeight();//対象要素の高さ

$('p').each(function(){
var elmTop=$(this).offset().top + 200;//画面topから対象要素のtopまでの距離
var winHeight=$(window).height();//1画面分の高さ
var scrTop=$(window).scrollTop();//自分がスクロールした量


//自分のスクロール量>対象要素の位置-1画面分+要素の高さ
if(scrTop > elmTop - winHeight + h){
$(this).addClass('curtain');
}else{
$(this).removeClass('curtain');
}

});
});
});

www.mgtnsn.com

2024-04-16

jQueryでのeach()メソッド

jQuery

jQueryで複数のオブジェクトに対して繰り返し処理を行う場合は、each() メソッドを使用します。

まとめて処理されるパターン

<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script>
$(function(){
alert($('li').text());
});
</script>

jQuery.each() の使い方

複数あるli要素に対して1回1回繰り返しを行う場合は、以下のように記述します。

<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>



<script>
$(function(){
 $('li').each(function(){
        alert($(this).text());
    }); 
});
</script>

2024-04-16

2023年現在のcssが解る「State of CSS」

2023.stateofcss.com

ユーザーのアンケート結果からその年のCSSの流行りや動向がわかるThe State of CSS というサイトの中で、今後さらに利用頻度が増していくであろう、新しいプロパティをいくつか試してみましょう。
ただ、新しいプロパティはブラウザごとに対応状況が違うので、必ずcan I use 等で対応状況を確認しましょう。

2024-04-16

自身のスキルを説明する

ポートフォリオ制作

自身のスキルを他者に説明する事は、そのスキルを身に付けるのと同じくらい重要であり、意味のある事です。
「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レイアウトを使う事でｚ軸を考慮し要素を重ねる、立体的なレイアウトも可能です。

様々な単位

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

webサイト制作の勉強｜2023年11月クラス用ブログ

ファリカテクニカルアカデミーのwebサイト制作科の授業解説ブログです。フェリカテクニカルアカデミーは池袋にある求職者支援訓練の学校です。

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

Vertical Timeline

その他のタイムライン

タイムラインインフォグラフィック

要素が画面に表示されたらカーテンが開くアニメーション

jQueryでのeach()メソッド

まとめて処理されるパターン

jQuery.each() の使い方

2023年現在のcssが解る「State of CSS」

自身のスキルを説明する

html

css

flexboxやgridレイアウト

様々な単位

自由度の高い画像表示

主要なブラウザ対応

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

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

コンポーネント指向

SVG

Javascript/jQuery

PHP

WordPress

photoshop

figma

SASS

Git