こんにちは、プログラミングスクールのレビューサイト「スクールレポート」を運営しているアカネヤ(@ToshioAkaneya)です。

paddingやmarginの値設定の順番の覚え方

覚え方は時計回りです。
例えばpadding: 1px 2px 3px 4px;とした場合、上右下左の順に、1,2,3,4pxのpaddingが設定されます。

この記事が参考になれば幸いです。

終わりに

Ruby on RailsとVueで作成したプログラミングスクールのレビューサイトを運営しています。良ければご覧ください。https://school-report.com/

本記事の内容

・ページ上部に固定されたナビゲーションをBootstrapで実装する方法。
・その際の留意点と解決法

方法

（現在、WEBアプリを作成しているので、そのコードをそのまま例として用いることにします。)
以下のようにclass='fixed-top'とすることで、ナビゲーションをページ上部に固定できます。
これにより、スクロールしてもナビゲーションは上に表示されたままになります。

sample.html

     <div class='fixed-top'>
     <nav class="navbar navbar-expand-lg navbar-light bg-light">
         <a class="navbar-brand" href="#">Mieruka</a>
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
         </button>
         <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
             <div class="navbar-nav">
                 <a class="nav-item nav-link active" href="#">ユーザ<span class="sr-only">(current)</span></a>
                 <a class="nav-item nav-link" href="#">新規プロジェクト</a>
                 <a class="nav-item nav-link" href="#">モーメント</a>
                 <a class="nav-item nav-link" href="#">アプリ紹介</a>
             </div> 
         </div>
     </nav>
     </div>

留意点

fixed-topで固定することでその他の要素がnavbarに重なって表示されてしまいます。
（navbarがひとつ上のレイヤーに移動して、それ以外の要素はnavbarがいなくなった分、上に詰めるイメージ。）
そのため、その他の要素を下にズラしてあげる必要があります。

解決法

このような場合は、bodyにpadding-topを適用させて、要素を下にズラすことで解決します。

sample.css

          body{ 
              padding-top: 60px; 
          }

未来電子テクノロジーでインターンをしている mrm1027 です。

【プログラミング初心者であるため、内容に誤りがあるかもしれません。
　もし誤りがある場合は、すぐさま修正しますのでどんどん指摘してください。】

はじめに

プログラミングを始めて、1ヶ月が経ちました。
とてつもなく早く感じます。
最近ではプログラミングの進みがあまり良くなく、まとまった時間を確保することに
苦労しているところです。

カリキュラムの進捗としては、ProgateのHTML＆CSSの道場編中級編までようやく修了し、自由課題に入ろうとしているところです。

padding と margin の違い

CSSでpaddingとmarginが個人的に分かりづらかったので、この場を借りて復習させていただきます。

＜CSSの余白の考え方＞

要素の中身（内容）があり、そのまわりの余白がpaddingです。
そのまわりにはborder（線）があり、それより外側の余白がmarginです。
→　「borderを基準に「中」と「外」で考えたらいいのか！！！」

[参考：https://saruwakakun.com/html-css/basic/margin-padding]

なお、要素に対してwidthとheightの値を指定した場合には、要素の中身の部分の大きさが変わります。

[参考：https://saruwakakun.com/html-css/basic/margin-padding]

→　「widthとheightを設定したら、paddingやmarginを含んだ要素の高さや広さを設定できると勘違いしてた！！！」

まとめ

paddingとmarginの違いが体系的に理解できるようになりました。
これからの知識の蓄積を忘れず、学習を進めていきます。

たまに使うCSSたちが覚えられねえ！メモしておこう。

モデル画面用のクラス

CSS

/*ベースクラス*/
.modal_overlay{
    display: flex;
    justify-content: center;
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.1);
    opacity: 1;
    transition: opacity 0.5s; /*おまけ*/
    transform: scale(1);      /*おまけ*/
}
/*コンテンツ用クラス*/
.modal_content{
    position: relative;
    align-self: baseline;
    width: 90%;               /*カスタム可*/
    top: 80px;                /*カスタム可*/
    padding: 30px 15px;       /*カスタム可*/
    box-sizing: border-box;   /*カスタム可*/
    background: #fff;         /*カスタム可*/
    line-height: 1.4em;       /*カスタム可*/
    transition: 0.5s;         /*おまけ*/
}

HTML使用例

<div class="modal_overlay">
  <div class="modal_content" id='modalTop'>
    <p>こんにちは！</p>
  </div>
<div>

パンくず用クラス

CSS

#bcnav > ul > li > a[href]::after {
  content: '';
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 15px;
  margin-left: 12px;
  -webkit-transform: rotate(45deg) skew(-15deg, -15deg) translate(-1px);
      -ms-transform: rotate(45deg) skew(-15deg, -15deg) translate(-1px);
          transform: rotate(45deg) skew(-15deg, -15deg) translate(-1px);
  border-top: solid 1px #333;
  border-right: solid 1px #333;
}

