railsでbootstrapを入れてもiPhoneでレスポンシブにならない時
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!DOCTYPE html> <html> <head> <title>NarouOsusume</title> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> <!-- ここ！！！--> <meta name="viewport" content=
[Rails]Bootstrap入れたら書けよ「viewport」 | Nanayaku blog
こんにちは、Nanayakuです。 今回は、Bootstrapで各デバイスのサイズにレスポンシブを合わせるため必要な「viewport」について解説します。 viewportとは viewportとは、 表示領域のことで、ブラウザにおける仮想のカンバスサイズを決めて、サイトの表示の仕方を制御する役割があります。 コピペで済ませていませんか？改めて学び直したい「Viewport」のすべて｜ferret つまり、viewportを設定していない状態だと、Bootstrapをインストールしていてもデバイスのサイズごとにレスポンスが合わせる事が出来ないという事です。 1枚目はMacでの表示画面で、2枚目の画像は「viewport」を設定せず表示したGalaxyの画面です。 このように、レスポンシブが全くあっていません。 viewportの書き方 場所 viewportを書く場所は、app/view
![[Rails]Bootstrap入れたら書けよ「viewport」 | Nanayaku blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/e4474441430579f5173bd6f0378e589ae6fd146a/height=288;version=1;width=512/https%3A%2F%2Fnanayaku.com%2Fwp-content%2Fuploads%2F2019%2F09%2Fcloud-1910599_640.png)
とほほのBootstrap 4入門 - モーダル - とほほのWWW入門
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal1"> Launch demo modal </button> <div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="label1" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="label1">Modal title</h5> <button type="button" c
一人でサービス作ってわかった、個人開発における3つの重要なこと - paiza times
こんにちは、フジワラ(@Fujiyama_Yuta)です！ 普段はフリーランスのエンジニアとして働いています。仕事の合間や、休日のプライベートの時間を使って個人で勤怠管理サービスの開発・運用も行なっています。2ヶ月前にリリースして、現在は保守・運用をしつつ、ちょっとずつ改良をしています。 私もそうでしたが、エンジニアだったら「自分で考えたサービスを作ってみたい！」って思うことありますよね。でも、何から手をつけたらいいのか、どうしたらいいのかわからない...って人もきっと多いはずです。 今回の記事では、私が実際にサービスの企画・開発・運用までやってみてわかった、個人開発するメリットや、個人開発において大事なこと、モチベーション維持についてなどの知見を共有したいと思います。 個人開発、やってみたい！興味ある！という人の参考になればと思います。 1. 作ったもの - OFFICECLOCK 作っ
Spring Boot with JPA&React&Bootstrap4でWebアプリケーションを作ってみた - 今日学んだこと
進捗どうですか？ 新年を迎えてからしばらく経ち、皆様当初の目標からの進捗はいかがでしょうか？ 僕は全くダメです。 やりたいこと、やらないといけないなと思ってることは沢山あるんですが、「何をしようかなぁ」と考えているうちに、気づけば寝ていたり、気づけばデレステをやってる毎日です。マキノかわいい。 世の中にはタスク管理の手法は色々ありますが、それらはすべて「タスクをこなす意思がある人向け」であり、僕みたいな意思の弱い人間が、あれとこれをやりたいとリストアップしたところで、そのリストを前にした時点でうんざりしてしまうのは必然です。 リストを前にすると尻込みしてしまう。であれば、目に見えるタスクを一つだけにしてしまえばいい。 導入が長くなりましたが、そんなモチベーションから「タスクを一つ選び出すツール」を作ったお話です。 どんなアプリケーションを作ったか こちらになります。 https://gac
グリッドシステム | 基本 | Bootstrap3の使い方
細かな設定を知りたい方は公式サイトへGO! 公式サイト（英語）の説明箇所 グリッドシステムの基本 レイアウト方法 グリッドシステムを利用してレイアウトしていくためのルール .container（固定枠）または.container-fluid（流動枠で外枠を設定） .rowで行を設定 .col-[prefix]-[数字]でカラムを設定 [prefix]でブレイクポイントの接頭辞（xsやmdなど）を指定。 [数字]でカラムの幅を設定。基本prefixごとに合計で12になるように指定します。12以上になるといわゆるカラム落ちで表示されます。 分かりづらい部分もあるかもしれませんが、例えばタブレットサイズ以上で8:4の2カラムを設定したい場合は下記のようなソースになります。 <div class="container"> <div class="row"> <div class="col-sm-8
Twitter Bootstrapのcontainer、row、col(span)の正しい使い方 -- ぺけみさお
Twitter Bootstrap 3.0.0のcontainer、row、col(Bootstrap 2.xならspan)クラスの使い方を説明する。公式サイトでも例示されているが、体系だった説明がされていないのでBootstrap初心者の役に立つはずだ。 1. containerは中身をセンタリングし幅を固定するcontainerクラスは中身を画面の中央に幅を固定するクラスだということを理解しよう。containerクラスはBootstrapのレイアウトを使う上でルートとなるクラスである。 2.で述べるcontainerクラスより幅の広いレイアウトをする場合を除いて、Webページのほとんどの内容をcontainerクラスの内部に書くことになるだろう。 containerクラスはWebページの中に複数個作っても全く構わない。また3.で詳しく述べるが、グリッドシステムを使わなくて良いのなら、
最近増えてきたFlexboxベースのCSSフレームワークをご紹介 | MONOCHROME DESIGN｜東京杉並のフリーランスWEBデザイナー。WordPressホームページ/ウェブサイト制作
最近レイアウトにFlexboxをベースにしたモダンなCSSフレームワークが出始めてきています。ここではFlexboxを採用したCSSフレームワークをご紹介します。 Flexboxとは まずFlexboxとはなんなのか、正式名称は「CSS Flexible Box Layout Module」と言うもので、ざっくり言うと「今までより簡単にレイアウトが組めますよ！」って事です。 ざっくりしすぎなので補足すると、今までレイアウトを組むときは、テーブルを使ったり、CSSのfloatを使ったりして組んでいましたが、横並びにするとレイアウトが崩れる、縦の高さを揃えるのが難しい、上下中央揃えをしようとすると面倒・・・と手間がかかりました。javascriptを使わないと出来ない場合もありWEBのレイアウトは結構不自由だったのですが、Flexboxによってそれが改善されます。 Flexbox自体の使い方は
CSSフレームワークを利用する意味 - Qiita
■ 事前定義の集合としてのCSSフレームワーク JSのフレームワークに負けず劣らず、CSSフレームワークも注目を集め、Bootstrapにとどまらず、Foundation、Pure、Materializeなどいろいろなものが国内外を問わず紹介されている。 プログラマの私としては、「フレームワーク」という言葉に違和感を覚える。というのも、プログラムで言うフレームワークとは、何らかの一連の「処理」を簡単にできたり、解りやすくコーディングするようにしたものを指すと思う。 一方、CSS自体は、見た目に関する定義であり、それ自体、ロジックを伴う定義があまり無いように思っていた・・・が。 そもそも、フレームワークという言葉も「コーダー」のワークを指すのか、「プログラム自体」のワークを指すのかにもよるので、CSSフレームワークはどちらかというと、「コーダー」のワークを簡略化するという点で「フレームワーク
管理画面を作る：AdminLTE 基本編 - Qiita
管理画面を作るのは大変なので、なるべく手間を省きたい。Bootstrapでもいいが、意外としょぼくなるのと、何よりメニュ周りの制御が今ひとつな感じがする。そこで、管理画面作成に特化したCSSフレームワークを使ってみる。 いくつか選択肢はあるが、ここではAdminLTEを利用してみる。 bootstrapベースとはなっているが、いろいろと独自の癖があり、「bootstrapだと動くのに・・・」みたいなことがままある。 最初に注意 まじめに、TOPメニューから作って見たが、Dropdown等、基本的な機能がうまく動作しないことがあった。どうやら、他の要素に依存しているので、header(class="main-header")だけでなく、サイドバー(class="main-sidebar")や、コンテンツ(class="content-wrapper")、フッター(class="main-fo
爆速で開発を終わらせる！Bootstrapチートシートがチートすぎる | プログラミング教育ナビ
Bootstrapとは、Twitter社が開発したCSSのフレームワークです。通常は自分でスタイルを実装していく必要がありますが、Bootstrapを利用すれば、ボタンやフォームなど既に用意されているスタイルを適用するだけで、誰でも素早く整ったデザインのページを作ることが可能になります。 今回は、さらに簡単かつ素早くスタイルを開発できるブートストラップのチートシートをご紹介します。 プレビューを見ながらコードを確認できるチートシート 既存のBootstrapのチートシートというのは、Bootstrap 3 cheat sheetのように、グリッドなどに使われているスタイルをPDFにまとめたものでした。一方で、今回ご紹介するBootstrap 4 Cheat Sheetは、要素をクリックするとコード・スニペットとプレビューを表示してくれる便利なチートシートです。 「Code snippet」
Bootstrap with Spring MVC - タツノオトシゴのブログ
今さらながら、GW中にBootstrapにやっと触れた。世の中の潮流に少し乗れたかな？ 自分の知識では、「jQuery Mobile」で知識が止まっており、さあ、作業に取り掛かろうとしたけど、jQuery Mobileは使いつらすぎた。 せっかく本も買ったけど、意味なかった。 結局、CSS Frameworkとして「Bootstrap」「HTML Kick start」を候補に挙げて、今回は人気のあるBootstrapを採用してみました。 使用したBoostrapのバージョンは「3.1.1」です。 Bootstrapを使ってみた感想 機能が多く、jQuery UIの機能もほぼあるため、Bootstrap単体でことが足りて便利だと思います。 ただし、バージョンごとに記述方法が異なっており、ネットに転がっている情報をそのまま鵜呑みにすると、デザインくずれが発生します。 その点、「HTML Ki
Bootstrap使い方メモ２（Components） - Qiita
│ sample..html │ ├─css │ bootstrap.min.css │ └─fonts glyphicons-halflings-regular.eot glyphicons-halflings-regular.svg glyphicons-halflings-regular.ttf glyphicons-halflings-regular.woff <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/bootstrap.min.css" /> </head> <body> <span class="glyphicon glyphicon-search"></sp
Bootstrap Dropdown with Hover
2024 Developer survey is here and we would like to hear from you!
logbackで日次ログローテーションする - clash_m45の開発ブログ
logbackで日次ローテーションをする時のサンプル。 <configuration> <appender name="FILE" class="ch.qos.logback.core.rolling.RollingFileAppender"> <file>logFile.log</file> <rollingPolicy class="ch.qos.logback.core.rolling.TimeBasedRollingPolicy"> <!-- daily rollover --> <fileNamePattern>logFile.%d{yyyy-MM-dd}.log</fileNamePattern> <!-- keep 30 days worth of history --> <maxHistory>30</maxHistory> </rollingPolicy> <encode
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Bootstrapメモ① - Qiita
【HTML・CSS】列の間にだけボーダーをつける - コンパイラかく語りき
https://www.cloudot.co.jp/wp-content/uploads/2022/08/blog.jpg
Free Bootstrap Admin Template - AdminLTE.IO
Spring Boot logback.xmlを環境毎にを変える - Bloq4Developer
