HTML/CSS : テーブルのスクロール化と目次の作成(リンク)
今回からはHTML/CSSにおける応用についてまとめていきたいと思います!!(⌒∇⌒)
テーブル(th, tdのみをスクロール化)
==============================================
■ 以下のテーブルのthタグ, tdタグをスクロール化させてみましょう。
↓
[ コード : HTML]
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>テーブル(スクロール化)</title> </head> <body> <table border="2" height="150px"> <thead> <th>果物名</th> <th>購入日</th> <th>個数</th> </thead> <tbody> <tr> <td>りんご</td> <td>2019/04/08</td> <td>4</td> </tr> <tr> <td>バナナ</td> <td>2019/05/08</td> <td>7</td> </tr> <tr> <td>キウイ</td> <td>2018/07/08</td> <td>5</td> </tr> <tr> <td>マンゴー</td> <td>2019/02/09</td> <td>10</td> </tr> <tr> <td>パイナップル</td> <td>2018/10/09</td> <td>2</td> </tr> <tr> <td>グレープ</td> <td>2019/03/09</td> <td>23</td> </tr> <tr> <td>モモ</td> <td>2019/01/09</td> <td>12</td> </tr> </tbody> </table> </body> </html>
[ コード : CSS]
thead, tbody {
display: block;
}
tbody {
overflow-x: hidden;
overflow-y: scroll;
height: 150px;
}
==============================================
目次の作成(リンク)
==============================================
■ 目次の項目をクリックすると指定した場所に飛ぶようにしていきましょう。
[ 実行例 ]
↓
[ コード : HTML]
<div id="container"> <h1>リンクテスト</h1> <h2 id="menu">目次一覧</h2> <ul style="border: 5px double green; width:20%; padding:10px;padding-left:20px;"> <li><a href="#section1">変数</a></li> <li><a href="#section2">定数</a></li> <li><a href="#section3">コアモジュール定数</a></li> </ul> <h3 id="section1" style="background-color:lightyellow; width:100%;">変数</h3> <div style ="padding-left: 10px;border: 5px double red"> <p>変数は値を一時的に保存したり、</p> <p>計算式などの処理を記述したりする際に使用する。</p> <p>変数は宣言文や型などの指定もなく手軽に使用可能。</p> <p>変数名は大文字と小文字を区別するので注意が必要。</p> <p>「代入」= 値を一つ入れることが出来る。</p> <p>式の処理内容が明確になる。</p> <p>値が決定していなくても処理のアルゴリズムを記述出来る。</p> </div> <h3 id="section2" style="background-color:lightyellow; width:100%;">定数</h3> <div style ="padding-left: 10px;border: 5px double red"> <p>定数は値を一度決めたら変更することが出来ない。</p> <p>逆に言えば、後から変更してはいけない値を定数と指定する。</p> <p>定数は、constを使用して定義する。</p> <p>定数名は、変数と同じく大文字小文字を区別する。</p> <p>名前は慣例として全て大文字にする。</p> <p>constで定義した定数はプログラムコード全体のどこからでも</p> <p>参照できるグローバル定数です。</p> </div> <h3 id="section3" style="background-color:lightyellow; width:100%;">コアモジュール定数</h3> <div style ="padding-left: 10px;border: 5px double red"> <p>PHP_VERSION_ID : 実行中のPHPのバージョンを整数値で表したもの</p> <p>PHP_EOL : 現在のOSの改行番号</p> <p>PHP_INT_MAX : 整数型の最大値</p> <p>PHP_INT_MIN : 整数型の最小値</p> <p>PHP_OS : 現在のOS</p> <p>TRUE : 論理値の真の値</p> <p>FALSE : 論理値の偽の値</p> </div> <br> <br> <span style="color:lightblue; font-size:25px;margin-left:25px;"> -------------------------------------------------------- </span> <br> <br> <p><a href="#menu">目次に戻る</a></p> </div> </body> </html>
[ コード : CSS]
body {
background-color: #ffffff;
color: #2b2b2b;
font-size: 100%;
}
a:link { color: #0000ff; }
a:visited { color: #0000a0; }
a:hover { color: red; }
a:active { color: #ff8000; }
#container {
padding-bottom: 600px;
}
h3 {
margin-top: 100px;
}
==============================================
これにて、
今回の内容は、以上になりますが
皆さんの今後のプログラミング学習の励みになればと思います。
次回は、CSS関数の利用について、まとめさせて頂きたいと思っています。
Bootstrapを活用しよう! [Ⅻ. グリッドシステム : レスポンシブデザイン]
皆さん、お疲れ様です。
今回は、Bootstrapの中でも
「グリッドシステム : レスポンシブデザイン」
の活用方法をご紹介させて頂きます。
Bootstrapの活用 [ グリッドシステム ]
グリッドシステムとは??
==============================================
● レイアウトを格子状に分解して配置するデザイン手法
● Bootstrapでは横幅を12分割したグリッドシステムを採用
→ デスクトップの画面を12分割し、各要素に分配することによって実現
● class=""の値として、以下の画像のものを記述する。
● Bootstrap内の各要素 (モーダルやアコーディオン機能など)は、自動で
グリッドシステムが適用されるため、classの値として追記する必要はない。
[画像]
[例]
赤色のものだけ、横モバイルサイズになっております。
結果を見て頂くと、赤色のものだけ同じ4列でも横モバイルサイズになっておりますため短くなってます。
↓↓
グリッドシステムが自動適用される??
[ コード ]
<body> <header style="background-color:gray">Header</header> <div class="container-fluid"> <div class="row"> <div class="col-sm-4" style="background-color:red;">Red</div> <div class="col-md-4" style="background-color:blue;">Blue</div> <div class="col-md-4" style="background-color:yellow;">Yellow</div> </div> <!-- カードブロック: card-deck --> <div class="card-deck" id="te"> <!-- カード 本体 : card --> <div class="card"> <img src="DSC_0481.JPG" class="card-img-top" alt="..."> <!-- カードのボディ部分 : card-body --> <div class="card-body"> <!-- カードのタイトル : card-title --> <h5 class="card-title">鳥の群れ</h5> <!-- カードのテキスト : card-text --> <p class="card-text">テキストを入力する箇所</p> </div> </div> <div class="card"> <img src="DIS.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">星ヶ丘</h5> <p class="card-text">テキストを入力する箇所</p> </div> </div> <div class="card"> <img src="1517671523452.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">フラワー園</h5> <p class="card-text">テキストを入力する箇所</p> </div> </div> </div> <div class="card-deck" id="te"> <div class="card"> <img src="1517671524117.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">フラワー園 [プール]</h5> <p class="card-text">テキストを入力する箇所</p> </div> </div> <div class="card"> <img src="1517671525391.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">夕暮れ</h5> <p class="card-text">テキストを入力する箇所</p> </div> </div> <div class="card"> <img src="test_image.JPG" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">街道</h5> <p class="card-text">テキストを入力する箇所</p> </div> </div> </div> </div> </div> <footer style="background-color:gray">Footer</footer> </body>
↓
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
[ 実行結果 ]
<デスクトップサイズ>
<タブレットサイズ>
<縦モバイルサイズ>
以上のように今回はBootstrap内の機能の一つであるカードリストを使用し、
class="col-○○"と記載しなくとも自動的にグリッドシステムが適用されているのかを確認しました。
モーダルやアコーディオンなど他の機能も用いていきながら、
グリッドシステムの自動適用の仕組みに慣れていきましょう!!
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
Java Spring Framework Ⅰ. STS [ 環境 ]を準備しよう!!
こんにちわ、皆様、近頃いかにお過ごしでしょうか??
気温も下がりつつあり、
私は、なかなか朝早い日などは動くのをためらってしまいそうになります。
季節の変わり目は体調を崩しやすいこともあるので皆様もお気を付けくださいね。
さて、今回のテーマですが
「Java Spring(STS)のダウンロード」についてなります。
以下が目次になります。
Spring Frameworkとは??
==============================================
✫ Pivotal Softwareによって開発が進められているオープンソースのJavaフレームワークです。
その中でも、DI [依存性の注入]と呼ばれるものはコンポーネント同士の切り離しや入れ替えが可能にしてくれます。
正直...これでは何が良いのかよくわからないですよね💦
DIも含めSpring特有の技術については次回、まとめていこうと思いますので今回は、そんな感じのものがあるんだな...いった感じでとらえてもらえれば有難いです。
Webアプリケーション開発やデータベースアクセス(JDBC, JPAなど), リモートアクセス, セキュリティ関連など幅広く使用されているフレームワークであることも大きな特徴ですね。
==============================================
ダウンロードサイトへアクセス
では、環境を準備していくにあたり、まずはサイトへアクセスしダウンロードする内容を確認していきましょう。
以下のリンク先へ
↓↓
spring.io
1.
↓ 下のほうにスクロールしてください。
2.
ダウンロードする場所に関しては、特に指定があるわけでは御座いません。しかし自身で管理しやすい場所にしておくと後々、困らずに済むと思います。
Windowsですと、Cドライブの直下などで良いかと思います。
ダウンロード完了後、zipファイルを解凍する
zipファイルを解凍していきましょう!!
※ パスが長い…とエラーが発生する場合があります。
= エラー0x80010135
<解決策>
● 7-zipという解凍ソフトをインストールする 。
解凍ソフトにて7-zipを選択し、解凍を実施する
→ パスの長さなど関係なく解凍可能です
起動し、無事に動くかを確認する
最後に動作の確認をしてみましょう。
解凍の際にエラーが起きていて、そのままスキップしたりすると
重要なフォルダやファイルがダウンロードされず、失敗しますのでお気を付けください。
1. アプリケーションを起動する
2. 起動確認
↓
workSpaceではファイルやクラスなどの保存場所を指定する
今回は、workspace_springというフォルダを指定してます。
↓
こういう風に表示されれば問題なく起動できてます!!
Dashboardがはじめは表示されますが、消して頂いて問題ないです。
内容のほうは、以上になりますが、如何でしたでしょうか??
もしうまくいかない…ほかのエラーが出てしまうなどの問題などがでましたら遠慮なく各SNSもしくはコメントよりご連絡頂ければと思います。
今後とも皆さんの開発における参考になれば幸いです。
===========================================
↓↓ 以下のSNSでも情報の掲載などしております。
===========================================Bootstrapを活用しよう! [ Ⅺ. ポップオーバー]
皆さん、お疲れ様です。
今回は、Bootstrapの中でも
「ポップオーバー」
の活用方法をご紹介させて頂きます。
Bootstrapの活用 : ポップオーバー
ポップオーバーとは??
==============================================
✫ 要素をクリックすることでヘルプメッセージなどを表示することができる
[ サンプルイメージ]
==============================================
ポップオーバーを作成してみる
● まずはシンプルなポップオーバーから作成してみましょう。
→ 結果は、先程紹介させて頂いたサンプルと同様のものになります。
[ コード ]
<!-- JavaScript 以下をheadタグ内に追加する--> <script> (function() { window.addEventListener("load", function () { $('[data-toggle="popover"]').popover(); }); })(); </script>
<!-- HTML --> <!-- クリックして、ポップオーバーを有効にする --> <!-- title = "タイトル名を指定" --> <!-- data-content="クリック時、ポップオーバーとして表示するメッセージを指定"--> <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="タイトル名" data-content="表示メッセージ" style="margin:15px 15px">テスト</button>
上下左右にポップオーバーを表示させる
● ポップオーバーといえど必ずしも右側に表示させるとは限りません。そこで上下左右、至る方向にでもポップオーバーを表示させる方法をみていきましょう。
[ コード ]
<!-- ※ JavaScriptは先程と同様で大丈夫です。--> <!-- HTML --> <!-- 上に表示 --> <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="上部に表示" style="margin-top:100px;"> 上に表示 </button> <!-- 下に表示 --> <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="下部に表示" style="margin-top:100px;"> 下に表示 </button> <!-- 左に表示 --> <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="左に表示" style="margin-top:100px; margin-left: 150px;"> 左に表示 </button> <!-- 右に表示 --> <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="右に表示" style="margin-top:100px;"> 右に表示 </button>
↓
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
[ 実行結果 ]
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
ボタン以外をクリックした時もメッセージを非表示にする
● これまでのポップオーバーは、ボタンクリック時に表示し、ボタンを再度クリックすると消えました。今度は、ボタン以外の箇所を再クリックした際もポップオーバー表示が消えるようにしていきましょう。
[ コード ]
<!-- JavaScript 以下をheadタグ内に追加する--> <script> (function() { window.addEventListener("load", function () { $('[data-toggle="popover"]').popover(); }); })(); <!-- 追加 --> $('.popover-dismiss').popover({ trigger: 'focus' }) </script>
<!-- HTML --> <!-- ボタン以外をクリック時もメッセージを消せるようにする --> <a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="タイトル名" data-content="テストです" style="margin:70px 30px;">別場所をクリック時も表示メッセージを消す</a>
↓
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
[ 実行結果 ]
↓
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
ポップオーバーを無効にする
● こちらはWebページ制作そのもので使うイメージがつかないかと思います。
あくまで、無効 / 有効を使い分けることで状況にに応じたポップオーバー表示を実施できるため、後々役に立つ箇所にはなる可能性は考えられますね!!
以下の例のように記述して頂きますと無効化が可能です。
[ コード ]
<!-- 無効にする : disabled --> <!-- ① <span class="d-inline-block" data-toggle="popover" data-content="無効なポップオーバー">--> <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>無効ボタン</button> <!-- ② </span>-->
↓
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
[ 実行結果 ]
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
その他のオプションを使って、ポップオーバーをアレンジ!!
● 上記の方法以外にも様々なオプションが準備されています。今回はその中で一部、ご紹介させて頂ければと思います。
✫ 表示の際にフェード(アニメーション)を適用
[ コード ]
<!-- オプションの使用 : 表示の際にフェードを適用<data-animation="true">--> <button type="button" class="btn btn-secondary" data-toggle="popover" data-animation="true" data-content="表示メッセージ" style="margin:30px 30px">フェードを適用</button>
✫ ポップオーバーの表示および非表示を遅延する時間を設定
[ コード ]
<!-- 表示のみ --> <!-- オプションの使用 : ポップオーバーの表示および非表示を遅延する時間を設定<data-delay="秒数">--> <!-- 表示 : 2秒後 --> <button type="button" class="btn btn-secondary" data-toggle="popover" data-delay="2000" data-content="表示メッセージ" style="margin:30px">2秒後に表示</button>
<!-- 表示 / 非表示 --> <!-- オプションの使用 : ポップオーバーの表示および非表示を遅延する時間を設定<delay: {show: 3000, hide: 3000}>--> <!-- show : 表示(3秒), hide : 非表示(3秒) --> <button type="button" class="btn btn-secondary" data-toggle="popover" data-delay='{"show":3000, "hide":3000}' data-content="表示メッセージ" style="margin:30px">表示 / 非表示の時間を設定</button>
✫ クリック以外の方法でポップオーバー表示させる
[ コード ]
<!-- オプションの使用 : カーソルをあてるとポップオーバー表示させる : data-trigger="hover"--> <button type="button" class="btn btn-secondary" data-toggle="popover" data-trigger="hover" data-content="表示メッセージ" style="margin:30px">カーソルをあてるとポップオーバー表示</button>
<!-- オプションの使用 : フォーム内でポップオーバー表示させる : data-trigger="focus"--> <input type="text" class="form-control" placeholder="カーソルを合わせてください" data-toggle="popover" data-trigger="focus" data-content="表示メッセージ" style="margin:30px; width:300px;">
その他にも、オプションが準備されています。
気になる方は以下のページにて確認してみてくださいね!!
↓↓
cccabinet.jpn.org
では、今回の内容も以上となりますが、如何でしたでしょうか??
不明点やその他質問等ございましたらコメント欄もしくは各SNSを通して、ご連絡頂ければ随時対応させて頂きます。
気軽にご相談ください(^▽^)/
今後とも皆さんの開発における参考になれば幸いです。
===========================================
↓↓ 以下のSNSでも情報の掲載などしております。
===========================================Bootstrapを活用しよう! [ Ⅹ. アコーディオン機能]
皆さん、本日もお疲れ様です。
今日は、午後から都内にて打ち合わせのため外出したのですが、思いのほか寒くてびっくりしました。私の地元でもかなり気温が下がっているとのことでしたので、そろそろ秋服の準備が必要そうですね!!
また...近頃は、気分が落ち気味になると甘いものの摂取に走ってしまうのが少し悩みです💦
本日は、Bootstrapの中でも
「アコーディオン機能」
について解説させて頂ければと思っております。
Bootstrapの活用 : アコーディオン機能
アコーディオン機能とは??
==============================================
✫ サイトのWebページなどの表示・操作要素の一つで、選択した項目がその場で広がって詳細な内容を表示する形式の\メニューである。
[ サンプル動画 ]
youtu.be
==============================================
複数のブロックを操作 <デフォルトの折り畳み>
● アコーディオン機能といえばあるボタンや領域をクリックした際に
指定の領域を開け閉めすることが可能になります。
そこで、複数条件を指定し、各ボタンごとに表示する領域を選択できるようにしてみましょう。
[ コード ]
<!-- HTML --> <p style="margin-left: 15px;"> <!-- href="表示させる領域のidを指定" --> <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">認証キーの入力</a> <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">ログイン情報の入力</button> <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">両方</button </p> <div class="row"> <div class="col"> <!-- id="領域のidを指定" --> <div class="collapse multi-collapse" id="multiCollapseExample1"> <div class="card card-body" style="width:300px; margin-left:15px;"> <form> <span>認証キー: </span> <input type="password" name="freedom"> </form> </div> </div> </div> <div style="margin-right: 54%"> <div class="collapse multi-collapse" id="multiCollapseExample2"> <div class="card card-body" style="width:300px;"> <form> <span>ID: </span><br> <input type="text" name="id"><br> <span>PassWord: </span><br> <input type="password" name="password"> </form> </div> </div> </div> </div>
↓
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
[ 実行結果 ]
★ クリックするボタンに応じて、表示させる領域を変化させています。
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
折り畳みを拡張 : アコーディオンを実現
上記の複数のボタンクリック操作にて、表示結果を変える方法は、折り畳みの方法の中でもデフォルトになっております。
次は、そのデフォルトの折り畳みを拡張し、実際に本ページの冒頭にサンプルとして紹介させて頂いたアコーディオン機能を作成してみましょう。
[ コード ]
<span style="margin-left:15px">【 チーム紹介 】</span> <div class="accordion" id="accordionExample" style="width:500px; margin: 15px 15px;"> <div class="card"> <div class="card-header" id="headingOne"> <h2 class="mb-0"> <!-- data-target = "表示させる領域を指定""--> <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 野球 : チームリスト </button> </h2> </div> <!-- id="表示領域の名前"--> <!-- data-parent="親要素の指定" --> <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample"> <div class="card-body"> <span>● 読売ジャイアンツ</span><br> <span>● 阪神タイガーズ</span><br> <span>● 中日ドラゴンズ</span><br> <span>● 横浜DeNAベイスターズ</span><br> <span> ・・・・</span> </div> </div> </div> <div class="card"> <div class="card-header" id="headingTwo"> <h2 class="mb-0"> <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> サッカー : チームリスト </button> </h2> </div> <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample"> <div class="card-body"> <span>● 鹿島アントラーズ</span><br> <span>● ガンバ大阪</span><br> <span>● 浦和レッズ</span><br> <span>● 川崎フロンターレ</span><br> <span> ・・・・</span> </div> </div> </div> <div class="card"> <div class="card-header" id="headingThree"> <h2 class="mb-0"> <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> ラグビー : チームリスト </button> </h2> </div> <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample"> <div class="card-body"> <span>● パナソニック ワイルドナイツ</span><br> <span>● NECグリーンロケッツ</span><br> <span>● トヨタ自動車ヴェルブリッツ</span><br> <span>● 東芝ブレイブルーパス</span><br> <span> ・・・・</span> </div> </div> </div>
↓
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
[ 実行結果 ]
★ 結果は、冒頭で紹介させて頂いたものと同じです。
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
では、これで今回の内容は、以上になりますが如何でしたでしょうか??
無事にアコーディオンを実現出来なかった場合などは、
コメント欄もしくは各SNSを通して、ご連絡頂ければ随時対応させて頂きます。
気軽にご相談ください(^▽^)/
今後とも皆さんの開発における参考になれば幸いです。
===========================================
↓↓ 以下のSNSでも情報の掲載などしております。
===========================================『エンジニア募集!!』フリーランス/ 正社員
皆さん、本投稿を見て頂き有難う御座います。
本日はといいますと、
正社員(エンジニア)及びフリーランスエンジニア向けのお得な情報を入手しましたので、ご紹介させて頂きたいと思います。
今後の皆様の活動の参考になれば幸いです。
今回の紹介に関しましては、株式会社 Grant Hope様からの情報になります。
会社ホームページは以下のURLより確認宜しくお願い致します。
↓↓
granthope.jp
フリーランスエンジニア募集内容
★ 実務経験が2年以上必要、年齢問わず ★
[募集職種]
■ システムエンジニア
■ プロジェクトマネージャー
■ ネットワークエンジニア
■ データベースエンジニア
■ サーバエンジニア
■ WEBエンジニア
■ フロントエンドエンジニア
■ 制御組み込みエンジニア
■ プログラマ
■ テストエンジニア
■ セールスエンジニア(技術営業)
■ フィールドエンジニア
■ ヘルプデスク
■ 社内SE
■ ブリッジSE(国内外をつなぐ)
[対象]
● 手取り収入を倍にしたい
● 残業を大幅に減らしたい
● 新しい言語を学びたい
● キャリアアップしたい
[内容]
エンジニアの幅は非常に広いです。
フリーランスエンジニア専門の人材会社は
最近急速に増えています。
現在、約3000社も日本にあると言われております。
しかし、人材不足は10万人以上とまで言われております。
グランドホープでは
元々正社員でSEなどの実務経験が2年以上の方ですとフリーランスとして働き始めた当初から月収(手取り)が50～70万になることが
多いことに加え、どの現場におきましても労働時間は土日祝日休みで、9～17時勤務もしくは10～18時勤務になります。
それ以外にも別に休みの申請をすることも可能のため、連休をつくることも出来ます!!
弊社は、最も自社の利益を削って
弊社着金単価の90%～95%を働くエンジニアに還元している会社です。
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
[一般的な仲介会社との違いとは??]
1. 一般的な仲介に入る人材会社は、間に入り、利福を30%前後取る企業がほとんどです。
↓
グランドホープがとる利福は10%以下になります。
2. 契約時間外労働なしを収束しているので、万が一にでも契約時間外労働が出た場合は、グランドホープでは自身の利福を0にしてでもSEさんに給与を支払います。
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
会わずに、エクセルシートを使って年収査定だけできます。
その査定結果を見て
興味を持った方のみ、面会させていただく流れを取っておりますので気軽にご相談頂ければと思います。
エンジニア<正社員>募集内容
★ 未経験からでも学べるJavaエンジニアを募集。★
現役SEによる社内研修があり、ITについて一から学ぶことができます。
研修後は大手金融機関を中心としてプロジェクトに参画!!
■ 雇用形態 正社員
■ 想定年収 400~650万円
■ 勤務時間 9:00～18:00
※配属先によって異なる
■ 休み 土日祝日
■ 昇給あり（年1回）
■ 各種社会保険完備
■ 交通費全額支給
■ 産前・産後休暇
■ 育児休暇
■ 介護休暇
■ 住宅手当
■ 資格手当
■ 社内外研修制度
■ 社員紹介報奨金制度
■ 社内イベント
[勤務地]
・東京都新宿区
[採用要件]
・社会人1年以上
・短大・専門卒業以上
・20～28歳
・転職回数2回まで
★【経験者向け】システム開発エンジニア募集 ★
サーバー・アプリ[IOS・Android]・WEB
WEBサービスの開発/運営
運営中のウェブサービス・アプリの開発/保守を行って頂きます。
■ 雇用形態 正社員
■ 想定年収 400～600万円
■ 勤務時間 9:00～18:00※配属先にて異なる
■ 休み 土日・祝日休み
■ 賞与（年2回）
■ 昇給（年1回）
■ 各種社会保険完備
[採用要件]
・法人経験3年以上(要相談)
・開発業務経験がある方
・高校卒業以上
・22～42歳の方
沖縄に住みたいな～って方は
スキルによって社員寮を完備できます!!
★ ケミストリーエンジニアを募集!! ★
最先端の開発現場で活躍できますうえ、
先端材料開発部門にて、新たな分析手法の確立や製品開発に携われます!!
■ 雇用形態 正社員
■ 想定年収 350~700万円
■ 勤務時間 9:00?18:00
■ 休み 土日祝日
■ 賞与あり（年2回）
■ 昇給あり（年2回）
■ 各種社会保険完備
■ 産前産後休暇・育児休業
■ 介護休業
■ 寮・社宅制度あり
■ 通勤手当
■ 残業手当
■ 住宅手当
■ 家族手当
■ 業務関連資格手当
■ 資格報奨金
豊富なキャリア支援制度があり、エンジニアとして着実にキャリアアップが可能です。
[勤務地]
・東京都
・大阪府
[採用要件]
・企業での研究開発経験
・大学卒業以上
・23～40歳の方
★ 事業開発チームのマネージャー候補を募集 ★
全国70万あるショップの成長支援を行なっている会社です。
ショップオーナーへ届けるサービスの設計・開発・運用の全行程に携わることが可能!!
■ 雇用形態 正社員
■ 想定年収 600?900万円
■ 勤務時間 フレキシブル制
※コアタイム：12:00?16:00
■ 休み 完全週休2日制
■ 各種社会保険完備
■ 交通費支給
■ 社内親睦会制度
■ 自社サービス利用ショップでの購入支援
ネット販売の周辺事業から、リアルの領域まで広く携われることが特徴。
責任重大なポジションですが、その分やりがいと達成感があるお仕事です!!
[勤務地]
・東京都港区
[採用要件]
・下記業界での商品企画立案・事業推進経験
インターネット／小売／金融
・クラウドサービスやOfficeの利用可能な方
・大学卒業以上
・27～38歳の方
・転職回数3回まで
★ 質問の受付や相談につきましては、本ブログ内のコメント欄より受けております。
===========================================
↓↓ 以下のSNSでも情報の掲載などしております。
===========================================Bootstrapを活用しよう! [ Ⅸ. ナビゲーションバーの作成 ]
皆さん、本日もお疲れ様です。
では、早速本日の内容を確認していきましょう(⌒∇⌒)
Bootstrapを用いたナビゲーションバーの作成
ナビゲーションバーとは??
==============================================
✫ サイトの階層間を移動する際に使われる誘導の為の
メニューである。
[ サンプルイメージ ]
==============================================
ログイン<モーダル機能なし>
● では、早速上記のサンプルのようなナビゲーションバー
を作成していきましょう。
[ コード ]
<!-- HTML --> <span id="left">◆ナビバー [ ログイン<モーダル機能なし> ] </span> <br> <!-- ナビの色 : ブラック[ navbar-dark bg-dark] --> <nav class="navbar navbar-expand-sm navbar-dark bg-dark mt-3 mb-3 vv"> <div class="collapse navbar-collapse"> <ul class="navbar-nav"> <li class="nav-item active "> <a class="nav-link mo" id="co" href="#"><b>ホーム</b></a> </li> <li class="nav-item dropdown"> <a class="nav-link mi dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><b><span id="co">事業詳細</span></b></a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" id="co" href="#">事業内容</a> <a class="dropdown-item" id="co" href="#">代表挨拶</a> </div> </li> <li class="nav-item active"> <a class="nav-link mo" id="co" href="#"><b>アクセス</b></a> </li> <li class="nav-item active"> <a class="nav-link mi" id="co" href="#"><b>問い合わせ</b></a> </li> </ul> </div> <!-- フォーム --> <form class="form-inline" id="right"> <span class="na"> ユーザID : </span> <input class="form-control mr-sm-1" type="search"> <span class="na"> パスワード : </span> <input class="form-control mr-sm-1" type="search"> <button class="btn btn-primary ma" type="submit">ログイン</button> </form> </nav> <!-- CSS (独自に指定したもの) --> <style> #right { margin-left: 140px; } #left { margin-left:15px; } #co { color:black; } .na { color:white; font-size:15px; margin-right:5px; margin-left:5px; } .vv { margin-left:15px; } .mo { background-color:orange; margin-right:7px; width:120px; text-align: center; border-radius: 10px 10px 10px 10px; } .mi { background-color:darkseagreen; margin-right:7px; width:120px; text-align: center; border-radius: 10px 10px 10px 10px; } </style>
↓
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
[ 実行結果 ]
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
ログイン<モーダル機能あり>
[ コード ]
<!-- HTML (ナビバー部分) --> <span id="left">◆ナビバー [ ログイン<モーダル機能あり> ] </span> <br> <!-- ナビの色 : ブラック[ navbar-dark bg-dark] --> <nav class="navbar navbar-expand-sm navbar-dark bg-dark mt-3 mb-3 vv"> <div class="collapse navbar-collapse"> <ul class="navbar-nav"> <li class="nav-item active "> <a class="nav-link mo" id="co" href="#"><b>ホーム</b></a> </li> <li class="nav-item dropdown"> <a class="nav-link mi dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><b><span id="co">事業詳細</span></b></a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" id="co" href="#">事業内容</a> <a class="dropdown-item" id="co" href="#">代表挨拶</a> </div> </li> <li class="nav-item active"> <a class="nav-link mo" id="co" href="#"><b>アクセス</b></a> </li> <li class="nav-item active"> <a class="nav-link mi" id="co" href="#"><b>問い合わせ</b></a> </li> </ul> </div> <!-- フォーム --> <!-- data-target ="##"で表示させるモーダルを指定 --> <form class="form-inline"> <button class="btn btn-primary ma" type="submit" data-toggle="modal" data-target="#modal1" >ログイン画面を表示</button> </form> </nav> <!-- HTML (モーダル部分) --> <div class="modal" id="modal1" tabindex="-1" role="dialog" aria-labelledby="staticModalLabel" aria-hidden="true" data-show="true" data-keyboard="true" data-backdrop="static"> <!-- modal-dialog-centered : 垂直に中央表示 --> <!-- .modal-dialog-scrollable : スクロールを可能にする --> <!-- モーダルが表示された際のコンテンツをclass = "modal-dialog"内に記述 --> <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable"> <!-- class="modal-content"の中に具体的な内容を記述 --> <div class="modal-content"> <!-- モーダルヘッダー --> <div class="modal-header"> <!-- モーダルタイトル --> <h4 class="modal-title loca">ログイン画面</h4> <!-- モーダルを閉じる「?」ボタン --> <button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true">×</span> </button> <!-- 「?」: 終 --> </div> <!-- モーダルの中身 --> <div class="modal-body"> <!-- フォームを作成 --> <form> <div class="form-group"> <label for="recipient-name" class="control-label">ユーザーID :</label> <input type="text" class="form-control" id="recipient-name"> </div> <div class="form-group"> <label for="recipient-name" class="control-label">パスワード :</label> <input type="password" class="form-control" id="recipient-name"> </div> <br> <button type="submit" class="bu_login"> <span id="si">ログイン</span> </button> <br> <br> <span class="new"><a href="#">▲ 新規登録はこちら ▲</a></span> <br> <span class="new"><a href="#">▲ パスワード忘れた/変更はこちら ▲</a></span> <br> </form> <!-- フォーム : 終 --> </div> <!-- モーダルの中身 : 終 --> <div class="modal-footer"> <!-- モーダルを閉じるボタン --> <button type="button" class="btn btn-default" data-dismiss="modal">閉じる</button> <!-- 終 --> </div> </div> </div> <!-- CSS (独自に指定したもの) --> <style> #co { color:black; } .vv { margin-left:15px; } .mo { background-color:orange; margin-right:7px; width:120px; text-align: center; border-radius: 10px 10px 10px 10px; } .mi { background-color:darkseagreen; margin-right:7px; width:120px; text-align: center; border-radius: 10px 10px 10px 10px; } .ma { margin-left:5px; } </style>
↓
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
[ 実行結果 ]
↓
[ モーダル画面 ]
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
位置の指定 : 左寄せ, 右寄せ, 中央寄せ
● ここでは、ナビゲーションバー内の要素の位置を指定する方法をお教えします。
■ 左寄せ / 右寄せ
[ コード ]
<!-- HTML --> <span id="left" >◆ナビバー [ 位置の指定 : 左寄せ( justify-content-start ), 右寄せ( justify-content-end ) ] </span> <br> <!-- ナビの色 : ブラック[ navbar-dark bg-dark] --> <nav class="navbar navbar-expand-sm navbar-dark bg-dark mt-3 mb-3 vv"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav4" aria-controls="navbarNav4" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <!-- 左寄せ -->> <div class="collapse navbar-collapse justify-content-start "> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link mo" id="co" href="#"><b>ホーム</b></a> </li> <li class="nav-item dropdown"> <a class="nav-link mi dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><b><span id="co">事業詳細</span></b></a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" id="co" href="#">事業内容</a> <a class="dropdown-item" id="co" href="#">代表挨拶</a> </div> </li> </ul> </div> <!-- 右寄せ -->> <div class="collapse navbar-collapse justify-content-end "> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link mo" id="co" href="#"><b>アクセス</b></a> </li> <li class="nav-item active"> <a class="nav-link mi" id="co" href="#"><b>問い合わせ</b></a> </li> </ul> </div> </nav> <!-- CSS (独自に指定したもの) --> <style> #left { margin-left:15px; } #co { color:black; } .vv { margin-left:15px; } .mo { background-color:orange; margin-right:7px; width:120px; text-align: center; border-radius: 10px 10px 10px 10px; } .mi { background-color:darkseagreen; margin-right:7px; width:120px; text-align: center; border-radius: 10px 10px 10px 10px; } </style>
↓
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
[ 実行結果 ]
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
■ 中央寄せ
[ コード ]
<!-- HTML --> <span id="left" >◆ナビバー [ 位置の指定 : 中央寄せ( justify-content-center ) ] </span> <br> <!-- ナビの色 : グレー[ navbar-secondary bg-secondary] --> <nav class="navbar navbar-expand-sm navbar-secondary bg-secondary mt-3 mb-3 vv"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav4" aria-controls="navbarNav4" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse justify-content-center "> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link mo" id="co" href="#"><b>ホーム</b></a> </li> <li class="nav-item dropdown"> <a class="nav-link mi dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><b><span id="co">事業詳細</span></b></a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" id="co" href="#">事業内容</a> <a class="dropdown-item" id="co" href="#">代表挨拶</a> </div> </li> <li class="nav-item active"> <a class="nav-link mo" id="co" href="#"><b>アクセス</b></a> </li> <li class="nav-item active"> <a class="nav-link mi" id="co" href="#"><b>問い合わせ</b></a> </li> </ul> </div> </nav> <!-- CSS (独自に指定したもの) --> <style> #left { margin-left:15px; } #co { color:black; } .vv { margin-left:15px; } .mo { background-color:orange; margin-right:7px; width:120px; text-align: center; border-radius: 10px 10px 10px 10px; } .mi { background-color:darkseagreen; margin-right:7px; width:120px; text-align: center; border-radius: 10px 10px 10px 10px; } </style>
↓
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
[ 実行結果 ]
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
以上、
皆さんの開発における参考になれば幸いです。
また、その他不明点など御座いましたら、コメントして頂ければと思います。
確認次第、対応させて頂きます。
===========================================
↓↓ 以下のSNSでも情報の掲載などしております。
===========================================Bootstrapを活用しよう!【Ⅷ. メディアオブジェクトの操作】
皆さん、本日もお疲れ様です。
では、早速本日の内容を確認していきましょう(⌒∇⌒)
Bootstrapを用いたメディアオブジェクトの操作
メディアオブジェクトとは??
↓
==============================================
画像や動画(メディアオブジェクト)などのことです。
今回は、画像などのコンテンツを左側・中央・右側など自由に揃えるための方法を紹介します。
[ 例 ]
※ 分かりやすいように背景を緑にしております。
緑で囲まれている部分が全体図です。
==============================================
※ 各サンプルコードは、bodyタグ内に記述するようにしてください。
メディアオブジェクト [単体]
※ 結果は、上記の例と同じです。
[ コード ]
<!-- HTML --> <span id="bp">■ <b>メディアオブジェクト [単体]</b></span> <br> <br> <div class="media" id="co"> <img src="DSC_0481.JPG" class="mr-3" alt="..." id="kk"> <div class="media-body"> <h5 class="mt-0">【説明】</h5> ここに記事の詳細を記述したりする。 <br> = テストです。 </div> </div> <!-- CSS (独自に指定したもの) --> <style> #bp { margin-left:15px; font-size:20px; } #kk { width:150px; height:100px; margin-left:5px; margin-top:5px; } #co { background-color:lightgreen; margin-left:20px; width:550px; height:110px; } </style>
メディアオブジェクト [ネスト]
● 各メディアオブジェクトをネストさせることも可能。
[ コード ]
<!-- HTML --> <span id="bp">■ <b>メディアオブジェクト [ネスト]</b></span> <br> <br> <div class="media" id="co"> <img src="1517671525391.jpg" class="mr-3" alt="..." id="kk"> <div class="media-body"> <h5 class="mt-0">【説明】</h5> ここに記事の詳細を記述したりする。 <br> = テストです。<br> <br> <div class="media mt-3" id="co"> <a class="mr-3" href="#"> <img src="test_image.JPG" class="mr-3" alt="..." id="kk"> </a> <div class="media-body"> <h5 class="mt-0">【説明】</h5> ここに記事の詳細を記述したりする。 <br> = テストです。 </div> </div> </div> </div> <!-- CSS (独自に指定したもの) --> <style> #bp { margin-left:15px; font-size:20px; } #kk { width:150px; height:100px; margin-left:5px; margin-top:5px; } #co { background-color:lightgreen; margin-left:20px; width:550px; height:110px; } </style>
↓
[ 実行結果 : ネスト ]
画像の位置を指定 [上部・中央・下部]
● 画像を上、中、または下に配置することが可能である。
[ コード ]
<!-- HTML --> <span id="bp">■ <b>画像の位置を指定 [上部・中央・下部]</b></span> <br> <br> <!-- 上部 --> <div class="media" id="co"> <img src="DSC_0481.JPG" class="align-self-start mr-3" alt="..." id="kl"> <div class="media-body"> <h5 class="mt-0"><b>上部に画像を表示</b></h5> ここに記事の詳細を記述したりする。 <br> = テストです。 </div> </div> <br> <!-- 中央 --> <div class="media" id="co"> <img src="test_image.JPG" class="align-self-center mr-3" alt="..." id="kl"> <div class="media-body"> <h5 class="mt-0"><b>中央に画像を表示</b></h5> ここに記事の詳細を記述したりする。 <br> = テストです。 </div> </div> <br> <!-- 下部 --> <div class="media" id="co"> <img src="1517671525391.jpg" class="align-self-end mr-3" alt="..." id="kl"> <div class="media-body"> <h5 class="mt-0"><b>下部に画像を表示</b></h5> ここに記事の詳細を記述したりする。 <br> = テストです。 </div> </div> <!-- CSS(独自に指定したもの) --> <style> #bp { margin-left:15px; font-size:20px; } #co { background-color:lightgreen; margin-left:20px; width:550px; height:110px; } #kl { width:100px; height:70px; margin-left:5px; margin-top:5px; margin-bottom:5px; } </style>
↓
[ 実行結果 : 画像の位置を指定]
メディアオブジェクト [リスト]
● 各メディアオブジェクトをリスト化してまとめることも可能。
[ コード ]
<!-- HTML --> <span id="bp">■ <b>メディアオブジェクト [リスト]</b></span> <br> <br> <ul class="list-unstyled"> <li class="media" id="co"> <img src="DSC_0481.JPG" class="mr-3" alt="..." id="kk"> <div class="media-body"> <h5 class="mt-0 mb-1"><b>リスト ①</b></h5> ここに記事の詳細を記述したりする。 <br> = テストです。 </div> </li> <li class="media my-4" id="co"> <img src="test_image.JPG" class="mr-3" alt="..." id="kk"> <div class="media-body"> <h5 class="mt-0 mb-1"><b>リスト ②</b></h5> ここに記事の詳細を記述したりする。 <br> = テストです。 </div> </li> <li class="media" id="co"> <img src="1517671525391.jpg" class="mr-3" alt="..." id="kk"> <div class="media-body"> <h5 class="mt-0 mb-1"><b>リスト ③</b></h5> ここに記事の詳細を記述したりする。 <br> = テストです。 </div> </li> </ul> <!-- CSS(独自に指定したもの) --> <style> #kk { width:150px; height:100px; margin-left:5px; margin-top:5px; } #bp { margin-left:15px; font-size:20px; } #co { background-color:lightgreen; margin-left:20px; width:550px; height:110px; } </style>
↓
[ 実行結果 : リスト]
一通り、見ていきましたがその他不明点など御座いました
ら、コメントして頂ければと思います。
確認次第、対応させて頂きます。
===========================================
↓↓ 以下のSNSでも情報の掲載などしております。
===========================================Bootstrapを活用しよう! 【Ⅶ. スピナーの作成】
皆さん、本日もお疲れ様です。
今回は、「スピナーの作成」方法について解説させて頂きたいと思います。
では、、はじめていきましょう!!
Bootstrapを用いたスピナーの作成方法
スピナーとは??
↓
==============================================
● コンポーネントまたはページの読み込み状態を示すもの
[ 例 ]
==============================================
今回は、上記の実行例にて表示されている順番に
コードの紹介をさせて頂ければと思います。
※ サンプルコードは、bodyタグ内に記述するようにしてください。
ボーダースピナー
[ コード ]
<!-- HTML --> <span id="bp">■ <b>ボーダースピナー</b></span> <br> <br> <div class="spinner-border" id="bo" role="status"> <span class="sr-only" >Loading...</span> </div> <!-- CSS --> <style> #bp { margin-left:15px; font-size:20px; } #bo { margin-left:50px; } </style>
色の設定方法
[ コード ]
<span id="bp">■ <b>色の変更</b></span> <br> <br> <!-- 青 --> <div class="spinner-border text-primary" id="bo" role="status"> <span class="sr-only">Loading...</span> </div> <!-- グレー --> <div class="spinner-border text-secondary" role="status"> <span class="sr-only">Loading...</span> </div> <!-- 緑 --> <div class="spinner-border text-success" role="status"> <span class="sr-only">Loading...</span> </div> <!-- 赤 --> <div class="spinner-border text-danger" role="status"> <span class="sr-only">Loading...</span> </div> <!-- 黄色 --> <div class="spinner-border text-warning" role="status"> <span class="sr-only">Loading...</span> </div> <!-- 水色 --> <div class="spinner-border text-info" role="status"> <span class="sr-only">Loading...</span> </div> <!-- 白 --> <div class="spinner-border text-light" role="status"> <span class="sr-only">Loading...</span> </div> <!-- 黒 --> <div class="spinner-border text-dark" role="status"> <span class="sr-only">Loading...</span> </div>
グロウイングスピナー
[ コード ]
<!-- HTML --> <span id="bp">■ <b>グロウイングスピナー</b></span> <!-- 色の指定方法はボーダースピナーと同様 --> <br> <br> <div class="spinner-grow" role="status" id="bo"> <span class="sr-only">Loading...</span> </div> <!-- CSS --> <style> #bp { margin-left:15px; font-size:20px; } #bo { margin-left:50px; } </style>
ボタン内にスピナーを設定 [ ボーダー ]
[ コード ]
<!-- CSSはこれまでのものと同様のものを使用--> <span id="bp">■ <b>ボタン内のスピナー [ボーダー]</b></span> <br> <br> <!-- 左側のボタン --> <button class="btn btn-primary" type="button" disabled id="bo"> <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> <span class="sr-only">Loading...</span> </button> <!-- 右側のボタン --> <button class="btn btn-primary" type="button" disabled> <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading... </button>
ボタン内にスピナーを設定 [ グロウイング ]
[ コード ]
<!-- CSSはこれまでのものと同様のものを使用--> <span id="bp">■ <b>ボタン内のスピナー [ボーダー]</b></span> <br> <br> <!-- 左側のボタン --> <button class="btn btn-primary" type="button" disabled id="bo"> <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span> <span class="sr-only">Loading...</span> </button> <!-- 右側のボタン --> <button class="btn btn-primary" type="button" disabled> <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span> Loading... </button>
以上になりますが、如何でしたでしょうか??
その他不明点など御座いましたら、コメントして頂ければと思います。
確認次第、対応させて頂きます。
===========================================
↓↓ 以下のSNSでも情報の掲載などしております。
===========================================Bootstrapを活用しよう!【Ⅵ. ドロップダウンの作成】
皆さん、お疲れ様です。
今回は、
「ドロップダウンの作成」の方法
について紹介させて頂きます。
ドロップダウンとは??
↓
==============================================
ソフトウェアやWebサイトなどにおけるメニューの表示方法の一種で、クリックなどの操作によって複数のメニュー項目を表示させるタイプの表示方法のこと。
[ 例 ]
ボタンをクリックすると、
ボタンの下に設定したメニューが表示される。
==============================================
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
※ 始める前に
headタグ内のBootstrapのJSの位置のコードを
以下のものに変更してください
→ ないとドロップダウンが正常に動作しませんので、
気をつけてください
<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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
※ 各サンプルコードは、bodyタグ内に記述するようにしてください。
標準のドロップダウン
上記の例と同じドロップダウンになります。
[ コード ]
<i><p style="font-size:21px; margin:20px; font-weight:bold;">●標準のドロップダウン </p></i> <div class="dropdown"> <!-- 切替ボタンの設定 --> <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="margin-left:20px;"> ドロップダウンボタン </button> <!-- ドロップメニューの設定 --> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="#">項目1</a> <a class="dropdown-item" href="#">項目2</a> <a class="dropdown-item" href="#">項目3</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">その他リンク</a> </div><!-- /.dropdown-menu --> </div><!-- /.dropdown --> </div>
大小のドロップダウン
大小を表すことに加えて、
ボタンの分割なども行うことが出来ます。
[ コード : 大<分割あり> ]
<i><p style="font-size:21px; margin:20px; font-weight:bold;">●大きいサイズ[分割あり] </p></i> <div class="btn-group"> <button class="btn btn-secondary btn-lg" type="button" style="margin-left:20px;"> 大きいサイズ[分割あり] </button> <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">項目1</a> <a class="dropdown-item" href="#">項目2</a> <a class="dropdown-item" href="#">項目3</a> </div> </div>
↓
[ 実行結果 : 大<分割あり> ]
[ コード : 大<分割なし> ]
<i><p style="font-size:21px; margin:20px; font-weight:bold;">●大きいサイズ[分割なし] </p></i> <div class="btn-group"> <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="margin-left:20px;"> 大きいボタン [分割なし] </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">項目1</a> <a class="dropdown-item" href="#">項目2</a> <a class="dropdown-item" href="#">項目3</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">その他リンク</a> </div> </div> </div>
↓
[ 実行結果 : 大<分割なし> ]
[ コード : 小<分割あり> ]
<i><p style="font-size:21px; margin:20px; font-weight:bold;">●小さいサイズ[分割あり] </p></i> <div class="btn-group"> <button class="btn btn-secondary btn-sm" type="button" style="margin-left:20px;"> 小さいサイズ[分割あり] </button> <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">項目1</a> <a class="dropdown-item" href="#">項目2</a> <a class="dropdown-item" href="#">項目3</a> </div> </div>
↓
[ 実行結果 : 小<分割あり> ]
[ コード : 小<分割なし> ]
<i><p style="font-size:21px; margin:20px; font-weight:bold;">●小さいサイズ[分割なし] </p></i> <div class="btn-group"> <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="margin-left:20px;"> 小さいサイズ[分割なし] </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">項目1</a> <a class="dropdown-item" href="#">項目2</a> <a class="dropdown-item" href="#">項目3</a> </div> </div>
↓
[ 実行結果 : 小<分割なし> ]
ドロップアップ < レフト / ライト >
下方向だけでなく、上・左・右方向に項目を表示させる方法になります。
[ コード : ドロップアップ ]
<i><p style="font-size:21px; margin:20px; font-weight:bold;">●ドロップアップ </p></i> <div class="btn-group dropup"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="margin-left:20px;"> ドロップアップ </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">項目1</a> <a class="dropdown-item" href="#">項目2</a> <a class="dropdown-item" href="#">項目3</a> </div> </div>
↓
[ 実行結果 : ドロップアップ ]
[ コード : ドロップレフト ]
<i><p style="font-size:21px; margin:20px; font-weight:bold;">●ドロップレフト </p></i> <div class="btn-group dropleft"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="margin-left:200px; margin-top:70px;"> ドロップレフト </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">項目1</a> <a class="dropdown-item" href="#">項目2</a> <a class="dropdown-item" href="#">項目3</a> </div> </div>
↓
[ 実行結果 : ドロップレフト ]
[ コード : ドロップライト ]
<i><p style="font-size:21px; margin:20px; font-weight:bold;">●ドロップライト </p></i> <div class="btn-group dropright"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="margin-left:20px;"> ドロップライト </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">項目1</a> <a class="dropdown-item" href="#">項目2</a> <a class="dropdown-item" href="#">項目3</a> </div> </div>
↓
[ 実行結果 : ドロップライト ]
以上になりますが、如何でしたでしょうか??
その他不明点など御座いましたら、コメントして頂ければと思います。
迅速に対応させて頂きます!!
それでは、今回はこれで終わっていきたいと思います。
皆さんの今後の開発の手助けに少しでもなれば嬉しいです(⌒∇⌒)
===========================================
↓↓ 以下のSNSでも情報の掲載などしております。
===========================================