【Bootstrap4】画面サイズによってスタイルを変更する

Bootstrapにより画面レイアウトが変わったら、適用するCSSも変更したい場面があるので、その方法です。 CSS @media only screen and (max-width: 991px) { /* 幅991px以下 */ body{ background: #0FF; } } @media only screen and (max-width: 766px) { /* 幅766px以下 */ body{ background: #F0F; } } @media only screen and (max-width: 575px) { /* 幅575px以下 */ body{ background: #FF0; } } media only screen … はメディアクエリと言ってCSS3で追加になった記述方法で、デバイスにあった書き分けを行うことができる。 ここでは max-width を指定して、それぞれの画面幅で専用のCSSをオーバーライドしている。 画面幅が1024pxのとき 画面幅が870pxのとき 画面幅が625pxのとき 画面幅が470pxのとき

続きを読む

【Bootstrap4】初期設定と簡単な例

ライブラリの配置 以下のサイトのDownloadhttps://getbootstrap.com/ ダウンロードページの「Compiled CSS and JS」をダウンロードする zipファイルを解凍したらjs、cssのディレクトリをプロジェクトのpublicディレクトリの任意の場所へ配置 (今回はpublic/bootstrap/ 以下に配置) ヘッダー <!-- Viewportの指定 --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrapのcss, js読み込み --> <link href="/bootstrap/css/style.css" rel="stylesheet" type="text/css"></link> <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"></link> <script src="/bootstrap/js/bootstrap.min.js"></script&…

続きを読む

highlightjsを使ってソースコードを装飾する

公式サイト https://highlightjs.org/ ヘッダー <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/default.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js"></script> <script>hljs.initHighlightingOnLoad();</script> 記事に埋める内容 <pre> <code class="php hljs"> /** * 店舗コントローラ * @access public */ class Controller_Shop extends Controller { /** * 店舗一覧アクション * @access public */ public function action_index() { $data…

続きを読む

【技術書】ソフトウェアアーキテクトが知るべき97のこと(1)

ソフトウェアアーキテクトとは、プロジェクトにおける最高技術責任者(いわば技術リーダー)です。私も何度か経験させてもらっていますので、本書を読み進めることにしました。 本書の特徴としては、世界中で活躍する著名なソフトウェアアーキテクトにより構成された97のエッセイのようなもので、一つ一つは短編なのでサクサク読んでいけます。このブログでは特に共感した節について、所感等をまとめておこうと思います。 システムの要件よりも履歴書の見栄えを優先させてはならない ニティン・ボーワンカー システムの技術仕様を決定する際、履歴書の経歴を見栄えよくさせたいがために最新技術や流行りのフレームワークという理由で決定してはならないということ。大事なのは、自身の短期的なニーズより顧客の長期的なニーズを優先させたほうが色々とメリットがあります。 自分はどちらかと言うと保守的なエンジニアなのでそこまで最新技術にそこまでこだわりはありません。「あたえられた環境でベストを尽くす」を常に意識しています。ですが、古臭いアーキテクトは改善・提案をしていきたいです。それがWin-Winであればなおですね...。 本質的な複雑さは単純に、付随的な複雑さは取り除け ニール・フォード 本質的な複雑さとは言わば複雑な仕様、付随的な複雑さとはそれを和らげようとして作った複雑なしくみのことを言います。 これは複雑な仕様は細分化して一つ一つを単純な仕組みに落とし込んだ上で一つのシステム…

続きを読む

スポンサーリンク