投稿日:

HTMLのタグ1つだけで100種類のツールチップを実装できるCSSジェネレーター

タグ1つだけでcssをコピペするだけで、100種類のツールチップを実装できるジェネレーターを紹介します。
⇒CSS Generators: Tooltips & Speech Bubbles

シンプルなものからポップなものまで、しっぽの形や位置が違う100種類が用意されています。


使い方はとても簡単。
HTMLはたった1つのタグを記述するだけです。

<div class="tooltip">Your text content</div>

 
cssはツールチップをクリックしてコピペするだけ。

中身はこんな感じ。

.tooltip {
    color: #fff;
    font-size: 18px;
    max-width: 28ch;
    text-align: center;
}
.tooltip {
    /* triangle dimension */
    --b: 2em; /* base */
    --h: 1em; /* height */
    --p: 50%; /* triangle position (0%:left 100%:right) */
    padding: 1em;
    clip-path: polygon(0 100%,0 0,100% 0,100% 100%,
      min(100%,var(--p) + var(--b)/2) 100%,
      var(--p) calc(100% + var(--h)),
      max(0%  ,var(--p) - var(--b)/2) 100%);
    border-image: fill 0//var(--h)
      conic-gradient(#CC333F 0 0); /* the color */
}

 
上にあるスライダーを移動すると、好きな位置にしっぽを配置できます。

とても簡単ですので、活用してみてはいかがでしょうか。

投稿日:

HTTPステータスについて

今回は、Webサイトを閲覧しているときに404のエラーに遭遇した時、他の番号はどんなのがあるんのかな？と疑問に思ったため、【HTTPステータス】についてまとめていこうと思います。

 

目次

――――――――――――――――――――――――――――

  1. HTTPステータスとは
  2. ステータスコード一覧
  3. まとめ

――――――――――――――――――――――――――――

 

 ①HTTPステータス とは

HTTPレスポンスに含まれるWebサーバーの処理結果を表現する3桁の数字のことを指します。3桁の数字は「処理が成功した」、「リダイレクト（転送）がかかっている」、「エラーがある」、などさまざまな意味を持っています。

・100番台（Informational）：処理中

HTTPステータスコード 意味
100 Continue リクエスト継続可能
101 Switching Protocols プロトコル切り替え
102 Processing 処理中
103 Early Hints 早期に予想されるヘッダを伝達

②ステータスコード一覧

・200番台（Success）：成功

HTTPステータスコード 意味
200 OK リクエスト成功
201 Created リクエストが成功し、リソースの作成が完了
202 Accepted リクエストは受理されたが、まだ実行されていない
203 Non-Authoritative Information オリジナル以外の情報を含み信頼できない
204 No Content リクエストに対して送信するコンテンツがない
205 Reset Content リクエストのリセットを伝達
206 Partial Content 一部のリクエストが成功

 

・300番台（Redirection）：リダイレクト

HTTPステータスコード 意味
300 Multiple Choice リクエストに対し複数のレスポンスがある
301 Moved Permanently URLが永遠に変更されたことを示す
302 Found URLが一時的に変更されたことを示す
303 See Other リクエストに対するレスポンスが別URLにある
304 Not Modified リクエストしたリソースは更新されていない
307 Temporary Redirect 一時的なリダイレクト（302とほぼ同じ）
308 Permanent Redirect 恒久的なリダイレクト（301とほぼ同じ）

 

・400番台（Client errors）：クライアントエラー

HTTPステータスコード 意味
400 Bad Request リクエストが無効
401 Unauthorized 認証が必要
403 Forbidden クライアントにアクセス権がない
404 Not Found リソース・ページが存在しない
410 Gone リソース・ページが恒久的に削除された
411 Length Required リクエストにContent-Lengthヘッダーがない
429 Too Many Requests 一定時間内の大量リクエストによる拒否

 

・500番台（Server errors）：サーバーエラー

HTTPステータスコード 意味
500 Internal Server Error サーバー内部エラー
502 Bad Gateway ゲートウェイとして動作するサーバーが無効なレスポンスを受け取った
503 Service Unavailable サーバーの過負荷やメンテナンスにより利用不可

③まとめ

HTTPステータスコードは大きく分けると100番台、200番台、300番台、400番台、500番台の5つに大別できる。

100番台：情報処理中であるということを示すHTTPステータスコード

200番台：通信が成功したことを示すHTTPステータスコード

300番台：リダイレクト（転送）がおこなわれたことを示すHTTPステータスコード

400番台：クライアント側でエラーが起きていることを示すHTTPステータスコード

500番台：サーバー側でエラーが起きていることを示すHTTPステータスコード

 

以上でHTTPステータスについて　でした～。　

投稿日:

Unreal Engineのリターゲット機能について

Unreal Engineのリターゲット機能について

今回はUnreal Engineのリターゲット機能について紹介させていただきます。
リターゲット機能とは、既存のアニメーションを別のキャラクターでも使用できるというものに
なります。
この説明だけだとピンと来ないと思うのでリターゲット機能が如何に便利かということを説明
致します。

既存のアニメーションとは？
アニメーション（モーション）とは、以下の工程で作成されます。

1.キャラクター用3DCGを作成
2.作成したキャラクター用にボーンを作成
3.上記をもとに生成されたスケルタルメッシュファイルをもとにアニメーションを作成

補足としましてボーンはキャラクターの骨組み、スケルタルメッシュファイルはCGとボーンを
合成したようなファイルです。

上記で説明した通り、ボーンとアニメーションというのは親子関係のようなものになっています。
ボーンをもとにアニメーションを作成するということです。
したがって本来は、アニメーションはスケルタルメッシュが違うと同じアニメーションは使用すること
できません。

スケルタルメッシュA + スケルタルメッシュA用アニメーション => ○
スケルタルメッシュB + スケルタルメッシュA用アニメーション => ×

UnrealEngineのリターゲット機能を使用すると、アニメーションを共有することができます。
上記パターンでいうとスケルタルメッシュBでもスケルタルメッシュA用アニメーションを使用することが
できるということです。

このリターゲット機能を使用してみると、UnrealEngineのスケルタルメッシュやボーン・アニメーションの深い所まで
理解できると思うので皆様もチャレンジしてみてはいかがでしょうか。