ビジュアルメディア（絵、インフォグラフィックス、地図など）を論文や正式なプレゼンテーションで引用する場合の特別な規則の基本的な案内はあまり見かけませんが、規則は存在しますし、スタイルガイドによってそれらの規則は異なります。ここでは引用に必要な情報と記載方法をAPA、MLA、シカゴ、バンクーバースタイルに沿ってご紹介します。 他の出典からの画像を使用する場合、または記事に画像そのものを挿入したり、読者にその画像を他の出典元から見て欲しい場合（例えば美術館にある絵画など）、文中引用と同時に別途の参照解説（reference entry）が必要です。 そして参照解説には下記の詳細を含める必要があります。 －創作者の名前（例えばアーティストや写真を撮った人の名前） －画像のタイトル －創作されたり出版された年 －画像のフォーマット（絵画、写真など） －画像のある場所や鑑賞出来る場所（博物館、ウエブ

公式マニュアル：MLA Handbook こちらは、MLA公式サイトからペーパーバック、電子書籍で販売されており、日本語版もあります。学術的論文を頻繁に書くことがあるならば、一冊手元に置いておきたいですね。 英語のレポートや論文における英文引用ルール 文中で引用を利用する際、使い方は2通りあります。 ・引用部分をそのまま使う ・引用部分を自分の言葉で要約して使う 『不思議の国のアリス』（1866）の冒頭部分を使っていくつか例をみていきましょう。引用符ダブルクォーテーションマークの使い方に注目です。 言葉をそのまま使う英文引用 1行だけ引用 1行だけ本文中に入れて引用する形は、以下のようになります。 The beginning of Alice’s Adventure in the Wonderland is ”Alice was beginning to get very tired of

