- 投稿日：2021-09-01T13:31:02+09:00
【CSS】Linkがうまく機能しない時
概要 HTMLでLinkタグを使用した際に、カーソルを合わせても矢印がポインターにならず、クリックもできない。 原因 Linkバーと画像を横並びに配置させるために、各要素にposition:fixed, absoluteを適用したことで Link要素の上に画像要素が重なり、クリックできなくなっていた。 対処法 CSSで各要素にz-index（Link要素に"2", 画像要素に"1"）を指定し、Link要素を画像要素の上に再配置することで解決した。
- 投稿日：2021-09-01T12:05:02+09:00
すずぱんのHTML/CSSまとめ
https://webdesign-trends.net/entry/8148 【HTML】 ・<!DOCTYPE html>はHTMLのバージョンを宣言するためのもので必ず記述し、 基本はこのバージョンでいける ・全体構造は 内→ページに関する情報 内→実際に表示したい内容を書く 【HTMLのhead】 ・内の内容はWebページには表示されない ・基本構文は ページのタイトル meta→文字コード title→プラウザのタブ状に表示されるタイトルを指定 xxxx→読み込むCSSのファイル名、フォルダ名がある場合フォルダ名/ファイル名を記入 【HTMLのbody】 ・コメントは<!--テキスト -->で、プラウザには表示されない ・bodyの中にheader、footerがある ・→見出し h1から6になるに連れて小さな見出し ・→段落(見出し以外) ・〈br〉→改行マーク ・→箇条書き それらをで囲むと、先頭に黒点 要素で囲むと、数字が連番でつく ・→クラス化 とは と というタグでいける ・ → リスト内のクラス化 ulはリスト全体、liはリスト1つを対象にする ・→囲まれたテキストなどがリンクになる、url部分にリンク先のURLを指定する ファイル名の時は"なしでファイル名を入力 ・→画像のリンク ・遷移先の初めの<>内にid＝〇〇&リンク元→ 同一ページに遷移 ・→画像の表示、終了タグ要らない ・ →1行のテキスト受け取り、終了タグいらない →複数行テキスト受け取り、終了タグいる →送信ボタンの作成 でvalueに指定したテキストを表示 【CSS】 ・基本構文 どこの{ 何を：どうする； } 何をはプロパティ 何をがクラス名の場合、「.クラス名」 ・HTML上、CSS上「span{…」 →文中の一部の文字の変更、改行もされない ・「/コメント/」→コメント ・「color: 文字色コード;」→文字色 ・「font-size: px;」→文字の大きさ ・「font-family: “フォント名";」→文字の種類 ・「background-color:カラーコード;」→背景色 ・「width: px;」→横幅 「height: px;」→高さ pxを%にすると、画面に大きさ対応の表示 ・「border-radius:％;」 →画像や動画を丸くする、％以外にも様々にできる ・「list-style:none;」→リストの先頭マークを消す ・「border: px 種類 色」→囲み border-top、border-bottomなどでアンダーラインやそのほかのラインに対応 ・「text align: center」→文字の配置 ・「display:flex； justify-contents:space-between；」 →親要素に対して子要素が縦並びから横並びになる ・「padding: px;」 →border内の上下左右の余白、上から時計回りに指定 padding-topなどでそれぞれカスタマイズ可能 「padding: px px;」は上下、左右の順に適用される ・「margin:px;」 →border外の余白、margin 0 autoで上下左右に中心に ・「.クラス名 {position: relative;/相対配置/ }」 「.クラス名 文字の記号 { position: absolute; color: top: 0; left: 0; }」 → 画像内に文字を挿入 ・「.クラス{ transition-duration: 0.5s; }」 「.クラス:hover{ box-shadow: 10px 10px 10px rgba(0,0,0,0.5); transform: translateY(-10px); transition-duration: 0.5s; }」→ 画像を浮かせる ・divを変更するとき 「jutify-content:align center;」 「align-items:center;」 でdive全体でそうしてくれる (・箇条書きを横に並べたい時は「flex-direction:row」 rowをcolumやrow-reverseに書き換えることも可能) (・ものの配置は「float:left;」「float:right;」など)
- 投稿日：2021-09-01T08:13:55+09:00
しまぶーのIT大学 聖杯レイアウトのコーディング実践講座 の授業ノート
さすがに、bootstrap4だけでは、限界があるわ。 cssを勉強しても使わないのですぐに忘れるので、記事に残しておく。 聖杯レイアウトのコーディング <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>しまぶーのIT大学(聖杯レイアウト)</title> </head> <body> <header>header</header> <div> <nav>left</nav> <main>center</main> <aside>right</aside> </div> <footer>footer</footer> </body> </html> bodyのマージンを0 body { margin:0; } nav main aside を横並びに変更する div { display:flex; } centerタグに空いている幅を割り当てる。 center{ flex:1; } nav タグに固定の幅を設定する。 nav { width:150px; } aside タグに固定の幅を設定する。 aside { width:200px; } header と footer に高さを設定する header { height:150px; } footer { height:200px; } bodyに高さを作成して、 nav main asideタグに余った高さを割り当てる。 body { margin:0; min-height:100vh; display:flex; flex-direction: column; } div{ display:flex; flex:1; } bodyの幅を固定にして中央寄せ /* margin:0; */ min-height:100vh; display:flex; flex-direction: column; width:800px; margin:0 auto; レスポンシブ対応を追加する @media screen and (max-width:900px){ } bodyの固定幅を取り消す。 @media screen and (max-width:900px){ body{ width:100%; } } nav main asideを縦方向に変更する。 @media screen and (max-width:900px){ div{ flex-direction: column; } } nav asideの固定幅を取り消す。 @media screen and (max-width:900px){ nav aside{ width:100%; } } mainタグを nav asideの前に置く @media screen and (max-width:900px){ main{ order: -1; } } レスポンシブ対応とか考えるとbootstrapの方がいいかな。 画面を区切ったりとか簡単だし。 bootstrap4だと bootstrap4で聖杯レイアウト <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link href="{{ asset('css/app.css') }}" rel="stylesheet"> </head> <body> <header> header </header> <div> <main>center</main> <nav>left</nav> <aside>right</aside> </div> <footer> footer </footer> </body> </html> bootstrap4をあてたら自動的にマージン等はなくなる。 中央を横並び </header> <div class="row"> <main class="col-2">center</main> <nav class="col-7">left</nav> <aside class="col-3">right</aside> </div> <footer> 高さを設定する。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link href="{{ asset('css/app.css') }}" rel="stylesheet"> <style> body { min-height: 100vh; } header { height: 150px; } footer { height: 200px; } </style> </head> <body> <header> header </header> <div class="row"> <main class="col-2">center</main> <nav class="col-7">left</nav> <aside class="col-3">right</aside> </div> <footer> footer </footer> </body> </html> 中央の要素にbodyの余った高さを割り当てる。 割り当てる要素の親要素に row + flex-column + 高さ 割り当てる要素に flex-grow-1 flex-grow-1はもはや定番だと思う。 <div class="row flex-column"> このdiv(この場合body)には余った高さがある。 <div></div> <div class="flex-grow-1"></div> <div></div> </div> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link href="{{ asset('css/app.css') }}" rel="stylesheet"> <style> body { min-height: 100vh; } header { height: 150px; } footer { height: 200px; } </style> </head> <body class="row flex-column"> <header> header </header> <div class="row flex-grow-1"> <main class="col-2">center</main> <nav class="col-7">left</nav> <aside class="col-3">right</aside> </div> <footer> footer </footer> </body> </html> rowのmargin-15を除去 no-gutters と 幅の設定と中央寄せ container <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link href="{{ asset('css/app.css') }}" rel="stylesheet"> <style> body { min-height: 100vh; } header { height: 150px; } footer { height: 200px; } </style> </head> <body class="container row flex-column no-gutters"> <header> header </header> <div class="row flex-grow-1 no-gutters"> <main class="col-2">center</main> <nav class="col-7">left</nav> <aside class="col-3">right</aside> </div> <footer> footer </footer> </body> </html> あ、センターとレフトの位置を変更するのを忘れている・・・・・ レスポンシブ対応に変更する colからcol-md-へ変更 order-md-を追加 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link href="{{ asset('css/app.css') }}" rel="stylesheet"> <style> body { min-height: 100vh; } header { height: 150px; } footer { height: 200px; } </style> </head> <body class="container mx-auto row flex-column no-gutters"> <header> header </header> <div class="row flex-grow-1 no-gutters"> <main class="col-md-2 order-md-1">center</main> <nav class="col-md-7 order-md-0">left</nav> <aside class="col-md-3 order-md-2">right</aside> </div> <footer> footer </footer> </body> </html> 下のレイアウトを自作してみる。 上からやろ (header) ジャンボトロン ナビバー (/header) (main)(/main) (footer)(/footer) まずはジャンボトロンやろ 幅いっぱいのジャンボトロンを使う containerをコメントアウトしてtext-centerに変更した。 <header> <!--.jumbotron --> <div class="jumbotron jumbotron-fluid text-center"> <!-- <div class="container"> --> <h1 class="display-4">幅一杯にジャンボトロン</h1> <p class="lead">これは親要素の全ての横方向の空白一杯に広がるように設定変更されたジャンボトロンです。</p> <!-- </div><!-- /.container --> --> </div><!-- /.jumbotron --> </header> 次はナビバーやな 黒色のナビゲーションバー + レスポンシブ動作 <body> <header> <!--.jumbotron --> <div class="jumbotron jumbotron-fluid text-center"> {{-- <div class="container"> --}} <h1 class="display-4">幅一杯にジャンボトロン</h1> <p class="lead">これは親要素の全ての横方向の空白一杯に広がるように設定変更されたジャンボトロンです。</p> {{-- </div><!-- /.container --> --}} </div><!-- /.jumbotron --> <!-- bootstrap4のナビバー --> <nav class="navbar navbar-expand-md navbar-dark bg-dark"> <a class="navbar-brand" href="#">ブランド</a> <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#Navber" aria-controls="Navber" aria-expanded="false" aria-label="レスポンシブ・ナビゲーションバー"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="Navber"> <ul class="navbar-nav mr-auto mt-2 mt-md-0"> <li class="nav-item active"> <a class="nav-link" href="#">リンク1 </a> </li> <li class="nav-item"> <a class="nav-link" href="#">リンク2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">リンク3</a> </li> </ul> </div><!-- /.navbar-collapse --> </nav> </header> <main></main> <footer></footer> <script src="{{ asset('js/app.js') }}"></script> </body> 折りたたみ時 ジャンボトロンのマージンボトムを0にする。 <div class="jumbotron jumbotron-fluid text-center mb-0"> メインタグは後回しにしてフッターやろ。 高さとテキストセンターだけでいいと思う。 <style> footer{ height: 150px; } </style> <footer class="text-center bg-secondary"> Footer </footer> なんかちょっと違う 答えをみたらジャンボトロンで作成してた。 <footer class="jumbotron jumbotron-fluid text-center"> Footer </footer> 次はメインタグか まずは2カラムだろ。答えをみたら４＋８で区分してるので分割する。 (div) (main)(/main) (aside)(/aside) (/div) <div class="row"> <aside class="col-4">アサイド</aside> <main class="col-8">メイン</main> </div> containerで囲んで見る <div class="container"> <div class="row"> <aside class="col-4">アサイド</aside> <main class="col-8">メイン</main> </div> </div> 中身をいれてやる デモコンテンツからなかみをコピペする。 <style> .fakeimg { height: 200px; background: #aaa; } </style> ------- <div class="container"> <div class="row"> <aside class="col-4"> {{-- アサイド --}} <h2>About Me</h2> <h5>Photo of me:</h5> <div class="fakeimg">Fake Image</div> <p>Some text about me in culpa qui officia deserunt mollit anim..</p> <h3>Some Links</h3> <p>Lorem ipsum dolor sit ame.</p> <ul class="nav nav-pills flex-column"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> <hr class="d-sm-none"> </aside> <main class="col-8"> {{-- メイン --}} <h2>TITLE HEADING</h2> <h5>Title description, Dec 7, 2017</h5> <div class="fakeimg">Fake Image</div> <p>Some text..</p> <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p> <br> <h2>TITLE HEADING</h2> <h5>Title description, Sep 2, 2017</h5> <div class="fakeimg">Fake Image</div> <p>Some text..</p> <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco. </p> </main> </div> </div> レスポンシブ対応にする <div class="container"> <div class="row"> md以上になったらcol-4が適用されて横並びになる。 <aside class="col-md-4"> {{-- アサイド --}} -------------------------------------- </aside> md以上になったらcol-8が適用されて横並びになる。 <main class="col-md-8"> {{-- メイン --}} -------------------------------------- </main> </div> </div> なんか横に広いのでcontainerに幅を設定する。 自動でmx-autoがかかっていた。md以上になるとcol-8になる。 ということはmd-8以下だとcolはかからんので100% <div class="container col-md-8"> -----------省略------------ </main> </div> </div> md以下だとcolは適用されなくなるので、幅は100%になっています。 画像だとわかりにくいですが、md以上になるとcol-8が適用されるので、 幅は狭まって中央揃えになっています。 row = d-flexですね・・・・・・・。 アサイドタグで遊んで見る。 下方向に移動させる。 row + align-items-end 普通、メインタグは下に空きがないからこれでいける。 <div class="container col-md-8"> <div class="row align-items-end"> -------------------------------------- </div> </div> メインタグの下に空きがあるとうまく行かないメインタグまで下揃えになるが、 そのようなことは普通はない、mainタグの大きさ=コンテンツの大きさに普通はなる。 よって、mainタグの下に余白はできない。(asideが大きかったらasideの高さがコンテンツの高さになって、上の場合、mainタグが下にさがる。) row > .align-self-end <div class="container col-md-8"> <div class="row"> <aside class="col-md-4 align-self-end"> ------------------------------------------------- </div> mt-autoはrowの子要素 <div class="row"> <aside class="col-md-4"> {{-- アサイド --}} ------------------------------ asideにはしっかりと余った高さがあるが、 ここはrowの孫要素なのでmt-autoは効果がない。 <h3 class="mt-auto">Some Links</h3> </aside> よって col+ row + flex-column <div class="row"> <aside class="col-md-4 row flex-column"> {{-- アサイド --}} ------------------------------ ここはrowの子要素になったのでmt-auto等が使える。 <h3 class="mt-auto">Some Links</h3> </aside> こんどはaタグにmy-autoを効かせてみる <div class="row"> <aside class="col-md-4 row flex-column"> {{-- アサイド --}} --------------------------------------------------- ulタグにはすでにflex-columnがあるということは ulタグにはrowがあるということだ。 <ul class="nav nav-pills flex-column"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> これにmy-autoここはulタグの孫要素 <a class="nav-link my-auto" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> よって <ul class="nav nav-pills flex-column"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> aタグの親要素にrow + flex-column + no-gutters(要素が崩れたためrowには-15のマージンがあるそれを0にできる) <li class="nav-item row flex-column no-gutters"> これで親要素にrowができたのでmy-autoが効く。 <a class="nav-link my-auto" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> あれ、効かない・・・。 ulタグのrowやliタグのrowには余った高さがなかったｗ 忘れがち。 余った高さをもっているのはasideタグ("col-md-4") となりのメインの("col-md-8")が高くなればなるほど asideタグ("col-md-4")の余った高さは大きくなる。 <div class="row"> asideのrowには余分な高さがある。横のcol-8がasideより高さがあった場合、 デフォルトのストレッチのおかげで余分な高さが生じる。 この余分な高さをliタグにまでもっていく。 <aside class="col-md-4 row flex-column"> {{-- アサイド --}} flex-grow-1はrowの子要素 asideタグには余った高さがあるのでflex-grow-1が効く。 <ul class="nav nav-pills flex-column flex-grow-1"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> このliタグは余った高さのあるrowの子要素になったので、flex-grow-1が効き余った高さを割り当てられる。 <li class="nav-item flex-grow-1 row flex-column no-gutters"> liタグの中に余った高さがあるのでmy-autoが効く。 余った高さとはcol-8とcol-4の高さの差額です。高さの差額をここで調整している。 <a class="nav-link my-auto" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> なんかbootstrap4で、レイアウトしたほうがいいような気がしてきたw styleタグや別ファイルでレイアウトするより、bodyでスタイルしたほうがいいのでは・・・。 この下、書き直した 少しは見れるようになった。 もう少しスタイルをしてみる。 アニメーションやjsのあるブートストラップをカスタマイズしたサイトに挑戦してみる。 オリジナルのブートストラップをコピペして編集して作成する。 まずは、アニメーションやjsを無視してレイアウトから作る。 (nav) (jumbotron) (About Section) (Services Section) (Portfolio Section) (Pricing Section) (Contact Section) (Image of location/map) (footer) デモを見ながら区切ってみた <!DOCTYPE html> <html lang="en"> <head> <!-- Theme Made By www.w3schools.com --> <title>Bootstrap Theme Company Page</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <nav class=""> </nav> {{-- jumbotron --}} <div class=""> </div> <!-- Container (About Section) --> <div id="about" class=""> </div> <!-- Container (Services Section) --> <div id="services" class=""> </div> <!-- Container (Portfolio Section) --> <div id="portfolio" class=""> </div> <!-- Container (Pricing Section) --> <div id="pricing" class=""> </div> <!-- Container (Contact Section) --> <div id="contact" class=""> </div> <!-- Image of location/map --> <img src="" class="" style=""> <footer class=""> </footer> </body> </html> これであとはなんとかなるな。 上から作って行けばいいだけや。 ナビバーからや デモサイトのナビバーの機能をみてみると、 ①bootstrap4の通常の機能 ◎トグル機能つきで ◎top固定のナビで ◎スクロールスパイ機能 ②カスタマイズしているところ、 ◎ナビバーの背景色がオレンジで (背景色にオレンジなんてない) ◎アクティビティとホバー時の背景色がホワイト (背景色が変化することはない) まずは、bootstrap4からそれっぽいのをコピペや右トグルナビバーをコピペ とりあえずナビバーをコピペしただけだから。見る必要はないです。 <body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarTogglerDemo01"> <a class="navbar-brand" href="#">Hidden brand</a> <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> {{-- jumbotron --}} <div class=""> </div> ここの修正は通常の修正です。デモサイトに合わせてるだけです。 ◎.mr-auto から .ml-autoに変更 ◎.activeと.dissabledは削除 ◎formタグは削除 ◎スクロールスパイ機能を実装させる。 スクロールして、スクロールの位置がそのリンクの場所に来るとリンクがアクティブになります。大概は文字色が変わります。 スクロールによって、リンクのアクティブが移動していきます。 ページ内リンクがあるときに隣のアサイドのnavbarでよく利用されている奴です。 bodyとnavタグを修正する。 スクロールスパイのための設定 まずはbodyタグにdata3点セットやな 当然公式サイトからコピペ <body data-spy="scroll" data-target="#navbar" data-offset="0"> data-targetで指定した値をnavタグのidに貼り付けて完了や(デモサイトはclassだけど) <nav id="navbar" class="navbar navbar-expand-lg navbar-light bg-light"> 上記の修正を反映させてます。 <body data-spy="scroll" data-target="#navbar" data-offset="0"> <nav id="navbar" class="navbar navbar-expand-lg navbar-light bg-light"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarTogglerDemo01"> <a class="navbar-brand" href="#">Logo</a> {{-- mr-auto から ml-autoに変更 --}} {{-- activeとdissabledは削除 --}} <ul class="navbar-nav ml-auto mt-2 mt-lg-0"> <li class="nav-item"> <a class="nav-link" href="#about" data-toggle="ABOUT">ABOUT</a> </li> <li class="nav-item"> <a class="nav-link" href="#services">SERVICES</a> </li> <li class="nav-item"> <a class="nav-link" href="#portfolio">PORTFOLIO</a> </li> <li class="nav-item"> <a class="nav-link" href="#pricing">PRICING</a> </li> <li class="nav-item"> <a class="nav-link" href="#contact">CONTACT</a> </li> </ul> {{-- 削除 --}} {{-- <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> --}} </div> </nav> スクロールスパイ検証のためセクションを修正 高さがないと、スクロールできないから、高さを当てただけです。 スクロールの位置がそのリンクの位置にくると、リンクがactiveになって、 スクロールのたびにactiveが変更されていきます。 <!-- Container (About Section) --> 高さを持たしたvh-100 <div id="about" class="vh-100"> ABOUT </div> <!-- Container (Services Section) --> <div id="services" class="vh-100"> SERVICES </div> <!-- Container (Portfolio Section) --> <div id="portfolio" class="vh-100"> PORTFOLIO </div> <!-- Container (Pricing Section) --> <div id="pricing" class="vh-100"> PRICING </div> <!-- Container (Contact Section) --> <div id="contact" class="vh-100"> CONTACT </div> スクロールスパイもちゃんと効いとるわ。 次もデモサイトに合わせるための修正です。 ナビバーの背景色をオレンジで文字色は白色でtop固定やな。 修正２ トップ固定はナビタブに.fixed-top 文字色は.navbar-light から.navbar-darkに変更。(なんで白色なのにdarkなのか？センスを疑う) 背景色は.bg-light を削除してオレンジの背景色はないのでcssでスタイルする。 .fixed-topを設定した後、一旦動作を確認したら問題があった。 ページ内リンクを押して移動したら、ナビバーの高さの分だけ、それぞれのセクションの要素とnavbarかぶってしまった。 .fixed-topとページ内リンクを使うときはそれぞれのセクションにpaddingが必要みたいなので セクションに.py-5をつけたら被れなくなったが・・・ デモをみると全sectionにcontainer-fluidを貼り付けていてcssでpaddingを設定していたのでそうする。 <style> /*paddingをつけることで、リンクでジャンプした時navbarと被らなくなった*/ .container-fluid { padding-top: 70px; } </style> ----- <nav id="navbar" class="navbar navbar-expand-md fixed-top navbar-dark"> <div id="about" class="vh-100 container-fluid"> ABOUT </div> 以下省略 bootstrap4のナビバーの背景色を変更する。これは普通にbackground-colorで修正できた。 bootstrap4のナビバーの背景色を変更する nav { /*!importantもいらんかった。*/ background-color: #f4511e; } 動作を確認したら左側トグルを貼り付けていた。 書き換えるのが面倒くさいのでこのままいく。 修正3 bootstrap4のナビバーをカスタマイズ ◎トグルアイコンの色を変更する。 別途、文字のサイズを変更する、ロゴとリンクで文字サイズを変える。 トグルアイコンの色変更ができないので調べたら斜め上をいっていた。 @onsinhutuu 直接bootstrapのimgのrgbaを変更せなあかん。 トグルアイコンの色を変更する。＋その他 /* ロゴ のフォントサイズを大きくした*/ .navbar-brand { font-size:1.2rem !important; } /* リンク(aタグ)のフォントサイズも少し大きくした */ .nav-link{ font-size:1.1rem !important; } /* トグルアイコンの色を変更する。 */ .navbar-toggler .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"); } 画像じゃわかりにくいｗけど、しっかりと白色に変更されている。 bootstrap4のナビバーをカスタマイズ ◎アクティブのときホバーのときに背景色と文字色変更する。 ナビバー、アクティブのときホバーのときに背景色と文字色変更する a.nav-link:hover ,a.nav-link.active{ color: #f4511e !important; background-color: #fff !important; } デモサイトのナビバーには上下にpaddingが0なので、 ナビバーのpaddingを.p-0で０にした。--------------------------① <nav id="navbar" class="navbar navbar-expand-md fixed-top navbar-dark p-0"> そしたら高さがなくなって、デモサイトと同じええ感じだと思ったら、 問題が続出。 一見うまく行ったようにみえたけど、縮めると隙間が生じたｗ 隙間の方は,ulタグにこんなもんが設定されていた。(ﾟДﾟ)ﾊｧ (ul class="mt-2 mt-lg-0") 消去した。 縮まる方は文字サイズを大きくしたことが原因でaタグのフォントが消えたら、 その分高さがなくなるのでカクンと縮まる。 navリンクと同じ高さを外枠のnavタグに設定した。-----------------② <style> nav { background-color: orangered; height: 44px; } </style> ---- <ul class="navbar-nav ml-auto"> logoの位置が左すぎるので、navタブのコンテンツに.containerをつけたら良くなった。 <nav id="navbar" class="navbar navbar-expand-md fixed-top navbar-dark p-0"> <div class="container"> ------------------------- </div> </nav> ええんとちゃうか。 ナビバーの編集はbootstrap色をなくすためには必須だと思う。 あかん、問題だらけだったｗ 偽物 本物 container を container-fluidに変更した。 logoの上にできた大きな余白の原因はスクロールスパイの要素が被ってしまうのを解消するためにつけたこれ .container-fluid { padding-top: 70px; } notをつけた。いやな展開や。うーーん、しかし、bootstrap4のクラスにスタイルなんてあてたらこないなるわな。 やらんほうがええやろ。 <style> /*notで指定した要素は除外される。*/ .container-fluid:not(.navbar-container) { padding-top: 70px; } </style> ------ <nav id="navbar" class="navbar navbar-expand-md fixed-top navbar-dark px-0 p-md-0"> . navbar-containerというクラスを勝手につけたnot指定のためのクラス <div class="container-fluid navbar-container"> ナビバーに下の余白がなくなったのは先程、上で(①のところ)ナビバーのpaddingを０にしたのが原因。 スマホサイズのときは下に余白があった方がいいので、上記のp-0をpx-0とp-md-0に 変更した。 この修正で②でした修正に問題が生じる。 pc時のナビの高さ = 外枠のnavに設定した高さ+パッディングの幅(0)--p-md-0のため スマホ時のナビの高さ = 外枠のnavに設定した高さ+パッディングの幅(10) これでは、縮めたとき幅がパッディングの高さの分、ぷっと膨れる。 ので、bodyにbox-sizing: content-box;を貼り付けることで、 揃えた高さ = 高さ にしてやる。 <style> body{ box-sizing: content-box; } </style> --------- これを <nav id="navbar" class="省略 p-0"> これに変更PCサイズの時にpを0にする。(上下にpaddingがあるため) <nav id="navbar" class="省略 px-0 p-md-0"> あと、とりあえず、aタグのtextが右によりすぎているから .navlink(aタグ)にpadding-left:10pxやろ。 .nav-link { font-size: 1.1rem !important; これも!importantがいるのか。 padding-left: 15px !important; } logoの方のテキストも右によったままなので、直接pl-3をあてた。 <a class="navbar-brand pl-3" href="#">Logo</a> よくよく考えたら、 幅の調整をしたくてcontainerを導入 ↓ スマホのとき余計なcontainerのマージンが邪魔 ↓ container-fluid <-ここ おかしいｗ ↓ やった幅いっぱいに広がった。 ↓ 結局幅の修正ができていない。 ↓ aタグに直接paddingして修正(これだけで良かった) ↓ container-fluidいらんやん。（結論）やりがち。 また、幅の調整はcontainerではなく、 col-md-● でやればよかった。 そうすれば、スマホ時余計なマージンを回避できる。 pcの時より自由な幅(1~12)に調整できる。 スマホ時のテキストの右寄りはaタグにpadding-leftをつけるしかないし。 あと今回背景色をつけてスクロールスパイの data-offset="0" はあかんということがわかった。 activeがうまく反応できていないときがある。 data-offset="60px" ぐらいがいいみたい。 う～～～ん。 bootstrap4のカスタムサイトでもナビバーは豊富。 ↓カスタムサイトといえばコレしか浮かばんくらいや。 自前のカスタマイズを考える前に、カスタムサイトからコピペしたほうがいいことがわかった。 今度は、スクロールスパイのjs拡張やな、いわゆるスムーズスクロールスパイってやつやな。普通、ページ内リンクをクリックしたらその要素にジャンプするが、これを設定することで、スクロールしながら、要素に焦点をあわせてくれる。 カスタムサイトいったら有料だった・・・・・・ｗ そこらへんで転がっとるからええし。 cssだけで解決した、動作は微妙、すこし早い。 <style> html { scroll-behavior: smooth; } </style> jsではこれやな <script> $(document).ready(function() { $(".nav-link,.dropdown-item").click(function() { var t = $(this).attr('href'); $('.active').not('.carousel-item.active').removeClass('active'); $("html, body").animate({ scrollTop: $(t).offset().top }, { duration: 1e3, }); $('body').scrollspy({ target: '#navbar-example',offset: $(t).offset().top }); $(this).parent().addClass('active'); return false; }); }); </script> 動作は完璧♥ デモサイトはこれ わかりやすい。 上のはコードはコード数が少ないけど、特性を知り尽くしていない限りはかけん。 <script> $(document).ready(function(){ // Add smooth scrolling to all links in navbar + footer link $(".navbar a, footer a[href='#myPage']").on('click', function(event) { // Make sure this.hash has a value before overriding default behavior if (this.hash !== "") { // Prevent default anchor click behavior event.preventDefault(); // Store hash var hash = this.hash; // Using jQuery's animate() method to add smooth page scroll // The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area $('html, body').animate({ scrollTop: $(hash).offset().top }, 900, function(){ // Add hash (#) to URL when done scrolling (default click behavior) window.location.hash = hash; }); } // End if }); }) </script> どちらとも貼り付けたらいいだけ、bootstrapのユーティリティは共通化されているから、本当に便利。もう公式サイトに載せておいてほしいくらいただ、 このサイトにはのっていなかった。意外だ。 ただ、domで追加した場合の対処方が載せられていたdomの追加なんてもう当たり前だし。 次はなんや。 ジャンボトロンか、これはもうコピペして貼り付けたらおしまいやろ。 コピペして貼り付ける。 ジャンボトロンのデモサイトにあわせる修正は、上下のパッディングを大きくしてテキストセンターやな。 あとは、背景色を公式サイトの背景色にあわせてやる。 inputフォームはカスタムなので、どこかから適当にコピペする。 custom-input-formは至るところにある。適当に近いのをコピペする。そこから修正する。 <style> .jumbotron{ 背景色をオレンジに。 background-color: #f4511e; 上下に150のパッディング左右に50pxのパッディング padding: 100px 50px; } </style> ----- {{-- jumbotron --}} 変更点はtext-center text-whiteを追加してとコンテンツをwrapしていたcontainerを削除しただけ。 <div class="jumbotron jumbotron-fluid text-center text-white"> <h1 class="display-4">Company</h1> <p class="lead">We specialize in blablabla</p> <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2" /> <button class="btn btn-outline-primary" type="button" id="button-addon2" data-mdb-ripple-color="dark"> Button </button> </div> </div> ボタンの背景色と文字色を変更したらおしまいや。たぶん <button class="btn" style="background-color: #d9534f;color: #fff; border-color: #d43f3a;" type="button" id="button-addon2" data-mdb-ripple-color="dark"> subscribe </button> 結局ボーダー色も変更した。デモサイトから色を確認するときにボーダー色も変更していた。 動作確認した、inputフォームはレスポンシブにも対応しているし、やっぱコピペして正解だった。 ただ、文字列のCompanyがレスポンシブ対応していないくらい。 本来的にはpaddingの幅を消去したりする必要があると思う。 デモサイトを見てたらfont-sizeがレスポンシブデザインになっていた。 どうやっているのかわからん。bootstrap3の機能だと思う。 メディアスクリーンでfont-sizeをレスポンシブ対応する。 普通にcssでフォントサイズの変更ができた。 面倒くさいけど、メディアスクリーンはbootstrapの作法に則って書くべきやな。 標準はスマホのときのスタイルで書く .jumbotron{ background-color: #f4511e; パディングはスマホように控えめにする。 padding-top: 75px; padding-bottom: 25px; padding-left: 0; padding-right: 0; } 画面幅がmdを超えたら適用されるスタイルを書く。 @media screen and (min-width: 768px) { .jumbotron { 逆にPCの時のパディングは大きめにとってやる。 padding-top: 150px; padding-bottom: 50px; padding-left: 50px; padding-right: 50px; } フォントサイズも大きくしてやる。 .jumbotron h1, .jumbotron .h1 { font-size: 82px; } } そもそも画像でレスポンシブを確認すること自体むりがあるわ ちゃんと文字サイズも修正されている。 今度もかんたんやけど、アイコンはglyphiconを使っているので・・・・。 bootstrap4のアイコンに変更する探すのが大変そう・・・・。 bootstrap4のアイコンのつかいかたはこのサイトにいく。 アイコンの一覧のすぐ下にinstallというのがある。 なんでもいいんやけど、一番手っ取り早いCDNを使うと簡単。 <title>Bootstrap Theme Company Page</title> タイトルの下にリンクをはって、 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"> <style> スタイルやcssファイルの一番上に @import~をはってやればいんだけ。 @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"); </style> あとはほしいアイコンサイトにいって。 今回は(i)の方を使う。(svgもある) このセクションの内容はデモサイトのをまるまるコピペして、アイコンを修正する。 メディアスクリーンはbootstrapの作法でやる。 <style> ますは標準はスマホスタイルのアイコンの大きさを少し大きめにする。 フォントサイズで大きくなる。 .logo { font-size: 150px; color: #f4511e; } @media screen and (min-width: 768px) { sm(576px)でcolが適用されるのに mdでフォントサイズが適用されるのはおかしくないか。 PCのときのアイコンをもっと大きくしてやる。 .logo { font-size: 200px; } } </style> --------------- <!-- Container (About Section) --> <div id="about" class="container-fluid"> <div class="row"> <!-- デモサイトのcol-smをcol-mdに変更した。 --> <div class="col-md-8"> ------------------------------ </div> <div class="col-md-4"> <!-- これは削除 --> <!-- <span class="glyphicon glyphicon-signal logo"></span> --> <!-- 変わりにこっちに変更 --> <i class="bi bi-volume-up-fill"></i> </div> </div> </div> なんかボタンが違う・・・。 bootstrap3になっているので、4に書き換えてやる。 こっちは削除 <button class="btn btn-default btn-lg">Get in Touch</button> 修正 <button class="btn btn-block btn-lg btn-outline-secondary">Get in Touch</button> アイコンを中央表示するためテキストセンターを親要素に貼り付ける。 <div class="col-md-4 text-center"> <i class="bi bi-bar-chart-fill logo"></i> </div> ボタンがmdのとき25%くらいになっている。 w-md-25なんてのがない・・・ メディアスクリーンで書き換える。 <style> md以上の場合、以下のスタイルを適用される。 @media screen and (min-width: 768px) { .btn-lg{ /*25%だとwrapしたので35%にした。*/ width:35%; } } </style> デモサイトではこのセクションの背景が白色なので、白色に変更したら、 ジャンボトロンの下マージンとセクション自身のボトムに余白がないので、修正した。 {{-- jumbotron --}} mb-0を追加 <div class="jumbotron jumbotron-fluid text-center text-white mb-0"> <!-- Container (About Section) --> bg-whiteとpb-md-5を追加スマホサイズのときは余白が十分だったのでmdから適用 <div id="about" class="container-fluid bg-white pb-md-5"> 次のセクションはスタイル等全く同じなので、とりあえずそのまま貼り付ける。 アニメーションがあるので、とりあえず貼っておく。 おなじアイコンが見つからないので・・・似たようなやつを貼り付けておく。 次のセクションはアイコンだらけ。 これは同じアイコンみつけるのが大変そう。デモサイトの内容をコピペしてアイコンだけ変更した。 次のセクジョンはこれは、カルーセルがあるので自作してみる。 画像はカードだった セクションの構造はrowが３つ (main-text) (カードコンポーネントが３つ) (カルーセル) カードをコピペして３つならべたら、カードとカードのパッディンぐによる余白調整がうまくいかなかった。 <div class="row no-gutters"> <div class="card col-4 p-3" style="width: 18rem;"> <div class="card col-4 p-3" style="width: 18rem;"> <div class="card col-4 p-3" style="width: 18rem;"> 原因は複合的で、 １，よくよくみたら、style="width: 18rem;"というのとno-guttersが貼ってある。 カスタムされたbootstrap4のコンポーネントをコピペするとどうしてもこういうのがある。 上でも、そうやけど、カスタムされたものを貼ったらイラン物がないかcheckすべき。 ２，カードコンポーネントに直接col-4をはったこと。 １は削除した。 2は分けた。 <div class="row"> <div class="col-4"> <div class="card"> </div> <div class="col-4"> <div class="card"> </div> <div class="col-4"> <div class="card"> </div> わかりやすいように背景をつけた 上下にも余白が欲しかったのでこうした。 <div class="row"> <div class="col-4 p-3"> <div class="card"> </div> <div class="col-4 p-3"> <div class="card"> </div> <div class="col-4 p-3"> <div class="card"> </div> bootstrap4のコンポーネントとcolとpのセットは分けたほうがいい。 コンポーネントにcolとかpを直接はったら壊しているようなもんだし。 この場合だとrowにno-guttersをはってもうまく行った。 <div class="row no-gutters"> <div class="col-4 p-3"> <div class="card"> </div> <div class="col-4 p-3"> <div class="card"> </div> <div class="col-4 p-3"> <div class="card"> </div> no-guttersを貼ると親要素(この場合body)の要素からはみ出なくなる。 rowには-15のマージンが左右にあるため。 カルーセルもなんかカスタマイズしている、インジケーターが棒線から◯になっているのか・・・あと色か。 とりあえず、神様のサイトからコピペ しようとしたら、ない、キャプションだけのカルーセルなんてないbootstrap4にはない・・・。 とりあえず、コピペして編集や。 カルーセルのインナーの部分だけを抜き取っている。 <div class="carousel-inner text-center"> <div class="carousel-item active"> ここにコンテンツ 100pxの高さのコンテンツ </div> <div class="carousel-item"> ここにコンテンツ 30pxの高さのコンテンツ </div> <div class="carousel-item"> ここにコンテンツ 60pxの高さのコンテンツ </div> </div> キャプションが変更されるたびにカクンカクンになった。 carousel-itemの子要素にミンヘイトを100pxにして解消した。 navのときは外枠に(親要素)に設定したがあれはよくなかったのではと思う。 子要素同士の高さの違いはは子要素の中で解決するべきだろう。 コンテンツが中央にくるように、d-flexを設定した。 アイテムにd-flexを適用したら崩れた。ので子要素をdivで囲んだ。 <style> /*アイテムの子要素 アイテムにd-flexを適用したら崩れたため*/ .carousel-content { min-height: 100px; テキストが中央にくるよう設定 display: flex; flex-direction: column; /*主軸がflex-direction: column;で変更されているため、 垂直方向の設定はjustifyで行う。どっちみち、align-itemsのどっちかやから*/ justify-content: center; } </style> <div class="carousel-inner text-center"> <div class="carousel-item active"> <div class="carousel-content"> <h4>"This company is the best. I am so happy with the result!"</h4> <span>Michael Roe, Vice President, Comment Box</span> </div> </div> <div class="carousel-item"> <div class="carousel-content"> <h4>"One word... WOW!!"</h4> <span>John Doe, Salesman, Rep Inc</span> </div> </div> <div class="carousel-item"> <div class="carousel-content"> <h4>"Could I... BE any more happy with this company?"</h4> <span>Chandler Bing, Actor, FriendsAlot</span> </div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> カルーセルのアイコンprevとnextの色を変更する fill='%23のあとにf4511e等、適当な色を設定してやる' .carousel-control-prev-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f4511e' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"); } .carousel-control-next-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f4511e' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"); } カルーセルのインジケーターを変更する。@hitochan777 さん /*これでグレイの丸ができる。*/ .carousel-indicators>li { border-radius: 50%; height: 10px; max-width: 10px; background-color: grey; } /*アクティブのときオレンジの背景になる。*/ .carousel-indicators>li.active { background-color: #f4511e; } もうそろそろアニメーションを適用させるべきやろ。全部つくってから あとで、変更せなあかんようなったら、最悪やからな。 スクロールすると、要素のポジションにきたら、下からその要素が上がってくる。 まぁ、定番のアニメーションやな。 デモサイトみたら、キーフレームを使っているのか。 ロジックは理解しやすいよね。わかりやすいが、jsを禁止している人は 一生コンテンツがみれないね・・・。 一応自作してみる。transformとtransitionで簡単に作れる。 <style> .slideanim { /* これで以下のプロパティの値が変更されるときはアニメーションになる。 allにしたら全部*/ transition-property: transform, opacity; /*秒数やね*/ transition-duration: 1s; } </style> transitionの設定をcssでしたので、jsで初期値を設定して、イベントで発火したら、値を変更する みたいなjsを書くだけで、アニメーションになる。めっちゃ簡単。 transition + transformは定番やし。資産(他人のだけど)も豊富にある。詰まることは少ないはず。 script <script> プロパティの値の初期値を設定している ページを読み込み時これで、一旦要素を消去して、下にずらしている。 $('.slideanim').css({ 'transform': 'translateY(300px)','opacity':0}); スクロールイベント $(window).scroll(function() { /*これはjquery版のforeach。指定の要素を配列で取得して全部回している。*/ /*スクロールする度に回している・・・・*/ $(".slideanim").each(function() { //それぞれのセクションのトップの値を取得 var pos = $(this).offset().top; //スクロールの現在の一番上がtopからの位置 bottomがあったらええのに。 var winTop = $(window).scrollTop()+1000; //下の画像をみてほしい。 console.log(pos); console.log(winTop); //スクロールの位置+1000がそれぞれのセクションの位置を超えたらtrue if (pos < winTop) { //jqueryでcssを操作したらいいだけ、値を変えてやればアニメーションになる。 $(this).css({ 'transform': 'translateY(0px)', 'opacity': 1 }); } }); }); </script> ちょっとスクロールしただけでこんなことになる。スクロール＋eachだからね。 このとき要素が 条件をみたしたら、発火されるので初期値を変更してやるだけで、初期値との差額と秒数で アニメーションみたいになる。 以上でアニメーションは完成。 cssの知識があれば、jequryはcss()メソッド一択で trasitionのおかげで、それなりのアニメーションができる。 jequryのanimate()を使うことは少ないのではないか。 styleにtrasitionを設定して、 jequeryのcssメソッドで初期値を設定、なんらかのイベントで値を書き換えれば、アニメーションになる。 デモ版はキーフレームで値を変更していだけで、animationを設定することでアニメーションになる。 <style> /*初めにcssで隠す*/ .slideanim {visibility:hidden;} /*条件みたしたときjequryで.slideをaddしている。*/ .slide { /*これで表示*/ visibility: visible; /*キーフレーム*/ animation-name: slide; animation-duration: 1s; } /* これはシンプルだ多分20%30%とかで設定できると思う。そういうのが想像できる。 */ /*これで値を変化させることで、アニメーションになるということだろ。*/ /*cssのイベントってhoverくらいやし、jsでクラスをいじることでアニメーションを実現していくのだろう*/ @keyframes slide { 0% { opacity: 0; transform: translateY(70%); } 100% { opacity: 1; transform: translateY(0%); } } </style> <script> -------省略してる。ロジックは全く一緒。 if (pos < winTop + 600) { 条件を満たしたときaddClassをしているだけ・・・・。 $(this).addClass("slide"); } -------省略してる。 </script> 次のセクションはカードを３つ並べてヘッダーの背景色を変更しているくらいだろう。 パッディングの使い方を確認してみる。 先程のイメージだと (row) (col) (カードコンポーネント) (/col) (col) (カードコンポーネント) (/col) (col) (カードコンポーネント) (/col) (/row) にしたらいいはず。 スマホサイズにしたとき上下に余白が欲しかったのでp-3もいれた。 左右の余白はno-guttersがなかったら普通にできる。 いれたとしてもcol+pだと問題なく左右上下に余白はできて、bodyの要素からもはみ出ることはない。 はみ出たところで害はないが。bodyに背景がないかぎり、被ってても関係ないし。 (row no-gutters) (col p-3) (カードコンポーネント) (/col) (col p-3) (カードコンポーネント) (/col) (col p-3) (カードコンポーネント) (/col) (/row) no-guttersがない時ー no-guttersがある時ー bodyからはみ出なくなったぶん要素が縮まってる・・・。 カードコンポーネントの初期 ヘッダー ボディー(text+btn) カードコンポーネントのbodyを２つにした ヘッダー ボディー(text) ボディー(btn) あ、うまく線がでない・・・ bodyを２つ並べるのではなくfooterにした ヘッダー [すたいる="background-color:オレンジ;color:白色;"] ボディー(text) フッター(btn)[くらす="bg-white"] 今度のセクションは ２カラムで 横並びのフォームとテキストエリアを採用している。 (row no-gutters) (col-md-4) 普通にテキスト (/col) (col-md-8) フォームコンポーネントをコピペして修正 (/col) (/row) フォームコンポーネント (form) ("form-group") //groupで区切る。余白を作ってくれる ("form-row") //rowとは違うgutterが少し縮まる。 //form-row(row)はform-groupの下で必ず使うじゃないと崩れてまう ("col-md") //colはform-rowとセット (input テキスト "form-control") //form-controlはvalidationとかでも必要だしオシャレになる。 ("col-md mt-1 mt-md-0") //スマホサイズの時、上とくっついてまうので。mt-1 mt-md-0 (input テキスト "form-control") ("form-group") //groupで区切る。rowはアカン崩れてまうformgroupの下ならokだ (textarea "form-control") ("form-group") //groupで区切る。 (input サブミット "form-control w-25 ml-auto") (/form) <!-- Container (Contact Section) --> <div id="contact" class="vh-100 container-fluid"> <div class="row"> <div class="col-md-5"> テキストエリア </div> <div class="col-md-7 slideanim"> <form> <div class="form-group"> <div class="form-row"> <div class="col-md"> <input type="text" class="form-control" placeholder="名字"> </div> <div class="col-md mt-1 mt-md-0"> <input type="text" class="form-control" placeholder="名前"> </div> </div> </div> <div class="form-group"> <textarea name="" id="" rows="10" class="form-control"></textarea> </div> <div class="form-group"> <input type="submit" class="form-control w-25 ml-auto" value="ボタン" /> </div> </form> </div> </div> </div>