直観が頼りにならない SO(3)とSU(2)が出てきたので両者の関係について少し書いておこう. SO(3)は 3 次元での回転と同じ対称性を意味しており直観的に把握できた気分になる.対して SU(2) の方は 2 次元とは言ってもその成分が複素数であり全体像がイメージしにくい. ところがその構造を調べてやると意外にもSO(3)の方が複雑で,SU(2)の方があっさりしているのである. SO(3)は構造が複雑 3次元空間での回転と言っても,あらゆる方向を軸として色んな回転の仕方があるのである. ボールを手に持って回し,色んな方向を向ける様子を思い浮かべてみて欲しい.無意識に行っているかも知れないが,次々と色んな軸に沿った回転をさせている. 球面上のある一点をどこか別の点へ移動させるのも回転の一つだが,それを実現したときの球面全体の姿勢というのは一通りではない.回転にバリエーションがありすぎて,

【CSS】animation・keyframesを徹底解説 公開日:2019/01/20 /最終更新日:2019/07/05 CSS Technique 今回は「animation」、「keyframes」について、細かく徹底的に解説していきます。 「animation」、「keyframes」については知ってはいましたが、アニメーションさせるなら「transition」でいいんじゃない？と思って使っていませんでした。 しかし、当サイトのGALLERYに掲載するサイトを日々収集していると、面白いアニメーションをさせているサイトにたくさん出会います。気になるとコードまで調べて見てみるのですが、たくさんのサイトで「animation」、「keyframes」が使われておりました。 そこで、私もWeb制作者の端くれとして、これを機にしっかりと身につけようと、今回の記事をアップするに至りました。

現在、もっともポピュラーでカスタマイズ性が高く実装が簡単な、レスポンシブ対応のスライドショーjQueryモジュールである「slick.js」。 弊社にて提供中のWordPressテーマ「DigiPress」シリーズの次期テーマには、トップページのスライダーに動画を含めることが要件としてあるため、今回はそんな人気のスライドショーモジュール「slick.js」を利用して、画像だけでなくYouTube、Vimeo、さらにHTML5のvideo要素の動画もスライドとして含める方法を、次期リリース予定のテーマ向けに考えてみました。 今回のデモで動画スライドを含めたスライドショーを実装する要件は以下です。 スライドに動画を含める要件 動画は、YouTube、Vimeo、video要素のムービーを含めることができる 動画スライドが表示された際は、自動再生させる 動画スライドが非アクティブになった際は、一

プラグイン不要のjQueryとCSSを使った簡単なモーダルウィンドウの実装方法をご紹介します。 まずはサンプルをご覧ください。 モーダルのサンプル See the Pen simple modal window01 by RECOOORD (@recooord) on CodePen. See the Pen simple modal window01 by RECOOORD (@recooord) on CodePen. 上記2つのサンプルはHTMLの文章量が異なるだけで、CSSとjQueryは同じコードを使っています。 特徴としては、文章量が少ない場合は、ブラウザ中央に表示され、文章量が多い場合はモーダルをスクロールして閲覧することができます。 HTML <!-- モーダルを開くボタン --> <div class="modal-open">モーダルを開く</div> <!-- モーダ

【jQuery】slickの使い方とよく使うサンプル集 公開日 : 2022.07.04 最終更新日 : 2023.11.07 コーディング スライダーのプラグインは数多くありますが、その中でもよく使われる「slick」について、使い方とよく使う実装方法についてご紹介します。 今回紹介するサンプルを組み合わせることで様々なカスタマイズにも対応できるかと思いますので、是非参考にしてみてください！ slickの導入方法slickを使うためには、以下2つの方法があります。 ファイルをダウンロードして読み込む方法CDNを使って読み込む方法なお、slickを利用するためはjQuery本体の読み込みも必要になるので、忘れずに！ slickファイルをダウンロードして使う場合公式サイトにアクセスし「get it now」をクリックします。 「Download Now」をクリックすると、skickのファイル

[HTML] <div> <ul> <li><a href="https://sunsukeblog.com/tag/html">HTML</a></li> <li><a href="https://sunsukeblog.com/tag/css">CSS</a></li> <li><a href="https://sunsukeblog.com/tag/wordpress">Wordpress</a></li> </ul> </div> [CSS] div { text-align:center; margin:10px; } ul li { list-style-type:none; display:inline-block; font-size:80% } ul li a{ display:block; height:auto; min-width:100px; max-width:

See the Pen 9-6-2　ページを開くと、背景が暗くなり動画を表示 by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen. 「Result」下のRerunを押して動きを確かめてね！↑ 動きを実現する仕組み Modaal というモーダルウィンドウを表示するライブラリを使い、ページにアクセスしたら初回だけ背景が暗くなり動画を表示。 ［使用するライブラリ］ ＊ jQuery ＊ Modaal（http://humaan.com/modaal/） HTMLの書き方 head終了タグ直前にModaalのCSSと自作のCSSを2つ読み込みます。 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Modaal/0.4.4/css/modaal.mi