はじめに
Amebaブログの新CSSはまだ慣れない方も多いのではないでしょうか。新CSSも簡単に調査すると理解できる部分もあり，意外に使いやすい気がします。
今回はそんな新CSSのデザインでスクロールしてもプロフィールが固定されちゃう原因を調査してみたいと思います。
このプロフィールが固定されると，ヘッダ部のメニューが固定されず，メニューが崩れて問題になります。私が新CSSに移行できなかった原因でありました。これが解決できれば新CSSに移行できるのでとっても重要なこと。この原因特定の方法を今日は特別お話ししちゃいますね。
ちょっと難しいかもしれませんが，やってみてください。やってみるとそれほど難しくないかもしれないのですが，説明が分かり難いと思いますので。
この記事をリンクして，説明しちゃってください。そして，わかりやすいのが出来たら，ぜひコメントでその記事のアドレスを教えて下さい。私のこの記事でその記事のアドレスをリンクで紹介させて頂きます。
難易度：★★★
現状
現象：スクロールするとプロフィール部分が移動する
fig1 スクロール前：プロフィール部分に注目
fig2 スクロール後：記事が移動しているのにプロフィールが固定！！
調査の前に考えること
”考え方を考える”から行いました。今回は短い時間で判断したかったので，仮説を立ててから検証する方法をとりました。
この現象はHTMLを動的に書き換えていると仮説を立てました。（動的に書き換えているとは，スクロールをしたらあるところで自動的にCSSかHTMLを書き換えることです）
そして，その仮説を検証する方法で進めることとしました。
- 目的を明確にして，問題と課題を定義
- 仮説を立てる
- 仮説を検証
- 実行する
検証
検証方法はChromeとかFirefoxのデフォルトにあるHTMLやCSSを検証できる機能を使います。
Chromeの場合
Chromeでは右クリックで出てくるメニューの検証（I)を選択。
fig3 Chromeの場合
Fireoxの場合
右クリックのメニューで要素を調査（O)を選択。
fig4 Firefox場合
調査方法
ChromeやFirefoxの検証や要素の調査を利用する。目的のプロフィールのHTML部分を表示してスクロールをして何が変わるのか調査する。調査した結果，やはりHTMLのstyleが書き換わっている。
fig5 スクロール前
fig6 スクロール後
<div style="" id="subA" class="skin-blogSubA" amb-layout="subA">
<div style="" id="subAInner" class="skin-blogSubAInner" amb-layout="subAInner">
スクロール前
<div style="height: 10868px;" id="subA" class="skin-blogSubA" amb-layout="subA">
<div style="margin-left: 50px; position: fixed; top: -300px; left: 1111.5px;" id="subAInner" class="skin-blogSubAInner" amb-layout="subAInner">
スクロール後
対策
対策方法：CSS
IDのsubAInnerのポジションを通常の位置に配置して，表示位置を上から10pxにしてみました。ここで!important;を指定することで優先順位を高くして，HTMLが書き換わってもこちらの指定を優先するようにします。
#subAInner{
position:static!important; /* ポジションを通常表示 */
margin-top: 10px!important; /* 上から10pxに固定 */
}
対策案を確認
実際にCSSの最後に追加して確認をします。予想通りでした。これでトップのメニューが崩れないようにできました。
さいごに
なにか仕事や作業をするときには”考え方を考える”をしては如何でしょうか。今回は仮説思考を採用しました。仮説思考は時間短縮に便利ですね。Webの検索なども仮説を立ててから検索調査をする。そうすると時間を短縮できます。研究も仮説を立ててから検証する。同じですね。
どんな仕事でもいろいろな思考方法があります。仮説思考はいろいろな仕事でもつかえます。
今回はCSSの話から”考え方を考える”までの話に発展しましたね。単純なことなのですが，”考え方を考える”からやって，実際に実行する。いつも考えないで実行しているひとは考えても良いかもしれません。そして，考えてばかりで実行に移せない方は，考える時間を決めてから実行してみましょう。