ページが見つかりませんでした https://black-flag.net Mon, 25 Mar 2024 12:18:51 +0000 ja hourly 1 https://wordpress.org/?v=5.8.9 CSSのコピペで吹き出し(ツールチップ)を簡単に実装できる「CSS Generators: Tooltips & Speech Bubbles」 https://black-flag.net/css/20240326-8120.html https://black-flag.net/css/20240326-8120.html#respond Tue, 26 Mar 2024 00:20:21 +0000 https://black-flag.net/?p=8120 これまでもボタンやローディングといったパーツをHTMLやCSSのコピペで簡単に実装できるギャラリーサイトは紹介してきましたが、吹き出しやツールチップに特化したまとめ「CSS Generators: Tooltips & Speech Bubbles」が覚えておくと活用できそうだったのでメモ書きとして紹介します。

CSS Generators: Tooltips & Speech Bubbles


CSS Generators: Tooltips & Speech Bubbles

このサイトではCSSで実装できる吹き出しデザインが100種類紹介されています。
※2024年3月26日現在

実装方法はとても簡単でHTMLには「.tooltip」のクラスを付けたdiv要素を一つ用意します。
※クラス名や対象のブロック要素を変えることも可能です。

<div class="tooltip"></div>

ページ上にあるデザインから使用したいものを選び、吹き出しをクリックすると実装するためのCSSがコピーされるので、上記のブロック要素に対して指定するようにします。

選択エリアにスライダーが付いているものは吹き出しの三角の位置を自由に動かせるようにもなっています。

試しに実装してみたサンプルは以下です。

See the Pen
CSS Tooltips [1]
by BLACKFLAG (@BlackFlag)
on CodePen.

See the Pen
CSS Tooltips [2]
by BLACKFLAG (@BlackFlag)
on CodePen.

好みの吹き出しを選んでしまえば、1分もかからずに実装することができるのでとても便利です。

100種類ものデザインが用意されているので、吹き出しが必要になった際にはまずこのサイトを見にくれば事足りそうな気がします。

CSSで吹き出しが必要になった際にぜひ。。。

]]>
https://black-flag.net/css/20240326-8120.html/feed 0
HTMLのsandbox属性でGoogleマップやYouTubeをセキュリティ制限をかけて埋め込む方法 https://black-flag.net/html/20231219-8100.html https://black-flag.net/html/20231219-8100.html#respond Tue, 19 Dec 2023 00:20:16 +0000 https://black-flag.net/?p=8100 GoogleマップやYouTubeの埋め込みなど、外部サービスをiframeで読み込んでいる場合、脆弱性診断でそれらが引っ掛かることがあります。

各サービスからコピーできる埋め込みソースでは脆弱性の対策ができてないことが多く、セキュリティ対策としてsandbox属性を追記する必要があります。

脆弱性の対応として、GoogleマップとYouTubeの埋め込みでsandbox属性を付ける機会があったので、必要な属性値ふくめ備忘録として紹介してみます。

sandbox属性

sandbox属性は、iframeなどHTMLの埋め込み要素にセキュリティ制限をかけることができる属性です。

値を空の状態で指定すると、すべての制限を適用します。

<iframe src="〇〇〇〇" sandbox></iframe>

値を空にしてsandbox属性を追加すると、様々なセキュリティの制限が掛かることになり、だいたいのサービスは正常に表示されなくなってしまうので、属性値を使って必要なものを許可する必要があります。

sandbox属性では必要な制限のみ許可することができるようになっていて、以下のような属性値を指定してコントロールします。

allow-forms フォームの送信を許可します。
allow-modals モーダルダイアログの表示を許可します。
allow-downloads ダウンロードを許可します。
allow-scripts スクリプトの実行を許可します。
allow-pointer-lock ポインターロック API の使用を許可します。
allow-orientation-lock 画面の向きをロックできるようにします。
allow-presentation プレゼンテーションリクエストを許可します。
allow-popups ポップアップウィンドウの表示を許可します。
allow-popups-to-escape-sandbox ポップアップウィンドウがサンドボックスを抜け出せるようにします。
allow-same-origin 同一オリジンからのリクエストを許可します。
allow-top-navigation トップレベルナビゲーションを許可します。
allow-top-navigation-by-user-activation ユーザーアクティベーションによるトップレベルナビゲーションを許可します。
allow-downloads-without-user-activation ユーザーアクティベーションなしにダウンロードを許可します。
allow-storage-access-by-user-activation ユーザーアクション(クリックなど)によって localStorage や sessionStorage にアクセスできるようにします。
allow-top-navigation-to-custom-protocols カスタムプロトコルに対するトップレベルナビゲーションを許可します。

CSP: sandbox – HTTP | MDN

各属性値は半角スペースで区切って複数指定することが可能です。

Googleマップ埋め込みで制限許可が必要な属性値

Googleマップの埋め込みコードのiframeにsandbox属性を値を空の状態で指定すると、Googleマップは表示されなくなってしまいます。

マップを表示する許可や、マップ上のリンクをクリックする許可をする必要があり、半角スペースで区切って複数の属性値を指定する必要があります。

Googleマップを埋め込む際にsandbox属性で必要な値は下記の4つです。

  • ・allow-scripts:スクリプトの実行を許可します。
  • ・allow-popups:ポップアップウィンドウの表示を許可します。
  • ・allow-popups-to-escape-sandbox:ポップアップウィンドウがサンドボックスを抜け出せるようにします。
  • ・allow-same-origin:同一オリジンからのリクエストを許可します。

これらを繋げて指定すると以下のようになります。

<iframe src="〇〇〇〇" sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox allow-same-origin"></iframe>

YouTube動画埋め込みで制限許可が必要な属性値

YouTubeの埋め込みコードのiframeもsandbox属性を値を空の状態で指定すると、YouTube埋め込み動画は表示されなくなってしまいます。

Googleマップ同様に、動画を表示する許可や、操作ボタンなどをクリックする許可について、属性値を複数指定する必要がありますが、許可する制限の内容が変わります。

YouTubeを埋め込む際にsandbox属性で必要な値は下記の5つです。

  • ・allow-scripts:スクリプトの実行を許可します。
  • ・allow-popups:ポップアップウィンドウの表示を許可します。
  • ・allow-popups-to-escape-sandbox:ポップアップウィンドウがサンドボックスを抜け出せるようにします。
  • ・allow-same-origin:同一オリジンからのリクエストを許可します。
  • ・allow-top-navigation:トップレベルナビゲーションを許可します。

これらを繋げて指定すると以下のようになります。

<iframe src="〇〇〇〇" sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-top-navigation"></iframe>

ほかの外部サービスやツールをiframeで埋め込む際も、使用するもの毎に許可する属性値の種類が変わります。

脆弱性診断をする予定のないサイトでも、ページ上にGoogleマップやYouTubeなどの外部サービスをiframeで埋め込む場合は、基本的にsandbox属性を付けるようにしておくのも良いかと思います。

sandbox属性を設定する際にぜひ。。。

]]>
https://black-flag.net/html/20231219-8100.html/feed 0
様々なボタンデザインをHTMLとCSSのコピペで簡単に実装できる「Buttons.cool」 https://black-flag.net/css/20231130-8088.html https://black-flag.net/css/20231130-8088.html#respond Thu, 30 Nov 2023 00:20:16 +0000 https://black-flag.net/?p=8088 ボタンの実装サンプルを提供しているサイトはいろいろありますが、CodePenで公開されているクオリティの高いボタンを収集しているボタンコレクションサイト「Buttons.cool」が活用できそうだったのでメモ書きとして紹介します。

Buttons.cool – The coolest buttons in town


Buttons.cool – The coolest buttons in town

「Button List」と「Button Generator」に分かれて120種類以上のボタンデザインが紹介されています。
※2023年11月30日現在

「Button List」では、CodePenの各ユーザーに分かれてボタンデザインを検索することができ、使用したいボタンのHTMLとCSSをコピーすることができます。

「Button Generator」は、「Tailwind CSS」ベースのクラスランダマイザーとなっています。

試しに一つHTMLとCSSをコピーして少しカスタマイズしたサンプルは以下です。

See the Pen
Gravity Button
by BLACKFLAG (@BlackFlag)
on CodePen.

シンプルでスタイリッシュなものからアニメーションがついたもの、立体的なものなど、様々なボタンデザインが紹介されていて、今後もどんどん追加されていきそうです。

CSSで実装できるボタンデザインを探す際には、このサイトから参考にしてみるのも良さそうです。

