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

ポートフォリオ制作

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


Vertical Timeline

codyhouse.co



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

github.com




 

<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



 

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

www.edrawsoft.com




baigie.me



baigie.me

 

新しいcssを使ってみる

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


backdrop-filter

backdrop-filterは要素の背景をぼかす事が出来ます。filterプロパティと似ていますが、filterは適用した要素自体がボケますが、backdrop-filterは適用した要素の背後の領域の色味やぼけ具合が変化します。なので、基本的にはRBGAとセットで使う事がほとんどです。

使用例

monomode.co.jp


 

対応ブラウザ状況

Edge：OK
Firefox：要設定変更
Chrome：OK
Safari：要ベンダープレフィックス



scroll-snap

scroll-snapを使うと、画面をスクロールしたときに特定の画面領域で止まるように制御できます。縦スクロールだけでなく横スクロールにも対応しています。

対応ブラウザ

scroll-snapはすべてのモダンブラウザで対応しています。


alvarotrigo.com

 

aspect-ratio

例えば、要素の幅に対してアスペクト比を使って高さを設定したい場合、今までは1:1ならpadding-top: 100%、16:9ならpadding-top: 56.25%というようにpaddingを使う方法が一般的でした。その計算や記述が不要になり、CSSで基準のwidthを指定し、aspect-ratioに比率を指定するだけでheightが自動的に算出され、アスペクト比を保つことができます。


 

 


 

対応ブラウザ状況

Edge：OK
Firefox：OK
Chrome：OK
Safari：OK

主要ブラウザーが全て対応しているので、今後は積極的に使っていきましょう。


2020.stateofcss.com


www.mitsue.co.jp




 

新しいセレクタ

  • セレクターリストをまとめて指定出来る :is()擬似クラス
  • 指定したセレクタ以外を指定出来る :not()擬似クラス

htaccessを使った動的配信

felica29.starfree.jp

 

 

「.htaccessファイル」を使った動的配信

動的な配信  |  検索セントラル  |  Google Developers



スマートフォン利用者を自動的に「スマートフォン版サイト」へ誘導できるよう、「アクセス者の端末に応じて自動でアクセス先を振り分ける機能」を作ってみましょう。この授業では「.htaccessファイル」を使って、サーバ側で自動振り分けする方法をやってみます。

まずは「.htaccessファイル」を作成します。この際、ローカルサイドで「.htaccessファイル」を作成すると、不可視ファイルの設定などで問題が起こりやすいので、一旦「htaccess.txtファイル」として作成し、サーバー側にアップロードしたのちに、「.htaccessファイル」にリネームする方法でやってみます。


今回の自動振り分けは

  1. ウェブサーバが「Apache」
  2. 設定ファイル「.htaccess」の設置が許可されている
  3. mod_rewriteモジュールが利用可能

の条件が必要です。

デモページ

うちのにゃんこ|PCページ




 

.htaccessの記述内容

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile) [NC]
RewriteCond %{QUERY_STRING} !mode=pc
RewriteRule ^$ /cat/sp/ [R,L]

Header set Vary User-Agent
</IfModule>

 

まずはmod_rewriteモジュールが有効な時のみに処理するように分岐させます。

<IfModule mod_rewrite.c>

</IfModule>


次にmod_rewriteモジュールを起動させます。

RewriteEngine On

 

次にRewriteCondを使って、どういう条件でリダイレクトの処理をするかを指定します。

RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC]

HTTP_USER_AGENT」は、アクセス端末の種類を示します。
最後にある [NC] という記述は、「大文字・小文字を区別しない」という意味の指示です実際にユーザエージェント名に含まれる文字列が「android」でも「ANDROID」でも、同じだとみなされます。 つまり、"A-Z" と "a-z" は区別しない。


RewriteCond %{QUERY_STRING} !mode=pc

URLの末尾に「?mode=pc」という文字列が付いていた場合には、スマートフォン用ページに移動させない(リダイレクトしない)ようにする記述です。なお、「mode=pc」という文字列は何でも構いません。「pc-site」や「show-pc-edition」など、何でも好きな文字列を指定できます。


4行目
RewriteRule ^$ /cat/sp/ [R,L]

RewriteRuleを使うことで、指定した規則に沿ってURLを書き換えられます。ここでは、リダイレクトするために利用しています。フラグとして、[R,L] を指定しています。「R」は「リダイレクトする」という意味で、ここでは必ず必要です。「L」は書き換え規則の最終行であることを示しています(これ以降のRewriteRuleは無視されます。ここでは省略しても問題ありません)。



今回の場合は、この .htaccessファイルを設置した場所が http://www.example.com/pc/ だとすると、

スマートフォンでアクセスすると http://www.example.com/pc/sp/ へ移動。
スマートフォン以外でアクセスすると http://www.example.com/pc/ のまま。
スマートフォンでアクセスしても、URLが http://www.example.com/pc/?mode=pc であれば移動しない。




自分のドメインでトップページを表示させたい場合（http://www.example.com）
4行目を以下のように直し、トップページ（PC用のindex.html）と同じ階層にアップロードする。

RewriteRule ^$ /sp/ [R,L]

スマートフォンでアクセスすると http://www.example.com/sp/ へ移動。
スマートフォン以外でアクセスすると http://www.example.com/ のまま。
スマートフォンでアクセスしても、URLが http://www.example.com/?mode=pc であれば移動しない



スマートフォンサイト用データの「index.htmlファイル」のhead内に貼り付ける

rel=”canonicalという属性を使用して、ページの評価やインデックスはデスクトップ用URLに統一するための正規化処理をしましょう。そうすることでミラーサイトのような重複コンテンツ扱いになることを防ぎます。

<link rel="canonical" href="http://○○○○○.com/pc/">
次にPCサイト用データの「index.htmlファイル」のhead内に貼り付ける

rel=”alternate”という属性を使用して、Googlebotにスマートフォン用ページが別で存在することを伝える処理をします。そうするとスマートフォン向けの代替コンテンツがGooglebotに認識され、スマートフォン用ページが別で存在することを伝えることができます。

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://○○○○○.com/cat/sp/">


最後にスマートフォンサイト用の「index.htmlファイル」に「PC版を表示」などのボタンを作り、「.htaccessファイル」が有効になっていても、スマートフォンでPCのデータを表示出来るようにしましょう。

<a href="http://○○○○○/pc/?mode=pc">PC版を表示</a>

最後に必ずモバイルフレンドリーテストを受けて合格するか確認しましょう。

モバイル フレンドリー テスト - Google Search Console




note.mu


受講生の作例
http://miyakojimanosuteki.com/

『Web制作会社年鑑』のフリーダウンロードキャンペーン

毎年恒例の『Web制作会社年鑑2022』のフリーダウンロードキャンペーン。期間限定で無料ダウンロード出来ます。読み物としても面白いし、就活にもめちゃめちゃ役に立つので是非ダウンロードしてみましょう。

今年も『Web制作会社年鑑』のフリーダウンロードキャンペーンを実施します！　現在発売中の書籍『Web制作会社年鑑2022』の電子版（価格：5,280円）を、無料でご提供いたします。期間は2022年12月16日（金）24時までとなります。

 




tsunaweb.book.mynavi.jp