JSPを開発していますが、デザインにはBootstrapを使用しています。 今回はヘッダーとフッターを付けよう！っていうテーマでBootstrapを調べていました。 やりたいイメージとしてはこれ https://getbootstrap.com/docs/4.5/examples/sticky-footer-navbar/ このヘッダーとフッターの配置にしたい。 でもこうかな？と思って抜粋して色々試してみてもフッターが上手く画面下部に張り付きません。 で、サンプルダウンロードして不要そうな所消してフッターの位置だけ保持できたのがコチラ。 <!doctype html> <html class="h-100"> <head> <meta charset="utf-8"> <title>Sticky Footer Navbar Template · Bootstrap</title> <!-- Bootstrap core CSS --> <link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body class="d-flex h-100"> <!-- Begin page content --> <footer class="footer mt-auto py-3"> <div class="container"> <span class="text-muted">Place sticky footer content here.</span> </div> </footer> </body> </html> HTMLとBODYにもクラスを設定しなきゃいけなくて、これによって「mt-auto」が上手く動くようになっているようです。 やっぱりコレかな？と思いながら追記していくより、不必要そうなものを消して結果を確認していく方が早く回答が得られますね。 Bootstrap便利だけど、色々ありすぎてもはやJqueryを使っている気分になりますね。
JSPを開発していますが、デザインにはBootstrapを使用しています。
今回はヘッダーとフッターを付けよう！っていうテーマでBootstrapを調べていました。
やりたいイメージとしてはこれ https://getbootstrap.com/docs/4.5/examples/sticky-footer-navbar/
このヘッダーとフッターの配置にしたい。
でもこうかな？と思って抜粋して色々試してみてもフッターが上手く画面下部に張り付きません。
で、サンプルダウンロードして不要そうな所消してフッターの位置だけ保持できたのがコチラ。
<!doctype html> <html class="h-100"> <head> <meta charset="utf-8"> <title>Sticky Footer Navbar Template · Bootstrap</title> <!-- Bootstrap core CSS --> <link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body class="d-flex h-100"> <!-- Begin page content --> <footer class="footer mt-auto py-3"> <div class="container"> <span class="text-muted">Place sticky footer content here.</span> </div> </footer> </body> </html>
HTMLとBODYにもクラスを設定しなきゃいけなくて、これによって「mt-auto」が上手く動くようになっているようです。
やっぱりコレかな？と思いながら追記していくより、不必要そうなものを消して結果を確認していく方が早く回答が得られますね。
Bootstrap便利だけど、色々ありすぎてもはやJqueryを使っている気分になりますね。
2020年11月3日。 データ消失。 200個程あったメモ用デモファイルが全て消失。 自作パソコンが壊れ、デスクトップにあったデータがすべて消えたのでQiitaをメモ代わりに。 ＃１ lighting box（ポップアップで画像拡大） 下記のサイトからzipファイルをダウンロード。 https://lokeshdhakar.com/projects/lightbox2/ ダウンロード出来たら同じ階層に js css img それぞれのファイルを置く。 とりあえず完成コード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/lightbox.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="js/lightbox.min.js"></script> </head> <body> <a href="new-battery01.jpg" data-lightbox="demo-group"><img class="box" style="" src="new-battery01.jpg" alt="詳細画像"></a> <a href="new-battery01.jpg" data-lightbox="demo-group"><img class="box" style="" src="new-battery01.jpg" alt="詳細画像"></a> <a href="new-battery01.jpg" data-lightbox="demo-group"><img class="box" style="" src="new-battery01.jpg" alt="詳細画像"></a> <a href="new-battery01.jpg" data-lightbox="demo-group"><img src="new-battery01.jpg" /></a> </body> </html> 参考：http://webnonotes.com/javascript-2/jquerypopup/
2020年11月3日。
データ消失。
200個程あったメモ用デモファイルが全て消失。
自作パソコンが壊れ、デスクトップにあったデータがすべて消えたのでQiitaをメモ代わりに。
＃１ lighting box（ポップアップで画像拡大）
下記のサイトからzipファイルをダウンロード。 https://lokeshdhakar.com/projects/lightbox2/
ダウンロード出来たら同じ階層に js css img それぞれのファイルを置く。
とりあえず完成コード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/lightbox.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="js/lightbox.min.js"></script> </head> <body> <a href="new-battery01.jpg" data-lightbox="demo-group"><img class="box" style="" src="new-battery01.jpg" alt="詳細画像"></a> <a href="new-battery01.jpg" data-lightbox="demo-group"><img class="box" style="" src="new-battery01.jpg" alt="詳細画像"></a> <a href="new-battery01.jpg" data-lightbox="demo-group"><img class="box" style="" src="new-battery01.jpg" alt="詳細画像"></a> <a href="new-battery01.jpg" data-lightbox="demo-group"><img src="new-battery01.jpg" /></a> </body> </html>
参考：http://webnonotes.com/javascript-2/jquerypopup/
windowsとかでよくみるスクリーンセーバーをHTMLとCSSで作ってみました。 常にブラウザの中央に回転する「Windows 10」を配置。 ソース index.html <p>Windows 10</p> style.css body { background: #000; position: relative; width: 100vw; height: 100vh; margin: 0; padding: 0; } p { color: #fff; font-size: 50px; display: inline-block; animation: spin 5s infinite linear; position :absolute; top: 50%; left: 50%; } @keyframes spin { from { transform: translate(-50%,-50%) rotateY(0deg); } to { transform: translate(-50%,-50%) rotateY(360deg); } } 解説 htmlのテキストは好きな文字や画像などを入れてください。 CSSですが、本物のスクリーンセーバー同様、背景は黒、文字は白に設定。文字サイズなども適当な大きさに指定。 その後、position指定を使い、上下中央に文字を配置。この時、body要素をウィンドウサイズいっぱいと同等になるようwidthやheightを指定。 通常上下中央であればp要素にtransform: translate(-50%,-50%);を指定することでピッタリど真ん中なのですが、回転するアニメーションでtransformを使うので一時保留。 最後にアニメーションの処理をするため@keyframesを上の通り記述。このとき上下中央にさせるために必要なtranslate(-50%,-50%)も一緒に書く。 まとめ 予想していたよりも簡単に作成することができました。 普段アニメーションはあまり使わないので、もっといろいろ作成してみたいですね。 おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】HTML・CSSのちょいテク詰め合わせ
windowsとかでよくみるスクリーンセーバーをHTMLとCSSで作ってみました。
常にブラウザの中央に回転する「Windows 10」を配置。
<p>Windows 10</p>
body { background: #000; position: relative; width: 100vw; height: 100vh; margin: 0; padding: 0; } p { color: #fff; font-size: 50px; display: inline-block; animation: spin 5s infinite linear; position :absolute; top: 50%; left: 50%; } @keyframes spin { from { transform: translate(-50%,-50%) rotateY(0deg); } to { transform: translate(-50%,-50%) rotateY(360deg); } }
htmlのテキストは好きな文字や画像などを入れてください。
CSSですが、本物のスクリーンセーバー同様、背景は黒、文字は白に設定。文字サイズなども適当な大きさに指定。 その後、position指定を使い、上下中央に文字を配置。この時、body要素をウィンドウサイズいっぱいと同等になるようwidthやheightを指定。
通常上下中央であればp要素にtransform: translate(-50%,-50%);を指定することでピッタリど真ん中なのですが、回転するアニメーションでtransformを使うので一時保留。
transform: translate(-50%,-50%);
最後にアニメーションの処理をするため@keyframesを上の通り記述。このとき上下中央にさせるために必要なtranslate(-50%,-50%)も一緒に書く。
@keyframes
translate(-50%,-50%)
予想していたよりも簡単に作成することができました。 普段アニメーションはあまり使わないので、もっといろいろ作成してみたいですね。
~ Qiitaで毎日投稿中!! ~ 【初心者向け】HTML・CSSのちょいテク詰め合わせ
はじめに Sassとは Sassは現在のCSSのコーディング環境のデファクトスタンダードである。 SASS記法とSCSS記法の2種類がある。（現在主に利用されているのはSCSS記法） CSSを効率よく書くための便利な機能が含まれている。 コンパイルライブラリはnode-sass(libsassに依存)が最もシェアが多い。 libsassが先日deprecatedになったため、今後はsass(旧:dart-sass)のシェアが伸びると予測される。 PostCSSとは PostCSS自体は、CSSを加工しやすいようにパースし、結果をCSSとして出力する機能のみ提供する。 最新のCSSのpolyfillとして利用できるものから、ジョークプラグインまで様々なプラグインが公開されている。 Sassとの組み合わせでもよく利用される。AutoprefixerやstylelintもPostCSSを利用している。 CSSを効率よく書くための機能 ネスト SCSS /** input */ .block { display: block; &__element { display: block; } } /** output */ .block { display: block; } .block__element { display: block; } PostCSS(postcss-nested) /** input */ .block { display: block; &__element { display: block; } } /** output */ .block { display: block; } .block__element { display: block; } PostCSS(postcss-nesting) /** input */ .block { display: block; & element { display: block; } } /** output */ .block { display: block; } .block element { display: block; } 変数 SCSS /** input */ $text-color: #333; .block { color: $text-color; } /** output */ .block { color: #333; } PostCSS(postcss-custom-properties) /** input */ :root { --text-color: #333; } .block { color: var(--text-color); } /** output */ :root { --text-color: #333; } .block { color: #333; color: var(--text-color); } 演算 SCSS /** input */ $text-size: 16px; .block { font-szie: $text-size * 2; } /** output */ .block { font-szie: 32px; } PostCSS(postcss-calc) /** input */ :root { --text-size: 16px; } .block { font-szie: calc(var(--text-size) * 2); } /** output */ :root { --text-size: 16px; } .block { font-szie: 32px; } ファイルの分割管理 SCSS @use "variables"; PostCSS(postcss-import) @import "variables.css"; /** or */ @import "variables.pcss"; Sassを使うメリット・デメリット シェアが多い分、周りに知っている人が多い。 Sassを導入するだけで、一通り便利な機能が利用できるため、環境構築コストが低い。 CSSに加えて、Sassの学習コストがかかる。 Sassの仕様変更をキャッチアップする必要がある。 PostCSSを使うメリット・デメリット 必要な機能(プラグイン)を自分で選んで組み合わせられる。 最新のCSSのpolyfillプラグインを利用するのであれば、CSSの学習コストのみでよい。 周りに知っている人が少ない。 プラグインを選定する必要があるので、環境構築コストがかかる。 PostCSSを選んだ理由 Sassにはない便利な機能を追加できる。 Sassに使わない・使ってほしくない機能がそこそこある。（@extendなど） 一度プラグインを選定してしまえば、以降はあまり環境構築コストはかからない。(postcss-preset-envを使うと楽。) SassとPostCSSを組み合わせて利用するのが辛い。（npm scriptsでデータの受け渡しが遅いetc...） 自分でパイプラインを考えるのが好き 最後に 慣れるとPostCSSは便利だが、Sassのシェアが多いことに変わりはないので、 まずは、Sassを使ってみたうえで不満があれば、PostCSSを併用するなり、PostCSSに移行するのがよいと思う。 （弊社内では引き続きPostCSSの普及を進める予定）
/** input */ .block { display: block; &__element { display: block; } } /** output */ .block { display: block; } .block__element { display: block; }
/** input */ .block { display: block; & element { display: block; } } /** output */ .block { display: block; } .block element { display: block; }
/** input */ $text-color: #333; .block { color: $text-color; } /** output */ .block { color: #333; }
/** input */ :root { --text-color: #333; } .block { color: var(--text-color); } /** output */ :root { --text-color: #333; } .block { color: #333; color: var(--text-color); }
/** input */ $text-size: 16px; .block { font-szie: $text-size * 2; } /** output */ .block { font-szie: 32px; }
/** input */ :root { --text-size: 16px; } .block { font-szie: calc(var(--text-size) * 2); } /** output */ :root { --text-size: 16px; } .block { font-szie: 32px; }
@use "variables";
@import "variables.css"; /** or */ @import "variables.pcss";
シェアが多い分、周りに知っている人が多い。 Sassを導入するだけで、一通り便利な機能が利用できるため、環境構築コストが低い。 CSSに加えて、Sassの学習コストがかかる。 Sassの仕様変更をキャッチアップする必要がある。
必要な機能(プラグイン)を自分で選んで組み合わせられる。 最新のCSSのpolyfillプラグインを利用するのであれば、CSSの学習コストのみでよい。 周りに知っている人が少ない。 プラグインを選定する必要があるので、環境構築コストがかかる。
@extend
慣れるとPostCSSは便利だが、Sassのシェアが多いことに変わりはないので、 まずは、Sassを使ってみたうえで不満があれば、PostCSSを併用するなり、PostCSSに移行するのがよいと思う。 （弊社内では引き続きPostCSSの普及を進める予定）
概要 最近、Bootstrapを使ってフロントを作っています。 自分への備忘録としてこれまでに使ってきたクラスをまとめておきます。 参照 Bootstrap (ver. 4.5) : https://getbootstrap.jp/ ブレークポイント sm : 576px md : 768px lg : 992px xl : 1200px レイアウト container 固定幅のコンテナ 各ブレークポイントごとに最大幅が変わる row グリッドシステムの行を決める要素 子にcolを持つことで真価を発揮 col グリッドシステムの列を決める要素 rowの子要素として使う col-sm-3 sm : 576px未満で縦並び 3 : (3/12 = 25% の幅) ボタン btn ボタンを作る btn-primary 青ベースのボタンを作る danger : 赤ベース secondary : 灰色ベース padding, margin p, m p : padding m : margin 方向 t : top b : bottom l : left r : right x : left and right (x軸方向) y : top and bottom (y方向) (blank) : 4方向 例) : pt-○ : padding-top: ○; サイズ $spacerに対する比で決まる。デフォルトで1rem=16px 0 : $spacer * 0 (=0) 1 : $spacer * 0.25 (=4px) 2 : $spacer * 0.50 (=8px) 3 : $spacer * 0.75 (=12px) 4 : $spacer * 1.00 (=16px) 5 : $spacer * 1.25 (=20px) auto : margin: auto; 例) : pt-1 : padding-top: 4px; Bootstrapの公式リファレンスで示されている代表的な例は下記のとおりです。 .mt-0 { margin-top: 0 !important; } .ml-1 { margin-left: ($spacer * .25) !important; } .px-2 { padding-left: ($spacer * .5) !important; padding-right: ($spacer * .5) !important; } .p-3 { padding: $spacer !important; } ちなみに!important をつけると、CSSファイルの読み込み順に関係なく、スタイルを適用させることができます。 色 primary : 青 secondary : ライトグレー success : 緑 danger : 赤 warning : 黄 info : 水色 light : かなり薄いグレー dark : ダークグレー
最近、Bootstrapを使ってフロントを作っています。 自分への備忘録としてこれまでに使ってきたクラスをまとめておきます。
参照 Bootstrap (ver. 4.5) : https://getbootstrap.jp/
Bootstrapの公式リファレンスで示されている代表的な例は下記のとおりです。
.mt-0 { margin-top: 0 !important; } .ml-1 { margin-left: ($spacer * .25) !important; } .px-2 { padding-left: ($spacer * .5) !important; padding-right: ($spacer * .5) !important; } .p-3 { padding: $spacer !important; }
ちなみに!important をつけると、CSSファイルの読み込み順に関係なく、スタイルを適用させることができます。
前提 これは自分用のメモに近しいものです。一瞬戸惑ったので次すぐできるように。 現象 単純な話です。 <div class="wrapper"> <div class="btn">BUTTON</div> </div> .wrapper { display: flex; flex-direction: column; } .btn { width: 7rem; height: 2.6rem; border: solid 0.2rem #bd4a4f; display: table-cell; vertical-align: middle; text-align: center; margin: auto 1rem; } .btnの中身のテキストを中央揃えにするためにdisplay:table-cellを適用したいんですが、親要素がflexだと子要素のtable-cellが解除されるのか、うまく縦方向の中央揃えができなくなります。 対処法 ボタン自体に最低限のラッパーをつけて保護してあげるだけ。 <div class="wrapper"> <div class="btn-wrapper"> <div class="btn">BUTTON</div> </div> </div> .btn-wrapper { width: 7rem; height: 2.6rem; /*必要ないけど、btnにmargin autoを適用していた場合はこっちに移す。それに応じて高さと幅も必要になる。*/ margin: auto 1rem; }
これは自分用のメモに近しいものです。一瞬戸惑ったので次すぐできるように。
単純な話です。
<div class="wrapper"> <div class="btn">BUTTON</div> </div>
.wrapper { display: flex; flex-direction: column; } .btn { width: 7rem; height: 2.6rem; border: solid 0.2rem #bd4a4f; display: table-cell; vertical-align: middle; text-align: center; margin: auto 1rem; }
.btnの中身のテキストを中央揃えにするためにdisplay:table-cellを適用したいんですが、親要素がflexだと子要素のtable-cellが解除されるのか、うまく縦方向の中央揃えができなくなります。
display:table-cell
ボタン自体に最低限のラッパーをつけて保護してあげるだけ。
<div class="wrapper"> <div class="btn-wrapper"> <div class="btn">BUTTON</div> </div> </div>
.btn-wrapper { width: 7rem; height: 2.6rem; /*必要ないけど、btnにmargin autoを適用していた場合はこっちに移す。それに応じて高さと幅も必要になる。*/ margin: auto 1rem; }
シェアが多い分、周りに知っている人が多い。
CSSに加えて、Sassの学習コストがかかる。
etc...）
）