#34 【CSS・jQuery・Javascript】サイドバーの追加（追従型）・レスポンシブ対応（仮）

【CSS・jQuery・Javascript】サイドバーの追加（追従型）・レスポンシブ対応（仮）

What's FUCK.....#はてなブログ #プログラミング #CSS #JavaScript #jquery pic.twitter.com/ign7l3J1aY

— いっと@プログラミング超初心者 (@fukuwarai666) 2018年4月22日

ブログのレスポンシブ対応と左サイドバーの追加をしました。٩( 'ω' )و

（未完成のため大目に見ていただけると幸いです・・・）

コードはこちらです。（大分省いていますので説明不足ですみません。）

<!-- html1とhtml2を用意 -->
<div id="html1">HTML1</div>
<div id="html2">HTML2</div>

<!-- ここから動きを与えるよ٩( 'ω' )و -->
<script>
  //ページを読み込んだ時に動くよ
document.addEventListener('DOMContentLoaded', function(){
  var $headerBottom = $('#html1'); //html1の要素を変数にしまっておきます
  var $topModule = $('#html2'); //html2も同様に

//resize()はウィンドウサイズが変更された時に動くよ٩( 'ω' )و
  win.resize(function(){
    //ウィンドウサイズが1000より小さくなった時
  　if(window.innerWidth < 1000) {
    //命令を与える要素.hide()で要素を隠すよ（display:none;）
      $html1.hide();
    //ウィンドウサイズが1000より小さくなかった時
    }else{
      //命令を与える要素.show()で要素を表示するよ（display:block;）
      $html1.show();
    };
  });

//scroll()はスクロールされた時に動くよ٩( 'ω' )و
　win.scroll(function(){
  //スクロール位置が1000より大きかった時
　　if(win.innerHeight > 1000) {
      $html2.hide();
　　}else{
      $html2.show();
    };
　 });

//ちなみに、指定した要素を固定する場合は・・・
　　　html1.css("position",'fixed');
　　　html1.css("top",'0px');
//こんな感じでhtml1に対してCSSの命令を与えることもできるよ٩( 'ω' )و

//逆に固定した要素を解除するCSSは・・・
　　　sideLast.css("position",'relative');

//これらの組み合わせで好きな位置に要素がきたら固定するみたいです。
//以上。
</script>

ブログのレスポンシブ対応

まずパソコン以外のデバイスで見るときにデザインが崩れないようにしました。

もともと、トップに固定されているメニューバーが

ウィンドウサイズ小さめで見ると少し崩れていたんですよ。

これを、あるウィンドウサイズ以下になると非表示にしました。٩( 'ω' )و

正直鬱陶しいかなって思いましたので・・・。

左のサイドバーを追加（追従型）

次にこちらの左のサイドバーを追加しました。

⇩⇩⇩⇩⇩

一定の位置になると出現して追従してくれます。

トップへ戻るを押すと一番上まで戻ります。

あとは、ウィンドウサイズが小さくなると消えるようにしています。

（鬱陶しいので・・・）

これでいつでもあなたを見ていられますよ！

（しつこいですね・・・）

まとめ

今回は説明する気力がなくざっと変更点を伝えるくらいしかできません。

案外時間がかかってしまったもので・・・。難しいですね・・。

しかも不具合が直っていない！！！イライラ。

また気が向いたら近々デザイン変更や諸々したいと考えています。٩( 'ω' )و

SNSボタンとかいじりたいですねー。

読者登録者数が100人とか超えたら頑張ろうかな。２ヶ月後だと嬉しいな・・・。

\フォローする/

はてな
Twitter
Feedly

にほんブログ村