<ul><li>問題点：Views Bootstrapのブレイクポイント設定が乏しい、設定されたブレイクポイントは画面1200基準（col-lg-xx）のものとなりました。</li>
<li>BootstrapのグリッドシステムがPC、タブレット、スマホのサイズに応じてカラム数を変更するのは本来の機能を活かすことができないです。</li>
<li>ここで、ｊａｖａｓｃｒｉｐｔ（ｊＱｕｅｒｙ）でページがロード時に、ブレイクポインを動的に追加します。例：col-sm-x, col-xsなどの属性をクラスの追加します。</li>
</ul>

<ul><li>Bootstrap導入後にモジュール（Better Exporsed Filters）のレイアウトが崩れました。</li>
<li>原因：Better Exposed Filtersの検索フォームの要素、プロパティがBootstrapテーマに書き直されました。</li>
<li>Bootstrapの「form-control」クラスがブロックの高さ（height）が定義しています。</li>
<li>「form-control」クラスがブロックの高さ（height）を消せば、通常の検索フォームに戻りました。</li>
</ul>

<h2>やりたいこと：画面サイズが変更（PC、スマホなど全デバイスの画面対応）時にposition:absolute要素の上下ポジションを保持したい</h2>

<ul style="margin-left: 40px;"><li>サイトの個人紹介ページに個人写真が背景イメージの上に載せする手法がよく利用されます
<ul><li>方法としては、cssで人の顔写真のプロパティ：position:absolute; top:200px などえ設定すればよいです</li>
</ul></li>
<li>ブラウザの幅が固定している場合は、ポジション（top）の固定値指定はできます</li></ul>

<h2>マウスオーバー：イメージのズームイン＋マウスクリック：イメージのズームアウト</h2>

<ul style="margin-left: 40px;"><li>マウスオーバー、クリック時のイメージのズームアウト、インの効果を作成したいです<br /><img alt="" height="338" src="/sites/pine/files/field/image/mouse-over-click-zoom-effect.gif" width="600" /></li>
</ul><h2>実現：ｃｓｓ＋jQueryで作成します</h2>

<p></p>

<ul><li>
cssのみでページャーのアニメ効果を作成します
</li>
<li>
ページャーのアンカータグと疑似クラス（after）を利用して矢印と文字を表示します

<ul><li>position：absoluteで矢印の配置場所を変更できるようにします</li>
<li>transform: translate(-30px, -42px)で矢印の配置場所をアンカーの文字（最終）に合わせます</li>
<li>transition: transform 0.3s ease-in-outでアニメ効果を高めます</li>
</ul></li></ul>

<h2>やりたいこと：ページがロード/スクロール時に、コンテンツがブラウザに次から次への流れ込むようなアニメ効果</h2>

<ul style="margin-left: 40px;"><li>ホームページがロード、またはスクロール時にコンテンツが一定な間隔で次から次へ流れ込むアニメ効果が比較的にコンテンツを強調しやすいです。</li>
<li>簡単なサンプルを作成して、以下のような効果となります：<br /></li></ul>

<ul style="margin-left: 40px; font-size: 13.008px;"><li>ページがロード後に、タイトルが一度スキャンのような動画効果を実現したいです。</li>
<li>CSSのAnimation効果だけを利用したいです</li>
<li>javascript、ｊQueryなどを使用しないこと</li>
<li>タイトルのレイヤーを上に設定します</li>
<li>タイトル要素（DIV）の疑似クラス（before）を利用して、スキャンのレイヤーを作成します</li>
</ul>

<ul><li>やりたいこと：PHPmyadminのSQLクエリ入力テキストエリアの入力フォントサイズを大きくしたい</li>
<li>codemirror.css.phpファイルで「.CodeMirror pre」のフォントサイズ変更</li>
</ul>