ボタンデザインの参考にぜひ。。。

]]>
https://black-flag.net/css/20231130-8088.html/feed 0
CSSのコピペでローディングアニメーションを簡単に実装できる「CSS Loaders」 https://black-flag.net/css/20231004-8073.html https://black-flag.net/css/20231004-8073.html#respond Wed, 04 Oct 2023 00:15:45 +0000 https://black-flag.net/?p=8073 Webサイトにローダーを組み込む際に、ローディングアニメーションのサンプルを提供しているサイトはいろいろありますが、500種類以上のローディングアニメーションをCSSをコピペするだけで簡単に実装することができる「CSS Loaders」が便利過ぎたのでメモ書きとして紹介します。

CSS Loaders: A collection of more than 500 loading animations


CSS Loaders: A collection of more than 500 loading animations

「CSS Loaders」は利用するにあたって登録も不要で、
・クラシック
・ドット
・バー
・ドット vs バー
・スピナー
・3D
などなど、30以上のジャンルに分かれて分類されたローディングアニメーションが500種類以上用意されています。
※2023年10月4日現在

実装方法はとても簡単でHTMLにはdivなどのブロック要素を一つだけ用意します。

<div class="loader"></div>

そのブロック要素に対して、実装したいローディングアニメーションのCSSを指定するだけです。

「CSS Loaders」サイト内の使用したいローディングアニメーションにマウスカーソルを合わせると「Copy the CSS」の文字が表示されるので、そのままクリックするだけでCSSがコピーでき、それを貼り付ければ実装完了です。

試しに実装してみたサンプルは以下です。

See the Pen
CSS Loaders1
by BLACKFLAG (@BlackFlag)
on CodePen.

See the Pen
CSS Loaders2
by BLACKFLAG (@BlackFlag)
on CodePen.

See the Pen
CSS Loaders3
by BLACKFLAG (@BlackFlag)
on CodePen.

好みのローディングアニメーションを選んでしまえば、1分もかからずに実装することができるのでとても便利です。

現在は500種類以上のアニメーションが用意されていますが、1000種類まで増やすことを目標にしているようなので、ローディングアニメーションが必要になった際にはまずこのサイトを見にくれば事足りそうな気がします。

単純なアニメーションから、アイスやピザなどの食べ物のイラストが動くものまで多種多様なものが用意されているので、CSSアニメーションの参考にするにもよさそうです。

ローディングアニメーションが必要になった際にぜひ。。。

]]>
https://black-flag.net/css/20231004-8073.html/feed 0
HTMLのdialogタグでダイアログ(モーダル)を実装する方法 https://black-flag.net/html/20230905-7850.html https://black-flag.net/html/20230905-7850.html#respond Tue, 05 Sep 2023 00:15:56 +0000 https://black-flag.net/?p=7850 Webページでモーダルウィンドウやダイアログ表示を実装する際はJavaScriptのライブラリやプラグイン等を使って組み込むことが多いですが、HTMLのdialogタグを使うととても簡単に実装することができます。

dialogタグを使用することで、ダイアログを表示させたり非表示にしたりするJavaScript動作をブラウザが処理してくれることになるので、アクセシビリティにもよいと言われています。(dialogタグでも表示するための指示はJavaScriptを使用しますが)

IEのサポートも終わり、主要ブラウザでdialog要素がサポートされたことで活用できる機会が増えてきたので実装する方法をいくつかのパターンで紹介してみます。

dialogタグを使ってダイアログ表示

まずは基本的な使用方法として、dialogタグを使った場合のHTMLから。

ダイアログで表示する内容をdialogタグの中に記載し、併せてダイアログを表示するためのボタンと閉じるためのボタンを設置します。

ボタンにはidまたはクラスをつけておきます。

<dialog>
  <p>これはHTMLのdialogタグで作られたダイアログです。</p>
  <button id="dialog-close">ダイアログを閉じる</button>
</dialog>

<button id="dialog-open">ダイアログを開く</button>

dialogタグで書かれた内容はデフォルトではWebページ上に表示されません。

表示するには、JavaScriptで表示と非表示を実行する処理を指定します。

dialogタグを表示するには「showModal()」メソッドを使用し、閉じるには「close()」メソッドを使用します。

この「showModal()」と「close()」メソッドを使えばJavaScriptで細かな処理を追加せずにブラウザ側でダイアログの表示と非表示の動作を実行してくれます。

const dialog = document.querySelector('dialog');

// ダイアログを開く
document.getElementById('dialog-open').addEventListener('click', function() { 
  dialog.showModal();
});

// ダイアログを閉じる
document.getElementById('dialog-close').addEventListener('click', function() {
  dialog.close();
});

ダイアログをCSSなどで装飾せずにとりあえず「showModal()」「close()」メソッドで表示と非表示を切り替える動作は以下です。

See the Pen
HTML dialog [1]
by BLACKFLAG (@BlackFlag)
on CodePen.

参考までに、dialogタグにopen属性を付けることで、ページロード時にデフォルトでダイアログを表示させておくことができます。
※open属性で表示した場合はオーバーレイが表示されなかったり「showModal()」メソッドで表示する場合と違いがあります。

See the Pen
HTML dialog [2]
by BLACKFLAG (@BlackFlag)
on CodePen.

dialogにCSSで装飾を加え、アニメーション表示とオーバーレイクリックで閉じるようにする

JavaScriptでモーダルウィンドウやダイアログを実装する時と同様に、dialogタグでも簡単にダイアログ要素にCSSで装飾することができます。

ダイアログ自体の装飾は単純にdialogタグに対してサイズや余白などをCSSで指定します。

ダイアログを表示する際の背景にあたるオーバーレイ部分はdialogタグの疑似要素「::backdrop」で色味や透過度を指定することができます。

dialog {
  background: #fff;
  border: #333 1px solid;
  border-radius: 10px;
  box-shadow: 0 0 10px #666;
  color: #333;
  width: 80%;
  &::backdrop {
    background: rgba(0, 0, 0, 0.5);
  }
}

CSSでの装飾と合わせて、ダイアログ表示時にアニメーションを付ける動作サンプルは以下です。

表示のアニメーションはJavaScript側でダイアログを表示する際に「showModal()」メソッドと併せてCSSクラスの「.show」を付与することでアニメーション制御させてます。

See the Pen
HTML dialog [3]
by BLACKFLAG (@BlackFlag)
on CodePen.

モーダルウィンドウを使う場合はオーバーレイ部分をクリックさせてウィンドウを閉じるようにしたいですが、dialogタグの疑似要素「::backdrop」にはクリックイベントなどの指定ができません。

実現するにはいくつか方法がありますが、上記のサンプルではJavaScript側でクリックされた位置がダイアログ本体の中(「.dialog-inner」の中)かどうかを判別して、そうでなかった場合はダイアログ枠外という判断になり、「close()」メソッドの閉じる動作を実行させる制御をしています。

dialogをページ内に複数設置

dialogタグを使ったダイアログ表示をページ内に複数設置する場合は、dialogタグに固有のidを付与して、表示用ボタンにdata属性でdialogタグのidと紐づけをして実装します。

<dialog id="dialog-1">
  <div class="dialog-inner">
    <p>これはダイアログ1です。</p>
    <button class="dialog-close">ダイアログ1を閉じる</button>
  </div>
</dialog>

<dialog id="dialog-2">
  <div class="dialog-inner">
    <p>これはダイアログ2です。</p>
    <button class="dialog-close">ダイアログ2を閉じる</button>
  </div>
</dialog>

<button class="dialog-open" data-dialog="dialog-1">ダイアログ1を開く</button>
<button class="dialog-open" data-dialog="dialog-2">ダイアログ2を開く</button>
const dialogs = document.querySelectorAll('dialog');

// ダイアログを開く
const open = document.querySelectorAll('.dialog-open');
open.forEach(button => {
  button.addEventListener('click', () => {
    const dialogId = button.getAttribute('data-dialog');
    const dialog = document.getElementById(dialogId);
    dialog.showModal();
    dialog.classList.add('show');
  });
});

// ダイアログを閉じる
const close = document.querySelectorAll('.dialog-close');
close.forEach(button => {
  button.addEventListener('click', () => {
  const dialog = button.closest('dialog');
  dialog.classList.remove('show');
  setTimeout(() => dialog.close(), 500);
  });
});

// オーバーレイクリックでダイアログを閉じる
dialogs.forEach(button => {
  button.addEventListener('click', (event) => {
    if(event.target.closest('.dialog-inner') === null) {
      const dialog = button.closest('dialog');
      dialog.classList.remove('show');
      setTimeout(() => dialog.close(), 500);
    }
  });
});

