- 投稿日：2020-10-11T18:52:18+09:00
選択範囲を一発でタグで囲む方法(VScode)
僕がVScodeでマークアップするときにめちゃくちゃ多用する機能について解説します！
これをすることで大幅に作業効率が上がります！はじめに
例えばこんなコードがあったとします。
index.html<div class="text"> こちらが本文です </div>これを書いた後に
「あ！divタグじゃなくてpタグで囲まないといけなかった( ﾟдﾟ)」
みたいな時ないですか？？？僕はこれすごく思ってて、憂鬱になりながらも「divタグを消してpタグの開始タグを書いて、末尾に終了タグを書く」という動作をずっとしていました。
これが1つならいいものの、以下のような場合だと、友達の家の猫が自分にだけ寄ってこない時くらいの煩わしさを感じてしまいます。
↓liタグで囲むの忘れてた場合
index.html<div class="text"> <ul> リスト1 リスト2 リスト3 リスト4 リスト5 リスト6 リスト7 リスト8 リスト9 </ul> </div>準備
３分とかからない準備が必要です！
1.VScode起動
2.キーボードショートカットの設定画面にいく
3.同画面の検索窓に「emmet wrap」を入力
4.「emmet:ラップ変換」と「emmet:個々の行でラップ変換」にショートカットキーを割り当てるこれで準備完了です！！！
実践
それでは使っていきましょう！
1.まず、タグで囲みたい部分を選択します
2.割り当てたショートカットキーを押すと、上に窓が出てくるのでそこにタグを書きます
(今回はliタグとします)3.Enterキーを押すと、タグで囲むことができます
下で実行結果を見てみましょう！
「emmet:ラップ変換」
「emmet:ラップ変換」に割り当てたショートカットキーを押し、上の窓に「li」と入力すると、
index.html<div class="text"> <ul> <li> リスト1 リスト2 リスト3 リスト4 リスト5 リスト6 リスト7 リスト8 リスト9 </li> </ul> </div>こんな感じで選択した部分の最初と最後にliタグが入り、一括りにできました！
ですが今回のコードの場合は、リスト1〜9のひとつひとつをliタグで括りたいですね
その場合は、「emmet:個々の行でラップ変換」の方を使います！
「emmet:個々の行でラップ変換」
「emmet:個々の行でラップ変換」に割り当てたショートカットキーを押し、上の窓にタグを入力するのですが、
今回は「li」と入力するのではなく「li*」と入力します！
そうすることで、、、index.html<div class="text"> <ul> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> <li>リスト4</li> <li>リスト5</li> <li>リスト6</li> <li>リスト7</li> <li>リスト8</li> <li>リスト9</li> </ul> </div>理想通りになりました！！！
おしまい！
参照
【Visual Studio Code】選択範囲を一発でHTMLタグで囲む方法【簡単・便利】
https://www.youtube.com/watch?v=n6usaCJFKNo&list=LLTpOM4yhFYJcQCl5I853uhg&index=10
- 投稿日：2020-10-11T14:40:35+09:00
【jQuery】【ancestry】を使用した、多階層ツリーメニューの実装
経緯
現在絶賛作成中のポートフォリオで、フリマアプリのラクマのような多階層ツリーメニューを実装したいと思い作成。振り返ってみればさほど難しくはなかったけれども、色々躓いたので記載しておこうと思います。
環境
ruby 2.6.5
Rails 6.0.3.2
haml使用完成図
親のカテゴリー（第１階層）をクリックすると、子のカテゴリー（第2階層）のサブメニューが現れるという仕組み。手順
1、ancestryの導入
2、HTMLで多階層の形を実装
3、jQuery（JavaScript）で、第１階層のカテゴリーをクリックすると、第2階層のサブメニューが表示されるイベントを記載する※CSSは今回は記載しません、ごめんなさい
ancestryの導入
余談ですが、ancestryを導入しなくても、HTMLに記載すれば多階層ツリーメニューの実装自体は出来ます。只、第2階層のサブメニューのカテゴリをクリックして、そのカテゴリの商品一覧を表示させたいとなるとancestryを導入は必須になります。
余計な余談になりましたが、早速ancestryを導入していきましょう！
Gemfile.#追記（一番下が好ましい） gem 'ancestry'記載が終了したら、
ターミナルで% bundle installして% rails s忘れずに行いましょう。
続いてcategoryモデルの作成です。ターミナル.$ rails g model categoryこの時点で、マイグレーションファイルは作成されていますので、
マイグレーションファイルを編集しましょう。2020xxxxxxxx_create_categories.rbclass CreateCategories < ActiveRecord::Migration[6.0] def change create_table :categories do |t| t.string :name, null: false #これを追記 t.timestamps end end endターミナルで
rails db:migrateさらに、categoryモデルにancestryのカラムを追加したいのでターミナルで以下のコマンドを入力
ターミナル.% rails g migration AddAncestryToCategory ancestry:string:indexターミナルで
rails db:migrate続いて、seedにデータ作成をします。
詳しくはこちらの記事を見てみてください。
分かりやすく書いてくれている記事なので、親カテゴリー、子カテゴリーなどの意味が理解出来ると思います。
【フリマアプリ】ancestryを用いたseedデーター作成について
seeds.rbにデータを記載していくんですが、今回は僕が作ったものを貼り付けておきますので参考にして見てください。と言ってもメチャクチャ使い回しなんですけど・・・・
大事なのは、name:xxxxxのxxxxxの部分なので、ここの名前を実装したいものと、照らし合わせて変更してください。db/seed.rb# パーツ lady = Category.create(name: "パーツ") lady_1 = lady.children.create(name: "パーツすべて") lady_2 = lady.children.create(name: "マフラー") lady_3 = lady.children.create(name: "エンジン/冷却装置") lady_4 = lady.children.create(name: "ホイール") lady_5 = lady.children.create(name: "タイヤ") lady_6 = lady.children.create(name: "ハンドル") lady_7 = lady.children.create(name: "ブレーキ") lady_8 = lady.children.create(name: "外装") lady_9 = lady.children.create(name: "駆動系") lady_10 = lady.children.create(name: "電装形") lady_11 = lady.children.create(name: "その他") # アクセサリ men = Category.create(name: "アクセサリ") men_1 = men.children.create(name: "アクセサリすべて") men_2 = men.children.create(name: "バイクカバー") men_3 = men.children.create(name: "ステッカー/デカール") men_4 = men.children.create(name: "タンクバック") men_5 = men.children.create(name: "サドルバッグ/サイドバック") men_6 = men.children.create(name: "シートバック") men_7 = men.children.create(name: "ツーリングネット/ロープ") men_8 = men.children.create(name: "鍵/ロック") men_9 = men.children.create(name: "エアバック") men_10 = men.children.create(name: "ETC") men_11 = men.children.create(name: "ナビ") men_12 = men.children.create(name: "オーディオ") men_13 = men.children.create(name: "その他") # バイクウェア baby_kids = Category.create(name: "バイクウェア") baby_kids_1 = baby_kids.children.create(name: "バイクウェアすべて") baby_kids_2 = baby_kids.children.create(name: "ヘルメット/シールド") baby_kids_3 = baby_kids.children.create(name: "ゴーグル") baby_kids_4 = baby_kids.children.create(name: "グローブ") baby_kids_5 = baby_kids.children.create(name: "プロテクター") baby_kids_6 = baby_kids.children.create(name: "ジャケット") baby_kids_7 = baby_kids.children.create(name: "革ツナギ") baby_kids_8 = baby_kids.children.create(name: "雨具") baby_kids_9 = baby_kids.children.create(name: "靴") baby_kids_10 = baby_kids.children.create(name: "バック") baby_kids_11 = baby_kids.children.create(name: "パンツ") baby_kids_12 = baby_kids.children.create(name: "シャツ") baby_kids_13 = baby_kids.children.create(name: "フェイスマスク/ネックウォーマー") baby_kids_14 = baby_kids.children.create(name: "その他") # メンテナンス interior_residence_accessory = Category.create(name: "メンテナンス") interior_residence_accessory_1 = interior_residence_accessory.children.create(name: "メンテナンスすべて") interior_residence_accessory_2 = interior_residence_accessory.children.create(name: "バッテリー") interior_residence_accessory_3 = interior_residence_accessory.children.create(name: "オイル") interior_residence_accessory_4 = interior_residence_accessory.children.create(name: "フィルター") interior_residence_accessory_5 = interior_residence_accessory.children.create(name: "スタンド") interior_residence_accessory_6 = interior_residence_accessory.children.create(name: "工具") interior_residence_accessory_7 = interior_residence_accessory.children.create(name: "その他") # その他 book_music_game = Category.create(name: "その他") book_music_game_1 = book_music_game.children.create(name: "すべて") book_music_game_2 = book_music_game.children.create(name: "ファッション") book_music_game_3 = book_music_game.children.create(name: "グッズ") book_music_game_4 = book_music_game.children.create(name: "カタログ") book_music_game_5 = book_music_game.children.create(name: "マニュアル") book_music_game_6 = book_music_game.children.create(name: "本/雑誌") book_music_game_7 = book_music_game.children.create(name: "その他")ターミナルで
% rails db:seedでこのデータを反映させます。Sequel pro（ホットケーキがアイコンのもの）をインストールしている方は、それにデータがちゃんと反映されているか確認して見て下さい。
ちゃんと反映されていたら下記の画像のようになります。
ancestry カラムのデータ中の NULL の所が親カテゴリーです
コントローラーの入力の所で必要な知識になるので覚えて置いてください。ちなみに、上記の記事を参考にして貰えば分かりますが、
lady = Category.create(name: "パーツ")←この形の記載が親のカテゴリー（第１階層）
baby_kids_1 = baby_kids.children.create(name: "バイクウェアすべて")←この形の記載が子カテゴリー（第２階層）の記載になります。もし入力するカラム名などに不備があった場合は以下のコマンドを入力してseed.rbを修正しましょう。
% rails db:migrate:reset
修正してもう一度rails db:seed
% rails db:seed最後に、categoryモデルで ancestryを使用できるようにモデルに下記を記載します。
category.rbhas_ancestry以上で、ancestryの導入は終了です！
HTMLで多階層の形を実装
続いては、HTMLで多階層の形を実装していきます。
下記のものが、コードになります。index.html.haml.categories .categories--contents .categories--title カテゴリから探す %ul.category__parent - @parents.each do |parent| .category-box{id: "parent_category#{parent.id}"} %p.parent_category{id: "parent#{parent.id}"} = "#{parent.name}" %i.fas.fa-angle-down %ul.category__child{id: "parent_list#{parent.id}"} - parent.children.each do |child| .category-box{id: "parent_category#{child.id}"} = link_to "#{child.name}", "#", class: "parent_category",id: "child#{child.id}" %i.fas.fa-angle-right
続いて、コントローラーの記載です。
xxxxx_controller.rbdef index @parents = Category.where(ancestry: nil) end先ずは、HTMLでも使っているので、コントローラーの変数の説明から
これは、Categoryテーブルの ancestryカラムの nilのデータ、
要は上記のSequel proの画像を見て貰えればと思いますが、NULLと書かれたデータを
取り出して、parentsという変数に代入しています。
つまり、親カテゴリーのデータを取り出しているという事ですね。
続いてHTMLの説明ですが、
- @parents.each do |parent|
コントローラーで作った変数parents と eachメソッドを使って、
親カテゴリー（第１階層）のデータを抽出します。
- parent.children.each do |child|
これも同様に eachメソッドを使って、
子カテゴリー（第２階層）のデータを抽出します（理屈よりもこの形で覚えた方が早いと思います）いくつかある
id:"xxxxx"の部分は、jQueryのイベントの際に、またCSSでのコーティングの際に必要になるので、わざわざidを振っています。このままでは、子カテゴリー（第２階層）が見えたままなので、display: noneで消しましょう。
xxxxx.css.category__child{ display: none; }これで、HTMLで多階層の形を実装は終了です！
最後に、jQueryの実装です。
jQuery（JavaScript）で、第１階層のカテゴリーをクリックすると、第2階層のサブメニューが表示されるイベントを記載する
それでは、最後にイベントを発火させるjQueryの記載をしましょう。
下記のものが、コードになります。$(function(){ $('#parent_category1').click(function(){ $("#parent_list1").slideToggle('1000'); }); $('#parent_category13').click( function(){ $("#parent_list13").slideToggle('1000'); }); $('#parent_category27').click(function(){ $("#parent_list27").slideToggle('1000'); }); $('#parent_category42').click(function(){ $("#parent_list42").slideToggle('1000'); }); $('#parent_category50').click(function(){ $("#parent_list50").slideToggle('1000'); }); });ここで注意なのですが、コード自体はそれ程難しいものではないと思うのですが、
parent_category"1" parent_list"1" などの数字の部分に注意が必要です。上記の seed.rb をそのままコピペした方は特に問題ないと思いますが、
自分で作成したという方は、恐らくここの数字が変わってくると思いますので、
大変恐縮ですが、ご自身で検証画面を見て、この数字の部分を確認してみてください。
コードの説明ですが、とても簡単です。
parent_category1（親カテゴリー）の階層をクリックしたら、parent_list1（子カテゴリー）が
表示されるというシンプルなものになっています。この実装にはslideToggleメソッドを使用しています。
このメソッドは、指定された要素が表示されている時はslideUpで非表示にし、非表示になっている時はslideDownで表示するというメソッドになります。ちなみに、格好の中の数字〔slideToggle('1000')〕は、スライドのスピードです。このメソッドについて詳しく知りたい方はこちらの記事を参照ください。
slideToggle()メソッドについて
これで、全ての実装が完了です！
実装出来なかったなどの不備が有ればご連絡ください！ありがとうございました。
- 投稿日：2020-10-11T10:29:18+09:00
【初心者でもわかる】CSSで半円を作る方法
どうも7noteです。今回は半円の作り方
正円や楕円形はよく使われるので情報が多いのですが、
意外と使われない半円の作り方を紹介。作り方
div { width: 200px; /* 直径の長さ */ height: 100px; /* 半径の長さ */ border-top: 100px solid #000; /* 半径の長さ */ border-radius: 100%; /* 角丸100%を指定 */ }これだけで、半円を作れます。
補足
上半分にする時は
border-top。下半分のときはborder-bottom。
このときはheightを半径の長さにしてください。逆に左右に作るときはwidthを半径の長さにして、heightを直径の長さに指定します。
transformも使うと、回転できるので好きな角度の半円を作れますね。おそまつ！
~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ
- 投稿日：2020-10-11T09:12:35+09:00
jqueryとbootstrap4が使える最低限のテンプレート
手元で新しいライブラリなどを試してみたい時にいちいち用意するのが手間なので、jqueryとbootstrap4が使える最低限のテンプレート載せておきます。簡単な記事すぎて恐縮ですが、お役に立つとありがたいです。
インストールのみ
index.html<!doctype html> <html lang="ja"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <title>bootstrapとjquery</title> </head> <body> <main> <section id="news" > <div class="container"> <div class='text-center'> <h1>Hello, bootstrap and jquery!</h1> </div> </div> </section> </main> </body> </html>
navbarの追加
index.html<!doctype html> <html lang="ja"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <title>bootstrapとjquery</title> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <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 dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </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> <main> <section id="news" > <div class="container"> <div class='text-center'> <h1>Hello, bootstrap and jquery!</h1> </div> </div> </section> </main> </body> </html>
buttonの追加
index.html<!doctype html> <html lang="ja"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <title>bootstrapとjquery</title> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <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 dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </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> <main> <section id="news" > <div class="container"> <div class='text-center'> <h1>Hello, bootstrap and jquery!</h1> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-light">Light</button> <button type="button" class="btn btn-dark">Dark</button> <button type="button" class="btn btn-link">Link</button> </div> </div> </section> </main> </body> </html>
jumbotronの追加
index.html<!doctype html> <html lang="ja"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <title>bootstrapとjquery</title> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <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 dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </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> <main> <section id="news" > <div class="container"> <div class='text-center'> <div class="jumbotron"> <h1 class="display-4">Hello, world!</h1> <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> <hr class="my-4"> <p>It uses utility classes for typography and spacing to space content out within the larger container.</p> <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a> </div> <h1>Hello, bootstrap and jquery!</h1> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-light">Light</button> <button type="button" class="btn btn-dark">Dark</button> <button type="button" class="btn btn-link">Link</button> </div> </div> </section> </main> </body> </html>
参考文献
https://getbootstrap.jp/docs/4.2/components/buttons/
私のいるNP-Systems（ https://np-sys.com/ ）のHPも同じように作っています。PythonとAngularがメインなのでWordPressの素人が調べつつ作ったものですが、２ヶ月くらいでのアウトプットの一例として参考にしてください。
