<ul><li>やりたいこと：タイマー（時間）を点滅できるように表示したいです</li> <li>JSの関数（setInterval(で、)）内タイマーを点滅させるcssプロパティ(animation)を追加します</li> <li>問題点：JSで同じcssプロパティ（animation）を追加したときにうまく動作しません</li> <li>解決１：CSSプロパティ（animation）の値（infinite）を追加</li> <li>解決２：二つ同じanimationのcss設定（@keyframes）を交代で設定します</li> </ul>
<ul><li>やりたいこと：残留時間が表示しながら円を描く動画効果のタイマーを作成します</li> <li>SVG+CSS+JSでタイマーの動画効果を作成します</li> <li>感想：SVGを利用したほうがCSS+JSのみの方式より簡単で、シンプルです</li> </ul>
<ul><li>やりたいこと：複数行のアンカータグの文字列を一行に短縮、末尾を三点リーダーにする。</li> <li>アンカータグのdisplayプロパティはinlineを継承しているため、末尾に三点リーダーがうまく表示できませんでした。</li> <li>アンカータグのdisplayプロパティを「block」、「inline-block」に指定すればよい。</li> </ul>
<ul><li>DrupalのモジュールをアップデートしたらBootstrapのボタン背景カラーが消えました。</li> <li>原因はwhhg.cssの背景設定（background:none）より（優位性）、ほかのボタンｃｓｓプロパティ（background関連）の設定が無効化されました。</li> <li>解決：whhg.cssの背景設定（background:none）を消してから、ボタンが正常に表示されるようになりました</li> </ul>
<ul><li>いろいろなcssのプロパティ設定後にページのスクロールバーが消えました。</li> <li>問題：cssのプロパティoverflow:hiddenとして設定したせいでした。</li> <li>通常overflowの値はhiddenとvisibleをよく使うため、scroll値を忘れてしまいましたため、この初級ミスを犯してしまいました。</li> </ul>
<h2>ページスクロールに応じて各ブロックのアニメーション効果のjsライブラリ：scrollme</h2>
<ul><li>scrollmeのホーム：<a href="http://scrollme.nckprsn.com/">http://scrollme.nckprsn.com/</a><br /><a href="/sites/pine/files/field/image/scrollme-animate.PNG"></a></li></ul>
<ul><li>問題点：Safariだけのcssレイアウト崩れ現象。</li> <li>解決：Safariのみにcss修正を行う。</li> </ul>
<ul><li>やりたいこと：複数のソーシャルリンクボタンを一行に配置する。</li> <li>問題点：ボタンが同じライン上に揃っていない。</li> <li>解決：ボタンをラップする親ボックスの配置を調整する。</li> </ul>
<ul><li>Drupalのブロックシステムにある「ハイライトされ」エリアにTwitterなどのフォローボタンを配置したいですが、テーマ（Bootstrap）のjumbotron、wellクラスよりハイライトエリアの表示バランスが崩れます。</li> <li>javascriptでページロード時に特定なクラス（jumbotron, well）を削除します。</li> </ul>
<p>現在、Bootstrap（v4）のグリッドシステムに、画面サイズが576pxのブレイクポイントが一番小さいです。実際のスマホサイズとシェアの調査（2017年度）によると約80%のスマホが横幅414px以下となっているため、410px～480pxぐらいのブレイクポイントが必要となります。Bootstrapのブレイクポイント設定を参考しながら、480px（仮に）のブレイクポイント（col-xxs-x）をcssファイルに追加します。</p>