HTML使用例

<div id="bcnav">
  <ul>
    <li><a href="./xxx">大カテゴリ</a></li>
    <li><a href="./xxy">中カテゴリ</a></li>
    <li><a href="./xxz">小カテゴリ</a></li>
  </ul>
</div>

サイトにフォトギャラリーを作成するときに「lightgallery.js」を利用してみました。
cssとjsを少し修正するだけで簡単にカスタマイズができ、非常に使いやすかったので利用方法を下記に紹介します。

lightgallery.jsとは

lightgallery.jsは軽量のjQuery非依存のlightbox系のプラグインです。
画像や動画、(YouTube/Vimeo),iframeなどを使用でき、レスポンシブ対応、マルチデバイス対応、アニメーションなどのカスタマイズが簡単で高機能なスクリプトです。
DEMOページで動作が確認できます。

lightgallery.jsの特徴

• レスポンシブ対応
• 豊富なモジュールの追加・削除が簡単
• タッチデバイス対応
• カスタマイズ簡単
• アニメーションのサムネイル
• YouTube Vimeo対応
• 20種類以上のアニメーション
• ダイナミックモードの設定
• ズーム、フルスクリーン
• HTML5動画対応
• SNSシェア
• 画像の読み込み高速化
• レスポンシブ画像
• ギャラリーの画像に固有のURLを指定可能

lightgallery.jsの利用方法

まずはTopページの真ん中にある「View on github」をクリックしてgithubページにいってください

githubの「Clone or download」ボタンをクリックし「Download ZIP」をクリックしてソースをダウンロードしてください。

ダウンロード後、ファイルを解凍すると以下のようなファイルやデータがはいっています。

この中に「dist」と書かれたフォルダがあります。
このファイルを開くと４つのフォルダがあります。

プラグインを使用するのに必要なファイルになります。

lightgallery.jsの読み込み

まず<head>ドキュメントの中にlightgallery.cssを追加します。

<head>
    <link type="text/css" rel="stylesheet" href="css/lightgallery.css" /> 
</head>  

次に、lightgallery.jsを追加します。
lightgalleryプラグインを含めたい場合は、lightgallery.jsの後に追加することができます。

<body>
    ....

    <script src="js/lightgallery.js"></script>

    <!-- lightgallery plugins -->
    <script src="js/lg-thumbnail.min.js"></script>
    <script src="js/lg-fullscreen.min.js"></script>
</body>  

※とくに中身をカスタマイズしないのなら軽量の'lightgallery.min.css'、'lightgallery.min.js'をお使いください。

プラグインの追加

lightgalleryのjavascriptは機能ごとに別れているので、使いたい機能があればそのプラグインを追加してください。

マークアップ

lightgalleryのマークアップには以下のような記述が推奨されています。

<div id="lightgallery">
  <a href="img/img1.jpg">
      <img src="img/thumb1.jpg" />
  </a>
  <a href="img/img2.jpg">
      <img src="img/thumb2.jpg" />
  </a>
  ...
</div>

プラグインの呼び出し

プラグインを呼び出しギャラリーを起動させます。

<script type="text/javascript">
    lightGallery(document.getElementById('lightgallery')); 
</script>

以上で基本的な導入の仕方です。

1. もともとあるinputを隠す

input {
position:absolute;
height: 0px;
}

1. :checkedにさせるコンテンツの追加

input:checked ~ label::before {
content:"[x]";
}

※~は兄弟

サンプル

<style>
input[type=checkbox] {
position: absolute;
height: 0px;
}
input:not(:checked) ~ label::before {
content: "[-]";
}
input:checked ~ label::before {
content: "[x]";
}
</style>
<input type="checkbox" id="aaa-field"/>
<label for="aaa-field">aaa</label>