これを実行させたパターンは以下です。

See the Pen
HTML dialog [4]
by BLACKFLAG (@BlackFlag)
on CodePen.

dialogタグの対象ブラウザについては以下です。

以上が、dialogタグを使ったダイアログ、モーダルウィンドウ実装の紹介でした。

JavaScriptライブラリで実装するよりもdialogタグを使うことでとてもシンプルな構成でモーダルウィンドウなどのダイアログUIの組み込みが可能で、ユーザービリティやアクセシビリティにも配慮した構成で実装できるのでメリットも多いです。

モーダルウィンドウやダイアログをdialogタグを使って実装する際にぜひ。。。

]]>
https://black-flag.net/html/20230905-7850.html/feed 0
iframeの子ページが更新するたびに処理を実行させる方法(クロスドメイン対応) https://black-flag.net/javascript/20230801-7826.html https://black-flag.net/javascript/20230801-7826.html#respond Tue, 01 Aug 2023 00:20:07 +0000 https://black-flag.net/?p=7826 あまり使う機会が多くはないiframeですが、YouTubeやGoogleフォームなど外部サービスをページに埋め込む際にいまだに使われることがあります。

外部サービスふくめてiframeを組み込む際に、親ページから子ページの操作または逆のパターンを操作が必要になる場面はよくあるのですが、JavaScriptで処理をしようとするとわりと手間が掛かったり、親ページと子ページの関係がクロスドメインだと一切操作ができなかったりと、なかなか面倒だったりします。

そんなiframeの親ページから子ページの操作において、外部サービスをページ内に埋め込む際に、子ページ内でページが切り替わったことを判別して処理を実行させることが必要になったことがあり、クロスドメインでも動作させる方法があったので備忘録として紹介してみます。

iframeの子ページが更新するたびに処理を実行

iframeの子ページが更新または読み込まれるたびに処理を実行させるにはJavaScriptの「addEventListener()」イベントの「load」処理を使用します。

document.querySelector('iframe').addEventListener('load', function() {
  // 子ページの読み込みが完了した後に実行される処理
  console.log('Child page has been loaded.');
});

「querySelector()」メソッドでiframeを指定することで、ページ内に存在するすべてのiframeが対象になります。

この処理を使って、iframeの子ページが読み込まれるたびに、親ページのスクロール位置を最上部に戻す処理の動作例は以下になります。
※親ページをスクロールした後に子ページ内のリンクをクリックしてみてください。

See the Pen
iframe Load to Top [1]
by BLACKFLAG (@BlackFlag)
on CodePen.

ページ内の特定のiframeの子ページが更新するたびに処理を実行

ページ内にiframeが複数あったような場合に、特定のiframeのみに処理する場合はidを使って処理します。
※iframeにid「#load-child」を付けた想定です。

document.getElementById('load-child').addEventListener('load', function() {
  // 子ページの読み込みが完了した後に実行される処理
  console.log('Child page has been loaded.');
});

「getElementById()」メソッドで特定のidを指定することでページ内の任意のiframeのみに処理を実行させることができます。

この処理を使って、idを判別してiframeの子ページが読み込まれるたびに、親ページのスクロール位置を最上部に戻す処理の動作例は以下になります。
※親ページをスクロールした後に子ページ内のリンクをクリックしてみてください。

See the Pen
iframe Load to Top [2]
by BLACKFLAG (@BlackFlag)
on CodePen.

iframeタグに「onload()」イベントを付けて実行

もっとシンプルにiframeタグの属性に「onload()」イベントをつけて処理する方法もあります。

<iframe src="https://example.com" onload="childLoad()"></iframe>
// 子ページの読み込みが完了した後に実行される処理
function childLoad() {
  console.log('Child page has been loaded.');
};

iframeタグの属性に「onload()」イベントを付けて関数を実行させるようにするだけで、iframeの子ページが更新される度に「onload()」イベントを実行させることができます。

この「onload()」イベントを使って、iframeの子ページが読み込まれるたびに、親ページのスクロール位置を最上部に戻す処理の動作例は以下になります。
※親ページをスクロールした後に子ページ内のリンクをクリックしてみてください。

See the Pen
iframe Load to Top [3]
by BLACKFLAG (@BlackFlag)
on CodePen.

使う場面が限定されるiframe処理ですが、クロスドメインでも動作するので外部サービスをページに組み込んで処理する際に覚えておくと便利になる時があるかと思います。

Googleフォームをiframeで埋め込む際に、入力項目が多く親ページをスクロールした状態で回答すると、入力完了画面がページ上部に表示されてしまいユーザーに気がつかれない状態になってしまうので、そのような時にこの処理で対応することができます。

iframeの子ページの更新を判別する際にぜひ。。。

]]>
https://black-flag.net/javascript/20230801-7826.html/feed 0
CSSで三角形などの図形をclip-pathで作る方法 https://black-flag.net/css/20230704-7800.html https://black-flag.net/css/20230704-7800.html#respond Tue, 04 Jul 2023 00:00:34 +0000 https://black-flag.net/?p=7800 CSSで三角形を作る際、これまでは主に「border」プロパティを使って作成していましたが、モダンブラウザで活用できるようになった「clip-path」プロパティを使うと三角形や多角形などの図形がわりと簡単に作成することができます。

今後はCSSで三角形などの図形を作成する際に「border」ではなく「clip-path」プロパティを使う手法にした方が汎用性も高く活用していけるので自分用メモとして紹介してみます。

clip-pathで様々な三角形を作る

「clip-path」プロパティで三角形を作るには「polygon」の値を使用します。

div {
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

「clip-path」プロパティの「polygon」でクリッピング領域と座標を指定します。

三角形の場合は頂点が3つになるので、3つのクリッピング領域とそれぞれ座標の位置で三角を形作ります。

作成する三角形は座標の位置を調整することで、上向き・下向き・右向き・左向きなどさまざまな形が作成可能です。
※下記サンプルは上段左から右に向かって「.triangle1」~「.triangle4」、下段左から右に向かって「.triangle5」~「.triangle8」の並びになっています。

See the Pen
CSS clip-path [ Triangle ]
by BLACKFLAG (@BlackFlag)
on CodePen.

「clip-path」の座標の配置方法についてはコリスさんの記事がとても参考なります。

CSSのclip-pathプロパティでいろいろ簡単に実装できる、便利な使い方と実装のポイント

clip-pathで正三角形を作る

一つ目のサンプルでは作成するオブジェクトの幅と高さをpxで固定にしているので、生成される三角形が正三角形にはなっていませんでした。

正三角形を作る際に高さの計算は「正三角形の一辺の長さ×√3÷2」になるので、CSSでも高さに対して計算式を入れる必要があります。

See the Pen
CSS clip-path [ Equilateral Triangle ]
by BLACKFLAG (@BlackFlag)
on CodePen.

「clip-path」で作る正三角形の高さの計算は以下のQiita記事を参考にしています。

【CSS】borderを使って、三角形作るのはやめませんか?

clip-pathで多角形を作る

ここまでは「clip-path」で三角形を作るサンプルでしたが、クリッピング領域を増やすことで様々な形の図形を作成することができます。

「clip-path」で作成した図形にリンクを設置すると、図形の範囲のみがクリック領域になるので多角形のリンクボタンを用意する際にも便利です。

ちょっといびつなものもありますが、五角形、六角形、星型などクリッピング領域と座標をそれぞれ指定することで、CSSだけで様々な図形が作成可能です。(図形にはそれぞれリンクを設置しています。)

See the Pen
CSS clip-path [ Polygon ]
by BLACKFLAG (@BlackFlag)
on CodePen.

「clip-path」の対象ブラウザについては以下です。

「clip-path」プロパティの「polygon」を活用することで今まで作成がちょっと面倒だった三角形や多角形がCSSで簡単に成型できるようになります。

今回のサンプルではspanタグに対して図形を生成しましたが、::beforeや::afterなどの疑似要素で使うことで活用の幅も広がると思います。
※「clip-path」の対象は基本的にブロック要素になるのでspanタグなどで使用する場合は「display」をblockまたはinline-blockにする必要があります。

CSSの「clip-path」で図形を作成する際にぜひ。。。

]]>
https://black-flag.net/css/20230704-7800.html/feed 0
デザインスキル不要でロゴ作成が可能な「Canvaロゴメーカー」 https://black-flag.net/web_service/20230510-7785.html https://black-flag.net/web_service/20230510-7785.html#respond Wed, 10 May 2023 00:20:00 +0000 https://black-flag.net/?p=7785 先日、「手軽にオリジナルデザインのロゴが作成できるWixロゴメーカー」と題してWix.comのロゴメーカーツールを紹介しましたが、同じようにデザインなどが得意でない人でも簡単にロゴを作成することができるCanvaのロゴメーカーも便利だったのでご紹介してみます。