左から・右から・真ん中から画像が際立つ CSS アニメーションの紹介です。アイキャッチ画像や本文中の画像、ランディングページの画像など、いろいろな画像に使えます。 サンプルは、便宜上アニメーションの再生回数を無限にしています（提示している CSS のアニメーション回数は 1 回です）。 共通の HTML 。 <div class="img-wrap"> <img /> </div> 左から徐々に表示するアニメーション。 CSS 。 .img-wrap { overflow: hidden; position: relative; } .img-wrap::before { animation: img-wrap 2s cubic-bezier(0.4, 0, 0.2, 1) forwards; background: #fff; content: ''; inset: 0; pointer

CSSのtransitionプロパティは、マウスオーバー時のアニメーションを指定できるプロパティです。 WEBデザインにちょっとしたアクセントを加えたい時に便利なCSSですが、何らかの原因で上手く機能しないことがあります。 しかし、その原因のほとんどは、コーディング上のほんの小さなミスだったりします。 今回は、transitionが効かない時の原因とその対処法についてまとめてみました。 transitionの基本的な使い方 まずtransitonの基本的な使い方を簡単におさらいしておきましょう。 transitionはマウスオーバー時の色や大きさ、位置などの変化に「時間」を設けるためのプロパティです。 マウスオーバー時の変化にはCSS疑似クラス:hoverを使いますが、transitionが指定されていない場合、変化前後の切り替わりが一瞬です。 transitionを追加することによって「

ボタンや画像にカーソルを乗せた時の反応って大事ですよね。リンクするエリアにカーソルを合わせた時に、カーソルが指のアイコンに変わったり、テキストの色が変わったりすれば、カーソルが乗ったという事が認識しやすくなります:)。 それに加えて、ちょっとしたエフェクトがあれば、温度や感触や、世界観まで伝えられるかも。 ふわっとする 下のサンプルみたく、:hoverを使ってスタイルを指定しておけば、カーソルが乗った時に、そのスタイルが適用されます。 けどそれだけだと、カチッと切り替わるだけ。 a:hover { color: #dc6688; text-decoration: inherit; } サイトの雰囲気にもよるけれど、もちょっとだけ柔らかい印象にしたいなって時には、ふわっとするとよいかもです。文字色の変わり方と、下線の消え方を滑らかにすることで、ふわっとした感じになります:)。 この切り替わり

CSSは使いようによっては様々な表現が可能な奥深い言語です。しかし、アニメーションなど凝った動きをするものに関してはコードは見れても実装方法を詳しく解説している記事は多くないように思えます。 この記事では、私（さかっちょ）がTwitterで過去にツイートしたCSSの技術をCodePenで改めて実装し、Twitterでは解説しきれなかった実装方法をより詳しく説明しています。CSS初学者の方にもわかりやすいように解説していますので、ぜひ参考にしてみてください。 その1. 一文字ずつ登場するテキストアニメーション See the Pen [CSS Tips] Text Show-up Motion by Takuro Sakai (@sakaccho) on CodePen. 一文字ずつtransformで移動させています。文字が途切れることなく流れるようにtransition-delayを調整

はじめに こんにちは！NNCの大土です。 今回の記事では、アニメーション表現で使用するCSSのtransition・animationプロパティについて、またCSSだけで実装できるアニメーション表現・作例をご紹介していきます。 WEBサイトでただ静的コンテンツが並んでいるだけではなく、表現に動きをつけてあげることによって、目を惹く・印象に残りやすいデザインを作ることができるアニメーション。 さまざまなWEBサイトがあるなかで、こういったアニメーション表現はそのサービスや企業オリジナルの雰囲気を演出し、差別化にも役立つため、もはや必須と言っても良い技術になっています！ また、動きの表現というとjavascriptを使用するイメージを持っている方も多いと思いますが、CSSだけで再現できるアニメーション・動きも実はたくさんあります。 紹介するものは全てHTML・CSSのコードを載せていますので、

タイトルの通りです:) 判定の考え方にも色々あるため（要素が1pxでも入っていればいいのか？画面の中央に来たくらいがいいのか？など）、そのあたりも網羅していきたいと思います。 色々な判定の組み合わせ一覧 画面の下部 × 要素の上部 要素が1pxでも画面に入ったら、という判定です。 var scroll; var winH = $(window).height(); var objTop = $('.obj').offset().top; $(window).on('scroll', function(){ scroll = $(window).scrollTop(); if(scroll >= objTop - winH){ //ここに処理 } }); var scroll; var winH = $(window).height(); var objH = $('.obj').outer

はじめに どうも、NNCの石上です。 前回に引き続き、ちょっと高度なアニメーション演出を紹介していきます。 スクロールと連動したサイズ変更 以下の動画をご覧ください。 最初は小さかった文字が、画面に入ってくるにつれて大きくなっていったのがわかると思います。このようにスクロールと連動して文字サイズを変更する演出を作ります。 <section class="l-section p-jon"> <ul class="p-jon__list"> <li class="p-jon__item">Twitter</li> <li class="p-jon__item">Facebook</li> <li class="p-jon__item">Instagram</li> </ul> </section> $('.p-jon__item').each(function(){ var $win = $(

2019年1月11日 CSS 画面領域いっぱいに広がるフルスクリーンレイアウト。近年ではよく目にしますね。スクロールした時に画面にピタッと各エリアを表示させたい時に使えるのが「CSSスクロールスナップ」です。JavaScriptなしでスクロール位置を調整してくれますよ！ ↑私が10年以上利用している会計ソフト！ スクロールスナップの基本 See the Pen scroll-snap basic demo by Mana (@manabox) on CodePen. スクロールすると、各エリアの中途半端な位置で停止せず、エリアがすべて見える位置でピタッと止まりますね！このデモの構成を見ていきましょう： HTML ピタッと移動させたい各要素を親要素で囲みます。この例では親要素に「container」、子要素に「area」というクラスをつけました。 <div class="container"

〒606-8172 京都府京都市左京区一乗寺河原田町48−３

transition-timing-functionプロパティは、トランジションの進行度（速度とタイミング）を指定します。CSS3におけるtransition-timing-functionプロパティの意味と使い方、値の指定方法、サンプルコード、使用例について解説します。

こんにちは、ナカムラです。 今回はCSSで角度が変わらない斜めの背景の作り方をご紹介します。 ウィンドウ幅いっぱいに、なおかつ斜めになっているデザインはよく使われます。 やり方はいろいろあると思いますが、今回はclip-pathを使ってみたいと思います。 clip-path - CSS: カスケーディングスタイルシート | MDN 実現したい条件 背景はウィンドウ幅いっぱいに表示する 斜めの角度は変わらないようにする コンテンツのボリュームが変わっても高さが変動するようにする DEMO See the Pen 角度が変わらない斜めの背景 by Nakamura (@takayo-nakamura) on CodePen. HTML .sectionの中には.section_backgroundと.section_innerの要素があります。 .section__backgroundは背景用