【Bootstrap4】ナビゲーションメニューを2列で表示する

前回作成したナビゲーションのメニューを、スマートフォン(以下SP)で表示したときに2列で表示してみます。 メディアクエリ メディアクエリとはCSSの記述式で、スクリーンのサイズによってあてるスタイルを変更する方法です。これを使いSP表示したときのナビゲーションを2列表示に切り替えます。 @media only screen and (max-width: 766px) { /* ここにSP用のスタイルを書く */ } ※この場合は画面の横幅が766px以下の時に適用される。 2列表示にする ナビゲーションバーの各メニューに display: inline-block; を適用します。inline-blockは各要素を横に並べ、さらに縦横のサイズを指定できます。 nav-itemの横幅を50%未満にしておけば、2つおきに改行されます。 .navbar-nav{ display: inline-block; width: 100%; margin-bottom: 20px; } .navbar .nav-item { margin: 0; display: inline-block; width: 49%; } 装飾 このままだと味気ないので少し装飾してみます。メニューの下段と中央にラインを引いて、見やすくしています。left-item は左に来る要素の…

続きを読む

【Bootstrap4】ナビゲーションバーを作る

Bootstrap4でナビゲーションバーを実装し、いろいろカスタマイズしていきます。 事前準備 まずはライブラリをダウンロードして、サイトに設置する。もしくはBootstrapCDNを参照してもよい。 https://getbootstrap.jp/docs/4.1/getting-started/download/ head <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> viewportの指定、設置したライブラリ(bootstrap.min.css、bootstrap.min.js)を読み込む。jQueryも必要なので一緒に読み込む。なお jQuery は bootstrap.min.js の前に読み込まないと エラー …

続きを読む

【PHP】PHPUnitを使う(初期セットアップとかんたんな使い方)

導入から簡単なテストコードの実行までの手順のまとめ 前提条件 composerを使ってインストールするので、composerが必要 セットアップ $ composer global require "phpunit/phpunit:*" $ ~/.composer/vendor/bin/phpunit --version PHPUnit 7.5.17 by Sebastian Bergmann and contributors. インストールされるディレクトリ cd ~/.composer/vendor/phpunit/phpunit テストコードの書き方 ここでは名前を保持するUserクラスのテストコードを書いてみる User.php (テスト対象のモジュール) <?php class User { public $name; public function getName() { return (string)$this->name; } } UserTest.php (テストコード例) TestCaseクラスを継承する(場所は以下) ~/.composer/vendor/phpunit/phpunit/src/Framework/TestCase.php testXXXXというメソッドを用意して、その中…

続きを読む

【PHP】PHP_CodeSnifferを使う(コーディングルールのカスタマイズ)

社内独自のコーディン規約などにあわせてカスタマイズする方法 インストールされるディレクトリ 以下のディレクトリにインストールされている ~/.composer/vendor/squizlabs/php_codesniffer/ -rw-r--r-- 1 638 10 28 13:36 CONTRIBUTING.md -rw-r--r-- 1 187 11 26 12:08 CodeSniffer.conf.dist -rw-r--r-- 1 6399 10 28 13:36 README.md -rw-r--r-- 1 10085 10 28 13:36 autoload.php drwxr-xr-x 6 192 10 28 13:36 bin -rw-r--r-- 1 1083 10 28 13:36 composer.json -rw-r--r-- 1 1533 10 28 13:36 licence.txt -rw-r--r-- 1 6280 10 28 13:36 phpcs.xml.dist -rw-r--r-- 1 7054 10 28 13:36 phpcs.xsd -rw-r--r-- 1 340 10 28 13:36 phpstan.neon drwxr-xr-x 5 160 10 28 13:36 scripts drwxr-xr-x 16 512 10 …

続きを読む

【PHP】PHP_CodeSnifferを使う(初期セットアップとかんたんな使い方)

PHP_CodeSnifferとは決められたルールに沿ってPHPコードが書かれているかチェックしてくれる。また、ルールに沿った形に整形してくれるPHP_CodeFixerもある。 前提条件 composerを使ってインストールするので、composerが必要 セットアップ $ composer global require "squizlabs/php_codesniffer=*" ~/.composer 配下に以下がインストールされる $ ~/.composer/vendor/bin/phpcs --version PHP_CodeSniffer version 3.5.2 (stable) by Squiz (http://www.squiz.net) $ ~/.composer/vendor/bin/phpcbf --version PHP_CodeSniffer version 3.5.2 (stable) by Squiz (http://www.squiz.net) phpcs --- ソースコードがコーディング規約を守っているかを判定する。 phpcbf --- ソースコードをコーディング規約に合わせて整形する。 対象ファイルを直接編集する。 ルールによっては修正できないものもある。 phpcs (PHP_CodeSniffer) ソースコード例 : test.php 以下…

続きを読む

スポンサーリンク