ロゴメーカーCanvaで無料でロゴをデザイン


ロゴメーカーCanvaで無料でロゴをデザイン

ポスターやフライヤーなどのグラフィックデザインを無料で簡単に作成することができるCanvaさんのロゴメーカーです。(以前紹介したCanvaさんの記事はこちら

様々なジャンルに分かれたデザインパターンが用意されていて、好きなテンプレートを選んで自分用にカスタマイズしていくことができます。


ロゴテンプレートでおしゃれかっこいいロゴデザイン・ロゴマークを無料作成 | ロゴメーカーアプリCanva

テンプレート選択画面の左メニューにある下記項目から、ロゴのパターンを絞り込むことができます。

・スタイル
・テーマ
・おすすめ
・教科
・価格
・カラー

レストラン、カフェなどの飲食系から、スポーツ、ファッション、ゲーム、病院、バンド、自動車など、様々なビジネス向けのロゴパターンが揃っています。

編集画面はCanvaのポスターやフライヤーなどのグラフィックデザインを作成する際のUIと同様で直感的に操作できるようになっているので、自分用にカスタマイズする際にも迷うことなく作成することができます。

テンプレート選択画面から進むとCanvaへの無料登録が必要になりますが、ロゴメーカートップの「ロゴを作成」ボタンから開始すると登録をしなくても作成することができるので、まず使い勝手を見る上でも試しに作ってみるのもよさそうです。

Wixのロゴメーカーと同じく、手軽にロゴを作成できるサービスはいくつか知っておくと、デザインが得意でない人でも、いざというときにとても便利に活用できそうです。

ロゴ作成が必要な際にぜひ。

]]>
https://black-flag.net/web_service/20230510-7785.html/feed 0
手軽で簡単にオリジナルデザインのロゴが作成できるWix「ロゴメーカー」 https://black-flag.net/web_service/20230221-7752.html https://black-flag.net/web_service/20230221-7752.html#respond Tue, 21 Feb 2023 08:10:39 +0000 https://black-flag.net/?p=7752 Webサイト制作においてノーコードツールとして進化を続けている「Wix.com」。

Webサイトの作成ツールとは別で提供している、Webサイトを作る上でも重要になるロゴを簡単に作成することができるロゴメーカーツールがあります。

デザインのスキルが無くても手順に沿って進めるだけで手軽にオリジナルデザインでクオリティの高いロゴを作成することができ、使いやすく、とても楽しく作ることができるツールだったのでのご紹介してみます。

Wix無料ロゴメーカー


無料ロゴメーカー|ロゴ作成をAIにおまかせ|Wix.com

Wix無料ロゴメーカーは画面上に出てくるいくつかの質問に答えていくことで、それらの内容をAIが解析して最適なロゴパターンを複数提案してくれるロゴジェネレーターです。

ポップで可愛らしいものから高級感のあるシックなものまで、アイコンの有無ふくめさまざまなパターンのロゴがあっという間に作成できます。

このWix無料ロゴメーカーで作成できるロゴパターンの事例はサイト上でも紹介されていて、以下のページでこのジェネレーターでどんなロゴができるのかイメージすることができます。

Wix無料ロゴメーカーで作成できるロゴデザインパターン事例

プロのデザイナーにロゴ制作をお願いするのと同等のクオリティのものを簡単に作れてしまうだけで素晴らしいツールですが、AIから提案されたロゴをさらに自分好みにカスタマイズすることもできるという点も魅力的です。

ここからは手順に沿ってロゴを作成していくフローについて紹介します。

1.無料アカウント登録

「Wix.com」のアカウントを持っている人はそのままの使用できますが、持っていない人は新規の登録が必要になります。(もちろん登録無料です。)

2.ロゴの作成を始める

Wixのアカウントでログインしたら、無料ロゴメーカーページにある「今すぐ作成」ボタンをクリックして、次の画面に表示される「ロゴの作成を始める」ボタンをクリックすると、ロゴ作成手順が開始されます。

まずは、「ロゴのデザインをはじめましょう」というフレーズでロゴを作成する際の名前を入力します。

ここではサイト名やお店の名前もしくは企業名などロゴのメインとなる名前を決め、名前とは別に簡単なキャッチコピーをロゴに含めたい場合は、オプションにある「タグライン」にフレーズを入力します。

入力する名前は英語だけでなく日本語でも大丈夫でした。

3.業種や業界ジャンルの指定

名前を入力した後は、作成するロゴの業種や業界ついて入力します。

“ブログ”や“レストラン”、“企業デザイン”など何のジャンルのロゴになるのかを指定することで、AIがイメージを解析するための材料になります。

※この項目はスキップすることも可能です。

4.ロゴイメージの指定

作成するロゴのフォントやアイコン、色のスタイルを調整するためにロゴのイメージを指定します。

イメージの種類は「動的」「楽」「遊び」「モダン」「自由」「独創」「ハイテク」「新鮮」「公式」「個性」などがあるので、自分のイメージするものを選びましょう。

※この項目もスキップすることが可能です。

5.ロゴパターンの選択

これが最後の質問になりますが、ジャンルやイメージを選択した後に作成者の好みやロゴの方向性を判別するために、2種類のロゴを並べてどちらのパターンが好みか選択する質問が5回続きます。

直感で自分が好きな方を選択するのがよさそうですが、どちらもいいと思うのがなかった場合は「どちらも好みではない」も選択できます。

※この項目もスキップすることが可能です。

6.ロゴ完成

以上の質問に回答することで、ロゴ制作の工程は完了となり、AIが解析したロゴパターンを提案してくれます。
(ロゴの名前以外の質問はスキップできるのでひとまず何も考えずに作成することも可能だったりします。)

ロゴのパターンはテキストのみのものからワンポイントやアイコンの付いたもの、罫線を使ってデザインされたものなど100種類以上のパターンで生成されるので、その中からこれだと思う自分の好みのものを選びましょう。

ロゴ選択画面では一番最初に設定した「名前」と「タグライン」を編集することができるので、サブテキストの編集や削除などを提案パターンを見ながら編集することができます。

このロゴ選択画面では、選んだロゴがWebサイトに掲載した時のイメージや、名刺として使う場合のイメージ、またTシャツやバッグなどノベルティグッズ的なものにロゴを印刷したイメージなど、作ったロゴを自分のブランドとして様々な場面で使用した場合に、どのような印象になるのかをイメージさせてくれます。

ロゴの編集

ここまでの質問で自動で生成してくれるロゴをそのまま使用しても問題ないクオリティですが、気に入ったロゴを選択後に「ロゴを編集」ボタンから、さらに自分好みに編集することもできます。

編集画面ではカラーパターンの変更や、テキストの色を変更したり、アイコンの種類を変えたり、背景色を変えたり、各要素の大きさを変えることも可能になっています。

編集できることで、より自分好みにカスタマイズできますが、カラーパターンを変えると元の色に戻せなくなってしまったり、いろいろと編集しすぎると元のバランスが崩れてしまったりと、デザインに慣れている人でないとドツボにハマることもあるので、自信がない人は無理に編集しすぎない方がいいかもしれません。

ロゴのダウンロード

ロゴを編集後に「次へ」のボタンで進んでいくと、作成したロゴをベースにWebサイトの作成に進むこともでき、もちろんロゴ作成のみで完了とすることもできます。

画面上の「ロゴのみ作成」ボタンを押すと、「ロゴプランを選択」の画面に進み、下記の2種類のプランが出てきます。

アドバンス(全種ロゴファイル込み) ¥5,100
ベーシック(基本ロゴファイルのみ) ¥2,100

無料で使用する場合は、プランの下にある「ロゴファイルの無料サンプルをダウンロード」から198×198サイズの小さな画像のみダウンロードできます。

無料でダウンロードできるロゴはあくまでサンプルとなり、商用利用も認められていないので、きちんとしたブランドロゴとして使う場合は「アドバンス」もしくは「ベーシック」のどちらかのプランを選ぶのが現実的かと思います。

