【HTML,CSS】transform について
前回、webページに動きを与えるものとして animation を紹介しましたが、
今回は、同様にwebページに動きを与えるものとして、transform を紹介します。
下記リンクから、ご覧ください。
下の iframe では見つらいので、こちらからどうぞ
別ページで開きます。
「HTML/CSS」に関する記事
【HTML】youtube チャンネル登録ボタンの設置
youtube のチャンネル登録ボタンの設置方法についての備忘録
Google の下記公式ページにアクセスします。
https://developers.google.com/youtube/youtube_subscribe_button
「チャンネル名または ID:」にチャンネルID または アカウントIDを入力します。
※チャンネルID または アカウントIDは、youtubeのメニューの「設定」→「詳細設定」から確認できます。
https://www.youtube.com/account_advanced
チャンネルID または アカウントIDを入力すると、「プレビュー」と「コード」が更新されます。
コードをコピーして、任意の箇所にペーストすればチャンネル登録ボタンが表示されます。
レイアウト、テーマ、チャンネル登録者数の表示を設定することもできます。
【HTML】twitter シェアボタンのカスタマイズ
twitter シェアボタン を設置する時に、投稿する twitter に任意のテキストを挿入するなどのカスタマイズしたときの備忘録。
オリジナルの twitter ボタン の作成
twitter シェアボタンをカスタマイズするには、通常のtwitterサイトからの作成より独自のボタンを作成する。
まずは、ノーマルなtwitter シェアボタンは次のように作成する。
<a class="tw_share" href="http://twitter.com/share" target="_blank"> ツィートする （テキストの代わりに画像を挿入することもできます <img src="画像リンク" alt="画像が表示されなかった場合の代替テキスト" /> ） </a>
CSSで装飾
.tw_share {
font-weight: bold;
padding: .8em 1.6em;
margin: 0.4em;
background-color: #00acee;
color: #fff;
text-decoration: none;
border-style: none;
border-radius: 5px;
}
.tw_share:hover {
opacity: 0.6;
transition: 1.0s ;
color: #fff;
}
次のようなボタンが作成されます。
ツィートする
オリジナル項目をつける
作成した twitter シェアボタンの href のURLの後ろに、次のパラメータを付けて、カスタマイズすることができます。
url：共有したいページのURL
text：ページタイトルなどの共有したい文章
hashtags：設定したいハッシュタグを入れます。#は不要。カンマ区切りで複数設定可能
via：TwitterアカウントIDを設定しておくと、「@◯◯さんから」と表示されます。@は不要
related：フォローを促したいTwitterアカウントのIDを設定。ツイート後に「おすすめユーザー」として表示されます。IDの後にコロン(:)をつなげて説明文を加えることも可
■パラメータを繋げるときは、「＆」で繋ぐ
href=”http://twitter.com/share?url=◯◯&text=◯◯&via=◯◯&hashtags=◯◯
hashtags（ハッシュタグ）を複数設定したいときは、「,」で区切ります。
■スペースや改行を使いたい場合
スペースや改行等の特殊文字を使う場合、URLエンコードで入力します。
スペース：%20
改行：%0a
%：%25
&：%26
■Wordpressで、タイトルやURLを入力するとき
・URL
url=<?php the_permalink(); ?>
・タイトル
text=<?php echo get_the_title(); ?>
■ツイート画面を別ウィンドウに表示して、本場の twitter のようにする
onClick=”window.open(encodeURI(decodeURI(this.href)), ‘tweetwindow’, ‘width=650, height=470, personalbar=0, toolbar=0, scrollbars=1, sizable=1’); return false;”
オリジナルの twitter シェアボタン
上記を使って次のようなボタンが作成できます。
<a class="tw_share" href="https://twitter.com/intent/tweet?url=https://plus1jp.com&text=プラスワンのホームページです。%0a&via=p1tweet1&related=p1tweet1:介護保険業務支援ソフトウェアを作っている会社です&hashtags=プラスワン,介護支援ソフトonclick="window.open(encodeURI(decodeURI(this.href)), 'tweetwindow', 'width=650, height=470, personalbar=0, toolbar=0, scrollbars=1, sizable=1'); return false;" target="_blank" rel="nofollow">結果をシェアする</a>
【HTML/JS】iphoneでvideoが自動再生されない
HTMLのvideoタグで動画を自動再生するとき、iphoneのsafariでは自動再生されなかったので、その時の対応の備忘録
videoタグのvideoを自動再生するとき、autoplay属性を付与する。
<video id="myvideo" src="●●●/×××.mp4" autoplay></video>
ただし、これではiphoneでは自動再生されない。
次の２つの属性を付与する必要がある
・playsinline
ビデオをインラインで再生する。昔は、iOSではインラインで再生されなかったが、インラインで再生できるようになった。自動再生するには、インラインで再生が必須。
・muted
ページ遷移でいきなり音が出るのはユーザビリティが非常に悪いので、音がでないようにしておかなければ自動再生できない仕様となっているらしい。
★→autoplay、playsinline、muted属性３つセットで次のように記述しないと、自動再生されない。
<video id="myvideo" src="●●●/×××.mp4" autoplay muted playsinline></video>
ただし、上記記述をしてもiphoneで自動再生されなかった。
何かしらの影響で、muted属性がうまく認識されなかった可能性があるので、jsで強制的にmuteにしてみたら、自動再生されるようになった。
$(function() {
var video = $('video').get(0);
（または
var video = $('#myvideo')）
video.muted = true;
}
今回は、php を使って場合分けを行い、videoタグをつけていたため、
タイミング的にvideoタグのmuted属性をうまく読み込めなかった可能性がある。
こういった場合は、jsで読み込み完了時に強制的にmutedを付与すれば解決した。
【HTML】target=”_blank”だけだと危ないらしい。
リンクを別タブで開かせたいとき、target=”_blank”だけだと危険らしい という記事。
通常の target=”_blank” だけを使う記述
<a href="リンク先URL" target="_blank">別タブで開く</a>
こちらの通常の記述では、パフォーマンスとセキュリティ上に問題があると Google デベロッパーの記事があった。
https://web.dev/external-anchors-use-rel-noopener/
============================
・他のページは、あなたのページと同じプロセスで実行される場合があります。他のページが多くのJavaScriptを実行している場合、ページのパフォーマンスが低下する可能性があります。
・他のページは window、window.opener プロパティを使用してオブジェクトにアクセスできます。これにより、他のページがページを悪意のある URL にリダイレクトする可能性があります。
============================
改善した記述
target=”_blank” と併用して、rel=”noopener” または rel=”noreferrer” を記述する。
<a href="リンク先URL" target="_blank" rel="noopener">別タブで開く</a> または <a href="リンク先URL" target="_blank" rel="noreferrer">別タブで開く</a>
デモページを見つけたので、こちらを見ると分かりやすい。
https://blog.jxck.io/entries/2016-06-12/noopener.html
実際、wordpress の投稿ページで link を設定すると、この「rel=”noopener”」が記述される
【JavaScript】スクロールで背景をフェードアウト
スクールすると背景をフェードアウトさせる方法を紹介します。
ホームページに使うと、動的な変化でアクセントになり、なかなかクールな雰囲気になります。
まず、CSSでbody要素に背景画像を設定します。
body {
background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), url(./img/src/image.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;
background-position: center top;
color: #fff;
}
- 「background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), url(./img/src/image.png);」で、画像の上に色のフィルターを重ねることができます。（この色のフィルターは、グラデーションをかけることもできますが、今回はグラデーションはなしにしています。） フィルターの透明度は０にします。
- 「background-attachment: fixed;」で、背景画像を固定します。
- 「background-size」「background-position」で、背景画像の大きさ、位置を設定します。
次にJSで、この背景画像の上の色フィルターの透明度を、スクロールにあわせて上げていきます。
var nystories = document.querySelector("p").offsetTop;
window.onscroll = function() {
if (window.pageYOffset > 0) {
var opac = (window.pageYOffset / nystories);
document.body.style.background = "linear-gradient(rgba(255, 255, 255, " + opac + "), rgba(255, 255, 255, " + opac + ")), url(./img/src/image.png) no-repeat";
}
}
- ここでは、一番最初のp要素がウインドウの一番上にきた時に背景画像が消えるように（画像の上の色フィルターの透明度が１になるように）しています。
これで、クールなサイトを作ってみてはいかがでしょうか？
【HTML,CSS】ファビコンを簡単に作成できる無料ツール
やはり、ホームページを作成するとファビコンがあると本格的な感じがしますね。
ファビコンって何？と思う方がいると思いますが、ファビコンとはホームページを開いたときにタブのタイトル名の横にあるアイコンのことです。
このファビコンを簡単に作成できるサイトがありましたので、紹介します。
そのサイトは、favicon.io というサイトになります。
こちらのサイトでは、iPhone,iPadやAndroidでサイトをホーム画面に追加した時に表示されるアイコン（apple-touch-icon(アップルタッチアイコン)）を同時に作成することができます。
少ない手数で、デスクトップ・タブレット・スマホ用の複数のファビコンを一瞬で作ることができる、オンラインツールです。
作成する材料
次の3種類のいずれかから、ファビコンを生成することができます。
・テキストから
・画像から
・絵文字から
作成できるフォーマットとサイズ
次のフォーマットとサイズのものがまとめて作成されてダウンロードすることができます。
・android-chrome-192×192.png
・android-chrome-512×512.png
・apple-touch-icon.png
・favicon-16×16.png
・favicon-32×32.png
・favicon.ico
ファビコンの実装コード
ファビコンの実装コードもサイト内に記載されており、そのまま head 内にコピーすればOKです。
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="manifest" href="/site.webmanifest">
このサイトを使えば、簡単にファビコンが実装できますね。
【HTML,CSS】CSS アニメーションについて
やはり、webコンテンツに動きがあると、人の目を引きますよね。
今回は、そんなwebコンテンツ上でのcssで動かすアニメーションについて
まとめてみました。
上記 iframe では見つらいので、こちらからどうぞ
別ページで開きます。アニメーション後、画面下の ENTER を押してください。（ENTER が見えつらくて、すみません）
【HTML,CSS】重なっている要素の下の要素のクリックイベントを有効にする方法
前回、ウインドウに表示する位置をナビメニュー考慮して下げる方法を紹介したが、それでは padding で隠れてた（下に配置された）要素のクリックイベントが効かなくなったので、それを解決した備忘録。
A要素に「pointer-events: none;」を設定すればOK。
elementA {
pointer-events: none;
}
ただし、今度は逆にA要素に包括されている要素のクリックイベントが発生しなくなるので、A要素内でクリックイベントが必要な要素に「pointer-events: auto;」を設定する必要がある。
pointer-events
auto：
要素は、 pointer-events プロパティが指定されていないときと同様にふるまいます。
none：
要素がポインターイベントの対象になることはありません。
【HTML,CSS】ページ内リンクでのナビメニュー分、表示位置を下げる方法
画面トップにナビメニューを固定する方法をよくみますね。
ナビメニューを画面トップに固定すると、ページ内リンクなどでページ遷移したとき、リンク先を表示したときナビメニュー部分に隠れてしまいますね。
これを回避するには、ナビメニューの高さ分、リンク先の表示位置を下げてあげる必要があります。
js でも css でも可能ですが、今回は css での方法をご紹介いたします。
説明と言っても、設定はいたって簡単で、
リンクさせる要素に対して、padding-left と margin-left を次のように設定してあげるだけです。
（ここでは、画面トップから下げたい長さ（ナビメニューの高さ）を 120px とします。）
elementSelector {
padding-top:120px;
margin-top:-120px;
}
padding で、上部高さ部分をかせいで、margin で実際の高さに戻してあげています。
ここで、注意がいるのは、padding-top を指定しているので、背景などが必要な場合は、もう一つ親の wrap を作成して、そこにリンクを貼るなどのひと手間が必要になります。
※この方法で対応したら、padding-top下の要素のクリックイベントが発生しなくなる不具合で生じたので、その解決法はこちら
【HTML,CSS】IEでflex-boxが効かないとき
昨今、IEをサポートしてないことが多いですが、
（プラスワンもIEについては非サポートです）
稀にIEを使用するケースがあります。
最近も久しぶりにIEを触る機会があり、その時に「display:flex」が効かなくてハマってあせったことがあったので、その時のことをメモ代わりに。
次のようなコードで、
<div class="logo_content"> <h3>■■■■■■■■■■■■■■■</h3> <div class="logo_dark"> <div class="rs_news"> <p>○○○○○○○</p> ・・・ <p>○○○○○○○</p> </div> <div class="rs_news"> <p>○○○○○○○</p> ・・・ <p>○○○○○○○</p> </div> <div class="rs_news"> <p>○○○○○○○</p> ・・・ <p>○○○○○○○</p> </div> </div> </div>
クラス.rs_news を横並びに配置したいので logo_dark に display:flex を設定したが…
.logo_dark {
display : flex;
flex-flow : row wrap;
justify-content : space-around;
align-items : flex-start;
}
chromeなどのモダンブラウザでは、想定どおり横並びで綺麗に配置されたが、
IEでは、うまく表示されない。
調べてみると、親要素である .logo_content の display が block でないと、
flex が、うまく効かないみたいなので、次のようにstyleを設定したら、
IEでも、うまくいった。
.logo_content{
display : block;
}
.logo_dark {
display : flex;
flex-flow : row wrap;
justify-content : space-around;
align-items : flex-start;
}
どうやらIEのバグらしいが、なかなか解決方法が分からず、あせった！
早く、完全にIEに対応しなくて良い日が訪れて欲しい！（笑）
ラスター画像のファイル形式
先のblogで、ラスター画像とベクター画像について説明しました。
ラスター画像には、.jpgと.pngというファイル形式があります。
これらのファイル形式の特徴とどういったときに使用するのかについて説明します。
■jpg
jpgは、Joint Photographic Experts Groupの略であり、画像を圧縮するファイル方式のひとつです。 圧縮率が高く、フルカラー（約1,677万色）の画像を扱えるため、デジカメ写真の記録に使用されることが多いです。
逆に、jpgは色数が少ないものは綺麗に表示できません。例えば、背景が１色で文字がある場合、文字の周囲にノイズが出たりします。
jpgの大きな特徴としては、jpgに変換するたびに画質が劣化してしまうことです。
■png
pngは、Portable Network Graphicsの略であり、画像のフォーマット方式のひとつです。 圧縮をおこなっていないので、基本的に画質が高いです。特に、テキストや線画など色の境界がはっきりした画像に適しています。
pngは、jpgと違い、pngに変換するたびに画質が劣化してしまうことはありません。
また、pngは透過に対応しており、背景を透過させたりすることができます。
■Webで使う場合は、jpgかpngか？
「写真はjpg、ロゴやイラストはpng」
Webに載せる画像は、ファイルサイズが小さい方が良いので、基本的にjpgを使用した方が良いです。
ただ。上記のようにjpgでは、直線や塗りつぶしで構成されている部分が多いイラストやロゴなどはノイズが発生しやすいので、pngを使用します。