ロゴを無料で作成できますが、作成した最後に有料プランで購入しないと実用的には使えないということが判明するところがちょっと残念ではありますが、これだけのクオリティの高いロゴを数千円で作成できるということは破格だと感じます。

Wixのロゴメーカーでは、質問に答えてAIが生成してくれるロゴジェネレーターのほかに、プロのクリエイターに依頼するパターンも用意されているので、ロゴが必要になった際には、どちらかのパターンを検討してみるのもいいのではないかと思います。

自分好みのロゴを楽しく作成したい人にはぜひ。

]]>
https://black-flag.net/web_service/20230221-7752.html/feed 0
CSSのmix-blend-modeで背景色と文字色を反転させる方法 https://black-flag.net/css/20221213-7723.html https://black-flag.net/css/20221213-7723.html#respond Tue, 13 Dec 2022 00:15:02 +0000 https://black-flag.net/?p=7723 画像の前面に配置するテキストを読みやすくしたり、背景色によって文字色を変えたりと、重なり合う要素の見え方をさまざまな表現方法で調整できるCSSの「mix-blend-mode」プロパティ。

Photoshopで言う、2枚のレイヤーを重ねた際にどのように合成させるかを設定するブレンドモード(描画モード)と同じ機能です。

今までWebページ上ではそういった色の反転などは画像で作成する必要がありましたが、IEがなくなったことにより、CSSで合成できる「mix-blend-mode」が気兼ねなく使えるようになり、今後活用する機会が増えそうなので簡単なサンプル交えて紹介してみます。

mix-blend-mode[difference]で背景色と文字色を反転

「mix-blend-mode」の使い方について、まずは背景色と文字色の反転から。

背景色に対して前面に配置するテキストの文字色を反転させるには「mix-blend-mode」プロパティの「difference」の値を使用します。

.text {
	mix-blend-mode: difference;
}

「mix-blend-mode: difference;」の使い方の一例として、下記のようにテキストの途中で背景色によって文字色を反転させることが可能になります。

左右に分けたり、上下で分けたり、斜めのラインにしても文字色を反転させることができるので、背景色によってテキストが読みづらくなるようなことを避けることができます。

See the Pen
CSS mix-blend-mode [ difference ]
by BLACKFLAG (@BlackFlag)
on CodePen.

カラフルな画像(背景画像)の前面に配置したテキストに対して「mix-blend-mode: difference;」を使うと下記のようになります。

See the Pen
CSS mix-blend-mode [ Scroll ]
by BLACKFLAG (@BlackFlag)
on CodePen.

mix-blend-mode[overlay]でテキストにオーバーレイをかける

続いて、画像の前面に配置するテキストの装飾について。

色を乗算もしくはスクリーンで重ねる「mix-blend-mode」プロパティの「overlay」を使用することで、下にある要素が暗い場合はより暗く、明るい場合はより明るくする装飾ができます。

.text {
	mix-blend-mode: overlay;
}

「mix-blend-mode: overlay;」を使うと下記のように画像の前面に配置したテキストを装飾することが可能になります。

See the Pen
CSS mix-blend-mode [ overlay ]
by BLACKFLAG (@BlackFlag)
on CodePen.

そのほかの「mix-blend-mode」で用意されている値は下記の通りです。

通常 normal
乗算 multiply
スクリーン screen
オーバーレイ overlay
比較(暗) darken
比較(明) lighten
覆い焼き color-dodge
焼き込み color-burn
ハードライト hard-light
ソフトライト soft-light
色差 difference
除外 exclusion
色相 hue
彩度 saturation
カラー color
輝度 luminosity

「mix-blend-mode」は要素の内容物と親要素の内容物や要素の背景に対して対応するので、親子関係や要素の重なり具合を考慮して指定する必要があります。

mix-blend-mode – CSS: カスケーディングスタイルシート | MDN

「mix-blend-mode」の対象ブラウザは以下です。

「mix-blend-mode」の各指定の見え方についてはICS MEDIAさんの記事でわかりやすく紹介されています。

CSSのブレンドモードが素敵! mix-blend-modeを使いこなそう – ICS MEDIA

freee Developers Hubさんの記事では「mix-blend-mode」の仕組みを詳しく紹介されています。

CSSのmix-blend-mode完全に理解したい – freee Developers Hub

「mix-blend-mode」を理解して使いこなせるようになると、Webページ上でCSSだけでテキストの可読性の補助や表現の幅が広がるのではないかと思います。

CSSの「mix-blend-mode」でテキストを装飾する際にぜひ。。。

]]>
https://black-flag.net/css/20221213-7723.html/feed 0
HTMLだけでiPhoneなどスマホのカメラを起動できるcapture属性 https://black-flag.net/html/20221115-7687.html https://black-flag.net/html/20221115-7687.html#respond Tue, 15 Nov 2022 00:00:27 +0000 https://black-flag.net/?p=7687 ブラウザからiPhone(iOS)やAndroidなどスマートフォンやタブレットのカメラを起動するにはJavaScriptであれこれ実装していましたが、HTMLだけで簡単にカメラを起動させることができるcapture属性という便利なものがあったのでメモ用として紹介してみます。

capture属性はinputタグの「type=”file”」に対して指定し、デバイスの背面カメラ、インカメラ(前面カメラ)の選択から、写真と動画(ビデオ)の選択まで細かく指定することができます。

まずはそれぞれの動作サンプルから。
下記の「写真」と「動画」それぞれにある「背面カメラ」「インカメラ」のボタンからカメラを起動してみてください。
※カメラの起動はiPhone(iOS)やAndroidなどモバイルまたはタブレットデバイスのみで動作します。(PCのカメラは起動しません。)

See the Pen
HTML capture
by BLACKFLAG (@BlackFlag)
on CodePen.

HTMLだけでiPhoneなどスマホのカメラを起動できるcapture属性サンプル

【写真】背面カメラ

<input type="file" capture="environment" accept="image/*">

まずは写真撮影を背面カメラで起動するパターンから。

使用するカメラの種類をcapture属性で指定します。
背面カメラの場合、属性値は「environment」を指定します。

写真もしくは動画を選ぶ指定はaccept属性を使用します。
写真の場合、属性値は「image/*」を指定します。

【写真】インカメラ

<input type="file" capture="user" accept="image/*">

次に写真撮影をインカメラで起動するパターン。

capture属性はインカメラの場合、属性値は「user」を指定します。
accept属性は写真の場合は「image/*」です。

【動画】背面カメラ

<input type="file" capture="environment" accept="video/*">

続いて動画(ビデオ)撮影を背面カメラで起動するパターン。

capture属性は背面カメラの「environment」を指定します。
accept属性は動画の場合、属性値を「video/*」にします。

【動画】インカメラ

<input type="file" capture="user" accept="video/*">

最後に動画撮影をインカメラで起動するパターン。

capture属性はインカメラの場合の「user」を指定します。
accept属性は動画の場合は「video/*」です。

背面カメラとインカメラ(前面カメラ)、写真と動画(ビデオ)の指定をまとめると以下になります。

capture属性
背面カメラ environment
インカメラ user
accept属性
写真 image/*
動画(ビデオ) video/*

capture属性のサポートブラウザは以下です。
モバイルデバイスのみのUIになるのでPCブラウザのサポートは不要です。

このcapture属性の動作はサポート外のブラウザからアクセスした場合、デフォルトのファイルピッカーのUIにフォールバックされるようなので、クリックして無反応になってしまうようなことは避けられそうです。

capture属性についてはコリスさんの記事でも詳しく紹介されています。

【参考記事】HTMLだけでスマホのカメラにアクセスできるの知ってた? 前面・背面カメラにアクセスできるHTMLのcapture属性 | コリス

このcapture属性とaccept属性を使用することで簡単にHTMLだけでブラウザからカメラを起動させることができとても便利なので覚えておくといいと必要な時に役立つかと思います。

HTMLでiPhoneやAndroidのカメラ起動を実装する際にぜひ…

サンプルファイルをダウンロードしたい方はこちらから

]]>
https://black-flag.net/html/20221115-7687.html/feed 0
Chromeで縮小表示した画像のぼやけをCSSで解消する方法 https://black-flag.net/css/20220726-7654.html https://black-flag.net/css/20220726-7654.html#respond Tue, 26 Jul 2022 00:15:33 +0000 https://black-flag.net/?p=7654 レスポンシブ対応で大きなサイズで書き出した画像をCSSなどで縮小させてWebページ上に表示させた際に、Google Chromeで表示がぼやけることがあります。

ぼやけてしまった場合は画像に対して「-webkit-backface-visibility: hidden;」を指定する解消方法もありますが、これだけではうまくいかないことが多いです。

そんなGoogle Chromeで縮小表示した際に発生する画像がぼやける現象を解消できるCSSの「image-rendering」プロパティを備忘録として紹介します。

「image-rendering」でぼやけを解消

Chromeで縮小表示した際のぼやけを解消するには、画像に対して「image-rendering」プロパティの「-webkit-optimize-contrast」を使用します。

img {
	image-rendering: -webkit-optimize-contrast;
}

image-rendering – CSS: カスケーディングスタイルシート | MDN

「image-rendering」は画像を拡大・縮小表示した際の描画方法を指定することができますが、画像によっては粗く見えづらくなる場合もあるので使用には注意が必要です。

Chromeのみに絞って「image-rendering」を指定する

この「image-rendering」はブラウザによってレンダリングが不安定になることもあるようなので、使用する際はChromeのみに限定した指定にするのが安全です。

Chromeのみに限定した指定方法は以下になります。

@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
	img {
		image-rendering: -webkit-optimize-contrast;
	}
}

上記ではimgタグすべてに「image-rendering: -webkit-optimize-contrast;」をつける記述方法にしていますが、ぼやける画像が一部のものだった場合は、任意のクラスで絞って指定する方が安心かと思います。

「image-rendering: -webkit-optimize-contrast;」の効果として、以下の3パターンの画像を並べたサンプルを用意しました。

  • 1. 「image-rendering: -webkit-optimize-contrast;」指定無し
  • 2. すべてのブラウザに「image-rendering: -webkit-optimize-contrast;」
  • 3. Chromeのみに「image-rendering: -webkit-optimize-contrast;」

ちょっと違いが分かりづらいかもしれませんが、ブラウザを拡大縮小させると「指定無し」画像のぼやけが目立ってくるので、「image-rendering: -webkit-optimize-contrast;」の指定の有り無しの見た目の違いについてご確認ください。

See the Pen
image-rendering
by BLACKFLAG (@BlackFlag)
on CodePen.

「image-rendering」の対象ブラウザは以下です。

当ブログではすべての画像に対して「image-rendering: -webkit-optimize-contrast;」を指定しているので、各ブラウザでの表示の違いの参考にしていただければと思います。

Chromeで画像がぼやける際にぜひ。。。

]]>
https://black-flag.net/css/20220726-7654.html/feed 0
CSSのみでスムーススクロール実装とアンカーリンクのスクロール位置を調整する方法 https://black-flag.net/css/20220518-7635.html https://black-flag.net/css/20220518-7635.html#respond Wed, 18 May 2022 00:20:13 +0000 https://black-flag.net/?p=7635 ページ内でスムーススクロールをする際は今まではJavaScriptを使って実装をすることが多かったですが、最新のモダンブラウザではCSSだけで簡単に実装することができます。

それに加えて、アンカーリンクでスクロールする際に固定ヘッダーがあったりするとスクロールを止める位置の調整がめんどうだったりしますが、それも最新のモダンブラウザでは簡単にCSSで操作することができます。

今回はCSSだけでスムーススクロールを実装する方法と、アンカーリンクのスクロール位置を調整する方法を備忘録メモとして紹介してみます。

CSSのみでスムーススクロール

CSSのみでスムーススクロールを実装するには「scroll-behavior」プロパティの「smooth」を使用します。

ページ全体にスムーススクロールを実装する場合はhtmlタグに対して「scroll-behavior」プロパティを指定します。

html {
	scroll-behavior: smooth;
}

これだけでページ内にスムーススクロールを実装させることができます。

「scroll-behavior」はページ内のスクロールエリアに対してのスクロールの振る舞いを設定できるプロパティです。

値はスムーススクロールする「smooth」と、瞬時にスクロールする「auto」があります。

このプロパティを使えば簡単にスムーススクロールを実装できますが、スピードやイージングの指定はできないようです。

「scroll-behavior」の対象ブラウザは以下でIEは対応していません。

CSSでアンカーリンクのスクロール位置を調整

アンカースクロールの位置調整をする方法は、以前「CSSのbefore疑似要素を使ってページ内アンカーリンクでスクロールした位置と固定ヘッダー要素が被らないようにする方法」として、before疑似要素を使った方法を紹介しましたが、「scroll-margin-top」プロパティを使うことでもっと簡単に指定できるようになります。

section {
	scroll-margin-top: 100px;
}

「scroll-margin-top」プロパティではアンカースクロールで止まる位置の上側のマージンを指定することができます。

固定ヘッダーの高さが80pxだった場合、「scroll-margin-top」の値を100pxで指定すると固定ヘッダーから下に20pxの余白が空いた状態でスクロールが止まるようになります。

スクロール位置のマージン調整はほかにも「scroll-margin-bottom」「scroll-margin-left」「scroll-margin-right」があり、「scroll-margin-left」は横スクロールの制御で使う機会があるかもしれませんが、「scroll-margin-bottom」「scroll-margin-right」はあまり使う場面の想像がついていないです…

「scroll-margin-top」の対象ブラウザは以下でIEは対応していません。

「scroll-behavior」と「scroll-margin-top」の実装例

「scroll-behavior」と「scroll-margin-top」の2つを使ってCSSのみでスムーススクロールのアンカースクロールを実装した動作例は以下になります。

See the Pen
CSS Smooth Scroll
by BLACKFLAG (@BlackFlag)
on CodePen.

2つのプロパティともJavaScriptで実装するよりも手軽に使えるので、今後スクロール動作を操作するには活用できるプロパティだと思います。

CSSのみでスムーススクロール実装とアンカーリンクのスクロール位置を調整する際にぜひ…

]]>
https://black-flag.net/css/20220518-7635.html/feed 0
サイトパフォーマンスやエディタ機能が進化した最新の「Wix.com」 https://black-flag.net/web_service/20220323-7588.html https://black-flag.net/web_service/20220323-7588.html#respond Wed, 23 Mar 2022 00:30:29 +0000 https://black-flag.net/?p=7588 当ブログでも何度か紹介させてもらっている簡単にホームページやブログ、ECショップを開設できる「Wix.com」ですが、以前記事にしたときよりエディタ機能やデザイン機能の進化やサイトパフォーマンスやセキュリティ面でも向上していたので、最新の「Wix.com」のホームページ作成機能について紹介してみたいと思います。

Wix.com


Wix.com

「Wix.com」は無料でホームページの作成から集客など一貫して管理することができ、世界中の人々やビジネスに選ばれているクラウドベースのWeb制作プラットフォームです。

当ブログでこれまでに紹介させてもらった「Wix.com」に関する記事のまとめはこちらからご確認ください

以前に紹介した時の「Wix.com」のユーザー数は6000万人以上でしたが、現在は世界190か国で2億人以上の人々に活用されているようで、サービス全体の進化がこの数値だけで見てとることができます。(2022年3月現在)

「Wix.com」では、個人向けホームページからビジネス向けホームページまで、ハイクオリティなテンプレートデザインが数多く用意されていて、HTMLやCSSの知識がない人でも簡単にホームページを作成することができます。

多種多様な機能が用意されていて、ホームページだけでなく、ポートフォリオ、ブログ、ECサイトまで、様々なWeb制作に活用することができます。

制作する際のデザインはあらゆる業種や目的に対応した800以上のテンプレートが用意されていて、管理画面から自由に編集することが可能になっています。

「Wix.com」の機能

「Wix.com」の進化している機能の一例として、下記のようなものがあります。

  • ・AI を使った自動作成ツールでホームページを作成。
  • ・ブログ、ネットショップ、予約システムなどの機能を組み合わせ、ビジネスの成長に合わせて新しい機能をいつでも追加することが可能。
  • ・作成したサイトをクリックひとつでスマートフォン向けに最適化し、モバイルサイトのデザインや機能を細かく調整することが可能。
  • ・検索エンジンからのアクセス数を増やし、サイトの検索パフォーマンスを最大化するための強力なSEOツール機能を搭載。

ホームページを公開する際の手順は、以前と変わらずWebデザインやHTMLなどの知識がなくても手軽に作成できるようになっています。

「Wix.com」のサイトでは以下の6つの簡単ステップで無料でホームページが作成可能だと紹介されています。

  • 1. Wix.com に無料登録し、作りたいホームページの種類を選択。
  • 2. デザインの元となるテンプレートを選択または自動作成ツールでスタート。
  • 3. テキスト、ギャラリー、動画を含む数百種類のデザイン要素をドラッグ&ドロップで追加。
  • 4. ネットショップ、予約システム、会員エリア、ブログなどのビジネス向けの機能を追加。
  • 5. ワンクリックでサイトを公開 し、オンラインでのブランド構築を開始。
  • 6. 高度SEOツールとマーケティングツールで サイトのアクセス数アップ。

ホームページ作成手順

ここからは実際に「Wix.com」でホームページを作成する手順を紹介します。

まず、無料で会員登録したのちに「新しいサイトを作成」から作成を開始します。

公開するWebサイトのジャンルを選択すると、そのジャンルの構成やテイストに合ったテンプレートデザインが表示されているので、自分の好みのものを選びます。

デザインを選ぶと早速ページ作成エディタに遷移しトップページから作成が開始されます。

作成エディタ

以前の作成画面と比べると、左にサイトマップツリーのようなページ管理エリア、右にプレビュー、下にHTMLソースの編集など、画面がいくつか分割されて構成されています。

ページの作成や編集は右のプレビューエリアから操作しますが、デザインテンプレートにもともと用意されている要素を編集する場合は、パーツをドラッグして位置を調整したり、クリックして表示される「テキストを編集する」などのメニューからテキストを編集したり、手を加えたいパーツを触ることで自分おこないたい操作がわかりやすく案内されるようになっています。

ページ上に新たなパーツを配置するにはプレビューエリアにある「+」ボタンから、テキストや画像やボタンのパーツを選択して簡単に画面上に追加することができます。

見出しの大きさやボタンの種類も様々なものが用意されているので、デザインが得意ではない人でも楽しみながらパーツを追加していけるのではないかと思います。

新しくページを追加するには、プレビューエリアの「+」で表示されるメニューの「ページ」を選択するか、画面左のページ管理エリアから追加します。
ページ名称を入力後はヘッダーやメニューなど共通エリアのみが表示され他画面が出てくるのでコンテンツエリアに見出しやテキストや画像など配置していくことで簡単に作成することができます。

ページの追加から編集まで、操作が分からない場合でもエディタ画面を操作してみるとやりたいことがわかるUIになっていて、HTMLなどの知識がなくてもとても簡単で楽しく作成することができるようになっています。

完成したWebサイトはエディタ画面右上の「公開」ボタンからすぐに公開することができ、デフォルトでは「Wix.com」で作成したアカウントベースのドメインになっていますが、独自ドメインを設定することも可能です。

公開操作もボタン一つで簡単になっていますが、公開した後にサイトを非公開にするには一度ゴミ箱に移動しないといけないといった手順がすこしわかりづらかったので、作成途中であやまって公開してしまわないように注意することが必要です。

サイトパフォーマンスとセキュリティ

「Wix.com」では、作成したWebサイトのサイトパフォーマンスとセキュリティにも力を入れていて、SEOで重要視されるCore Web Vaitalsの各項目がCMSとしてWordPressを越えたと、多くの海外SEOメディアで報道されていたりもするようで、公開後のサイト評価についても安心できます。

Core Web Vitals Winner: WordPress, Drupal, Duda or Wix?(海外記事)

Web サイトのセキュリティ | サイトをいつでも安全に保護 | Wix.com

進化した最新の「Wix.com」を操作してみて感じたのは、エディタ上の動作に重さをほとんど感じることなく軽快に操作ができることと、パーツ追加や編集操作の案内がとても分かりやすく、迷うことなく作成を進めていくことができるように親切に作りこまれているUI/UXだと思います。

Wix ADIとプレミアムプラン

Webサイトを作成する際にどのようなコンテンツ構成にすればいいのかすらわからないような場合には、「Wix ADI」といういくつかの簡単な質問に答えるだけで、ADI(人工デザイン知能)が最適なコンテンツを作成し、ほんの数分で自動でWebサイトを作成してくれる便利な機能もあります。

「Wix ADI」のような、ほかにはない機能でも基本的には無料で使うことができますが、容量増加や広告の削除などといった、プロフェッショナル向けの有料プレミアムプランも用意されています。

Wix ご利用料金 | Wix プレミアムプラン | Wix.com

無料で簡単に作成できるホームページ作成ツールはいろいろとありますが、作成から公開までの操作が分かりやすく作りこまれているうえに、公開後のサイト評価までサポートされている「Wix.com」は、今後のホームページ作成ツールとして、とても強力なツールになるんじゃないかと思います。

手軽にWebサイトを作成して公開する際にぜひ。

]]>
https://black-flag.net/web_service/20220323-7588.html/feed 0
Three.js(WebGL)3Dアニメーションの背景を作成できる「Vanta.js」 https://black-flag.net/javascript/20220125-7554.html https://black-flag.net/javascript/20220125-7554.html#respond Tue, 25 Jan 2022 00:25:10 +0000 https://black-flag.net/?p=7554 Webサイト上でも3Dを使った表現が最近とても増えてきている中、Webページの背景として設置する3Dアニメーションを簡単に作成できる「Vanta.js」が便利だったので、自分用のメモ書きとして紹介してみます。

Vanta.js – Animated 3D Backgrounds For Your Website


Vanta.js

「Vanta.js」はThree.jsを使ったWebGLの3Dアニメーションを作成できるJavaScriptライブラリです。

使用方法はとても簡単で、Three.jsとVanta.jsを読み込んで「Vanta.js」サイトのプレビューで設定した値をコピペするだけで設置することができます。

3Dエフェクトは「Birds」「Clouds」「Dots」「Rings」など13種類。
(2022年1月現在)

ライブラリファイルは各エフェクトごとに用意されています。

試しに「Birds」「Clouds」をカスタマイズして貼り付けてみると以下のような感じになります。

BIRDS

See the Pen
Vanta.js – BIRDS
by BLACKFLAG (@BlackFlag)
on CodePen.

CLOUDS

See the Pen
Vanta.js – CLOUDS
by BLACKFLAG (@BlackFlag)
on CodePen.

サイト上で色味やサイズなどを調整したスクリプトを貼り付けるだけで実装できるのでとても手軽で簡単です。
※各ライブラリファイルはCDNで読み込んでいます。

サイトの背景や透過した写真と重ね合わせて使ったりしておもしろい表現ができそうです。

サイト上に手軽に3Dエフェクトを組み込む際にぜひ…

]]>
https://black-flag.net/javascript/20220125-7554.html/feed 0
CSSのアニメーションを停止(無効)する方法 https://black-flag.net/css/20211215-7519.html https://black-flag.net/css/20211215-7519.html#respond Wed, 15 Dec 2021 00:30:34 +0000 https://black-flag.net/?p=7519 先日「CSSでhoverアニメーションの実行をPCのみに制御する」のタイトルでhoverアニメーションをスマホのみで実行させる方法を紹介しましたが、PCレイアウトではアニメーションを実行させて、CSSメディアクエリーでSPレイアウトになった際にアニメーションを無効にする、という制御のやり方もあります。

指定方法はとくに記事にするほどの内容ではなかったりしますが、アニメーション動作を制御する視差効果に対する指定方法ふくめ、CSSアニメーションを無効にする方法を自分用メモとしてまとめておきたかったので紹介してみます。

CSSのアニメーションプロパティを停止(無効)する

CSSアニメーションの「animation」「transform」「transition」といったプロパティを無効にするには、「none」や「unset」を使用します。

CSSアニメーションを設定した状態で、CSSメディアクエリーで特定の画面サイズ以下でアニメーションプロパティを無効にする際の記述例は以下になります。

@media only screen and (max-width: 768px) {
	.animate {
		animation: none;
		transform: none;
		transition: unset;
	}
}

CSSメディアクエリー内でアニメーション実行前の値を「!important」で指定するという手段もありますが、「none」や「unset」を使用した方がスマートに無効化することが可能です。

prefers-reduced-motionで視差効果の設定を判別してアニメーションを無効にする

アニメーション動作については、ユーザーが使用しているデバイスで意図してアニメーションなどの動きのある動作を制御する「視差効果を減らす」といった設定もあります。

この機能は使用電力の消費をおさえたり、画面上の動きのせいで酔ったりめまいがするのを防ぐための設定になりますが、この視差効果をオンにしている状態を判別してWebページ上でもアニメーションを制御することができます。

視差効果の設定有無についてはCSSメディアクエリーの「prefers-reduced-motion」を使用して判別します。

@media (prefers-reduced-motion: reduce) {
	*,*::before,*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

「prefers-reduced-motion」の設定は、視差効果がオンになっている場合は「reduce」、オフの場合は「no-preference」の指定になります。

上記では視差効果がオンの場合は、すべての要素に対してアニメーションの再生時間を「0.01ms」と極端に短くすることで、動作を無効にするというより、アニメーションさせる間もなく一瞬で動作を完了させてしまう処理になっています。

この視差効果の各デバイスでの設定方法は以下になります。
※下記設定は2021/12/15現在の最新OSでの設定手順になります。

iOS 設定 → アクセシビリティ → 動作 → 視差効果を減らす
Android 設定 → ユーザー補助 → アニメーションの削除
Windows10 設定 → 簡単操作 → ディスプレイ → Windowsにアニメーションを表示する
Mac OS システム環境設定 → アクセシビリティ → ディスプレイ → 視差効果を減らす

「prefers-reduced-motion」の対象ブラウザは以下でIEは対応していません。

視差効果に関してはあまり使う機会はない指定だと思いますが、アクセシビリティにもかかわる設定になるので覚えておくと役に立つときがありそうな気がしています。

CSSアニメーションを無効にしたり視差効果を処理する際にぜひ。。。

]]>
https://black-flag.net/css/20211215-7519.html/feed 0
CSSでhoverアニメーションの実行をPCのみに制御する https://black-flag.net/css/20211110-7483.html https://black-flag.net/css/20211110-7483.html#respond Wed, 10 Nov 2021 00:30:16 +0000 https://black-flag.net/?p=7483 iPhoneやAndroidのスマホやタブレットなどのタッチデバイスでCSSのhoverアニメーションをつけていると、タップ(クリック)動作にいろいろと支障がでることがあります。

CSSで指定するhover動作をスマホやタブレットでは無効にさせてPCのみで実行させるために、JavaScriptでデバイスの判定をしたりすることもありますが、CSSのメディアクエリーだけでも制御ができるのでメモとして紹介します。

mediaクエリーのhoverとpointer

PCデバイスのみにCSSのhover動作を実行させるには、CSSメディアクエリーで判定できる以下の2つを使用します。

・使用デバイスがhoverを使えるかどうか
・使用デバイスのポインターの種類

この2つを組み合わせることでPCのみを判定させた状態を作り、その中にhover動作の指定を記述します。

実際の記述方法については以下です。

a {
	opacity: 1;
	transition: all .5s linear;
}

@media (hover: hover) and (pointer: fine) {
	a:hover {
		opacity: .5
	}
}

「@media (hover: hover) and (pointer: fine) { ~ }」の中に書かれた記述は、hover動作が使えるデバイスかつ、ポインターがマウスポインターのデバイスのものが対象になり、マウスポインターを使ってhover動作を操作できるPCデバイスが対象となります。

hover動作がなく、ポインターもマウスポインターではない、iPhoneやAndroidのスマホやタブレットなどのタッチデバイスは対象外ということになり無効にさせることができます。

このようにCSSメディアクエリーでPCデバイスのみ対象の状態を作り、その中でhoverアニメーション動作を指定することで、スマホやタブレットに動作させることなく、PCのみでの動作を実装することができます。

CSSメディアクエリーの「hover」と「pointer」のメディアタイプとメディア特性の詳細については以下です。

@media hover

@media (hover: hover) {
	~ hover動作が使えるデバイス ~
}

@media (hover: none) {
	~ hover動作が使えないデバイス ~
}

@media pointer

@media (pointer: fine) {
	~ ポインターデバイスあり(正確性が高い) ~
}

@media (pointer: coarse) {
	~ ポインターデバイスあり(正確性が限定) ~
}

@media (pointer: none) {
	~ ポインターデバイスなし ~
}

対象ブラウザは以下でIEは対応していません。

来年にはIEのサポートも切れるので、今後はこの判定を使って手軽にhoverアニメーションを組み込んでいけそうです。

CSSでhoverアニメーションを制御する際にぜひ。。。

]]>
https://black-flag.net/css/20211110-7483.html/feed 0
無料で商用利用可能なフリーアイコン素材サイト10選+αまとめ https://black-flag.net/web_material/20211019-7376.html https://black-flag.net/web_material/20211019-7376.html#respond Tue, 19 Oct 2021 00:30:19 +0000 https://black-flag.net/?p=7376 先日、「無料で商用利用可能な写真&動画フリー素材サイト10選まとめ」として無料で使える写真や動画をフリー素材サイトを紹介しましたが、今回はアイコンについて、会員登録せずにダウンロードができるフリーアイコン素材サイトでよく利用させてもらっているものを自分用メモとしてまとめてみました。

アイコン素材が無料でダウンロードでき、著作権表示も不要で商用利用可のものを集めてありますが、サイトによっては規約が変わることもありますので、ご使用の際は各サイトの利用規約を確認するようにしてください。

6000個以上のアイコン素材を無料でダウンロードできるサイト ICOOON MONO


ICOOON MONO

ポップでクオリティの高い6000個以上のアイコンがダウンロードできます。
検索もしやすくサイズや色を指定できるうえにファイル形式をPNG/JPG/SVGから選ぶこともできます。

商用可の無料(フリー)のアイコン素材をダウンロードできるサイト『icon rainbow』


icon rainbow

シンプルだけど細部まで作りこまれたクオリティの高いアイコンがダウンロードできます。
こちらも検索もしやすさから、サイズや色やファイル形式(PNG/JPG/SVG)を選ぶことができて便利です。

IFN 無料アイコン。SVG/EPS/PNGのフリー素材


IFN

カテゴリーやタグ検索から直感的にアイコンを探すことができます。
シンプルでどんなテイストにも合わせやすいアイコンが揃っています。

iconmonstr – Free simple icons for your next project


iconmonstr

3000点以上のアイコンをSVG/EPS/PSD/PNGの形式でダウンロードできます。
元データとしてファイルをダウンロードできるのでちょっとした編集も可能です。

無料アイコン素材|ICON BOX


ICON BOX

パスが編集できる商用フリーのアイコン素材集として、PNG/SVGの形式でファイルをダウンロードできます。
とてもシンプルで使いやすいテイストのアイコンが揃っています。

human pictogram 2.0 (無料人物 ピクトグラム素材 2.0)


human pictogram 2.0

非常口や標識などで見るピクトグラムをベースに、さまざまなポーズの人型ピクトグラムがダウンロードできます。
ほかにないパターンのピクトグラムが用意されているので人型のアイコンが必要な際に便利です。

ガジェットストック|スマホ・パソコンなどの無料イラスト・フリー素材サイト


ガジェットストック

シンプルなアイコンに加えて、アイソメトリックのアイコンをダウンロードすることができます。
PC機器から人物までアイソメトリックの素材が必要になった際にとても助かります。

FLAT ICON DESIGN -フラットアイコンデザイン-


FLAT ICON DESIGN

「PC・ビジネス」「日用品・生物」「イベント・エンタメ」「健康・料理・食品」「交通・地図」などのカテゴリに分かれてフラットデザインのアイコンが用意されています。
ai/EPS/JPEG/PNG/SVGとダウンロード形式も豊富です。

Material Icon


Material Icon

Googleが運営するマテリアルデザインに対応したアイコンです。
今ではGoogleフォントとして用意されていて、無料で使用することが可能です。

SVGPORN


SVGPORN

さまざまなサービスや企業のロゴをSVG形式でダウンロードできます。
Webツールやライブラリ系のアイコンもあり、なにかのロゴが必要になった際はこのサイトを見れば手に入りそうです。

以上が商用利用可の無料アイコン素材サイトまとめですが…もう一つおまけとして、アイコン素材ではないのですが、最近流行りにもなりつつあるアイソメトリックのイラストを商用利用可で無料でダウンロードできるサイトもメモとして残します…

Isometric | Download free isometric illustrations


Isometric

クオリティの高いアイソメトリックのイラストがダウンロードできます。
SVG/PNGがセットになってダウンロードできカスタマイズも可能です。

以上が商用利用可の無料アイコン素材サイト+アイソメトリックイラスト素材サイトのまとめでした。

国内外でクオリティの高いものからシンプルで使いやすいアイコンまで、フリーで使用できるサイトがたくさんあって本当にありがたいかぎりです。

商用フリーのアイコン素材を探す際にぜひ。。

QUERYY

最後に追加で…ジャンル別フリーアイコンについてはこちらも参考にしてみてください。

【無料】フリーアイコンの素材サイト43選!ジャンル別に紹介 | QUERYY(クエリー)

]]>
https://black-flag.net/web_material/20211019-7376.html/feed 0