Category Note

Update!

SCSS: Bootstrap4 ボタンスタイルのテンプレート

Bootstrap でよく利用するオブジェクトの一つがボタンだと思います。 Bootstrap ボタンには通常時と hover 時の色が細かく指定されていますが、今回は hover 時の色変更を opacity での透明度で表現し、色変えを行いやすいサンプルコードをメモしておきます。 目次 Bootstrap4 ボタンスタイルのテンプレート まとめ Bootstrap4 ボタンスタイルのテンプレート 各色を変数化し、また、a タグで href がない場合でも、ボタンとして表示されるようにコードを変更しています。(※各ボタンのカラーは Bootstrap のデフォルトカラーを記述しています) bs-button.scss variables.scss まとめ Bootstrap のボタンの色を変更するだけでも Web 全体の雰囲気が変わってきます。 最初に色を決めてしまえば後々悩む心配はなくなるので、多少イニシャルコストをかけても色スタイルは工夫するよう心がけましょう。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。
Update!

CSS3: サイドメニューをボトムメニューに切り替えるサンプル

PC サイトのサイドメニューをモバイルで表示すると、画面が横長から縦長になるため、サイドメニューの領域によりメインコンテンツのエリアが狭くなってしまいます。 画面上部のグローバルメニューは、ハンバーガーメニューへ変更するパターンが多いですが、サイドメニューの場合はどうするか悩みどころだと思います。 今回は、サイドメニューをモバイルではボトムメニューへメディアクエリで切り替えるサンプルをメモしておきたいと思います。 目次 サイドメニューをボトムメニューに切り替えるサンプル まとめ サイドメニューをボトムメニューに切り替えるサンプル display: flex を使用し、メディアクエリで 768px 以下の場合はボトムメニューへ変更するサンプルとなります。 HTML CSS まとめ ボトムナビゲーションにする場合、メニュー項目はユーザビリティを確保するため、最大6項目が限界かと思います。 アップデート時にメニュー項目が増える場合は、プライオリティの低い項目をまとめるための項目を新設し、ネストすることで解決しましょう。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。
Update!

CSS3: 使用頻度の高い擬似クラス一覧

個人的によく使う CSS3 擬似クラスの一覧を作成しました。 スタイルコーディング時にご参考にしてください。 目次 使用頻度の高い擬似クラス一覧 まとめ 使用頻度の高い擬似クラス一覧 記述例 説明 div[class] “class” 属性を持つ div 要素 div[class=”xxx”] “class” 属性の値が “xxx” である div 要素 div[class~=”xxx”] “class” 属性が空白区切りの値をとり、その値の1つが “xxx” である div 要素 div[class^=”xxx”] “class” 属性の値が “xxx” から始まる div 要素 div[class$=”xxx”] “class” 属性の値が “xxx” で終わる div 要素 div[class*=”xxx”] “class” 属性の値に “xxx” という文字列を含む div 要素 div[class|=”en”] “class” 属性の値がハイフン区切りの値をとり、その値が “en” から始まる div 要素 div:nth-child(n) n 番目の子である div 要素 div:nth-last-child(n) 後ろから数えて n 番目の子である div 要素 div:nth-of-type(n) 同じ型をもつ要素のうち n 番目にある div 要素 div:nth-last-of-type(n) 同じ型をもつ要素のうち後ろから数えて n 番目にある div 要素 div:first-child 最初の子である div 要素 div:last-child 最後の子である div 要素 div:first-of-type 同じ型をもつ要素のうち最初の div 要素 div:last-of-type 同じ型をもつ要素のうち最後の div 要素 div:only-child 唯一の子である div 要素 div:only-of-type 同じ型をもつ要素が他にない唯一の div 要素 div:empty テキストノードを含め子を持たない div 要素 a:linka:visited ハイパーリンクのアンカーである a 要素のうち、未訪問 (:link) であるもの、訪問済 (:visited) であるもの a:activea:hovera:focus 特定のユーザーアクション状態にある a 要素 div:target URI が参照したターゲットになる div 要素 div:lang(ja) 言語情報 “ja” を持つ div 要素 elm:enabledelm:disabled elm(UI 要素)のうち、有効 (:enabled) であるもの、無効 (:disabled) であるもの elm:checked elm(チェックボックスやラジオボタンなど)のうち、チェックされた (:checked) もの div::first-line div 要素の最初の整形済行 div::first-letter div 要素の先頭文字 div::before div 要素の内容の前にある generated content div::after div 要素の内容の後にある generated content div:not(sel) 単体セレクタ sel にマッチしない div 要素 div elm div 要素の子孫である elm 要素 div > elm div 要素の子である elm 要素 div + elm div 要素の直後に現れる elm 要素 div ~ elm div 要素のあとに現れる elm 要素 まとめ 長く CSS を触っていないと、解決方法は思いついても、肝心の記述方法を忘れていることが多々あります。 特に、擬似クラスは :before,:after や nth-child は思い出せても、正規表現を使った指定はなかなか思い出せません。… 続きを読む

CSS3: デフォルトのフォントスタイルを指定する

モダンブラウザであればフォントのことは特に気にしなくても、いい感じに出力されますが、レガシーブラウザの対応までを考慮すると、フォントの指定も重要となってきます。 今回は CSS でスタイルを定義する際、ベースとなるフォント指定をメモしておきます。 目次 デフォルトのフォントスタイルを指定する まとめ デフォルトのフォントスタイルを指定する body 自体にゴシック系のフォントをとりあえず指定し、.mincho と .gochic クラスを任意のテキストに指定すれば、明朝体とゴシック体を使い分けられると思います。 /*transform: rotate(.03deg);*/ のコメントを解除すると、古い PC の IE(9,10)で 文字の ディザを軽減する効果 があります。 ただし、position:fixed 等をしている場合は transform とコンフリクトを起こし、正しく表示されない(fixed が効かない)可能性があるので、注意が必要です。 まとめ 今回の指定の仕方が正解というわけではありませんが、日本語環境の場合、フォントの見え方でサイトの良し悪しが大きく左右されてしまうので、意識的にデフォルトフォントの指定をしておいて損はないと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

JavaScript: gulpfile.js の autoprefixer 設定を package.json へ変更する

突然上記のようなエラーが出たので、解決方法をメモしておきます。 目次 gulpfile.js の autoprefixer 設定を package.json へ変更する まとめ gulpfile.js の autoprefixer 設定を package.json へ変更する gulpfile.js にある以下のコードをコメントアウトし、package.json の最後尾へ記述します。 gulpfile.js package.json まとめ autoprefixer の設定を行なっている gulpfile.js があれば、上記の変更を行う必要があります。 sass コンパイルに gulp を利用している方にとって、autoprefixer は欠かせない存在だと思うので、しっかり対応しておいてください。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

WordPress: カスタム投稿のテンプレート

WordPress ではデフォルトで用意されている「投稿」以外に、オリジナルの投稿「カスタム投稿」を作成することができます。 今回は、WordPress でカスタム投稿を新規作成し、表示させるテンプレートをメモしておきます。 目次 カスタム投稿のテンプレート まとめ カスタム投稿のテンプレート 以下はカスタム投稿タイプ「お客様の声」追加する場合のサンプルコードとなります。 function.php template-[custompost-name].php まとめ WordPress にはカスタム投稿以外にも、カスタムタクソノミー(分類)を作成する機能があります。 次回は、カスタムタクソノミー作成のサンプルコードを説明したいと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

JavaScript: Gulp4 + EJS のインクルードファイルの相対パスを変数化する

EJS を使用し、header や footer 等の共通部分を外部から呼び出す場合、インクルード元のファイルの階層が違うと、相対パスのリンクが切れてしまいます。 今回は、あらゆる階層から呼び出されても階層にあわせて相対パスが変わるように、EJS ファイルに変数を割り当てる方法を説明したいと思います。 目次 Gulp4 + EJS のインクルードファイルの相対パスを変数化する まとめ Gulp4 + EJS のインクルードファイルの相対パスを変数化する 以下のような階層構造で、index.ejs と page.ejs がともに header.ejs をインクルードした場合のサンプルコードとなります。 ファイルツリー gulpfile.js site.json サイト全体で使用するデータです。主に head タグ内で利用するものを記述しています。 (例) で “Your Sitename” が出力 header.ejs index.ejs page.ejs まとめ EJS を導入する以上、目的は静的ファイルの大量生成となるはずなので、相対パスの変数化は必須です。 gulpfile.js さえコーディングしてしまえば次回以降使い回しがきくので、今回説明した作業はしっかりとおさえておきたいところです。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

CSS3: hover 要素のマウスイベントを無効にする

UI デザイン上、ボタン自体は表示させるが、押せないようにしたい、hover エフェクトやポインターは無反応にしたい、といったケースがあると思いますが、そういった場合は、JavaScript を書くまでもなく、CSS のみで解決します。 今回は CSS でマウスイベントを無効にする方法をメモしておきます。 目次 hover 要素のマウスイベントを無効にする まとめ hover 要素のマウスイベントを無効にする pointer-events というプロパティがありますので、これを none にします。(デフォルトは auto) まとめ 今回説明したケース以外でも、親要素に hover やクリックイベントが効いていて、内包される子要素のボタンがクリックできない問題も、親要素に pointer-events: none; を適用することで解決します。 pointer-events は、Opera Mini を除くすべてのブラウザでサポートされているので、実際に利用してもほぼ問題ないと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

JavaScript: Gulp で SCSS コンパイル後に FTP アップロードする

今回は非常にプロジェクトや、使いどころを選びますが、ウォッチしている SCSS に変更があった場合、コンパイルを行い、生成された CSS ファイルを FTP アップロードする方法をメモしておきます。 目次 Gulp で SCSS コンパイル後に FTP アップロードする まとめ Gulp で SCSS コンパイル後に FTP アップロードする 下記のパッケージをインストールし、gulpfile でタスクを設定します。 path.src に対象となる scss ファイルがあるフォルダを、path.dest に css ファイル出力先のフォルダを指定します。 ※下記 gulpfile では、CSS の minify は行ってますが、css ファイルのみアップロードするタスクとなっています。 npm install gulpfile.js まとめ 今回の説明は FTP アップロードという利用用途が限定されてしまう方法です。 利用例としては、WordPress のテーマファイルに SCSS を利用し、本番環境で確認しながら スタイル修正行い、頻繁に CSS アップロードを行うような場合、非常に有効な方法かと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

CSS3: 擬似要素 :before, :after で配置した画像サイズを変更する

開発が完了した Web アプリやサイトで HTML ではなく、CSS 修正のみでアイコン画像等を挿入したい場面があります。 その際、擬似要素 :before, :after でコーディングを行いますが、画像を直接挿入した場合サイズ変更ができません。 今回は上記ケースで画像サイズを変更する方法を説明したいと思います。 目次 擬似要素 :before, :after で配置した画像サイズを変更する まとめ 擬似要素 :before, :after で配置した画像サイズを変更する 以下のような HTML ソースのリスト要素 li の先頭に、アイコン画像を挿入したい場合、content ではなく backgroud 指定による画像配置を行うことで画像サイズの調整が可能になります。 HTML CSS まとめ Web フォントやアイコンが使えない環境や、後方互換による表示不具合が起こる場合、今回の擬似要素による backgroud のイメージ指定を行うことで、解決できます。 レガシーブラウザ対策によるデザイン問題が起こった場合、有効な手段かと思いますので、参考になさってください。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

siro:chro 無料ゲーム SQN をリリースしました

img_sqn_00

sirochro 初の無料ゲームアプリ SQN をリリースしました。
記事:SQN: iOS 無料ゲームアプリ SQN - Sequential Numbers をリリース
ちょっとした時間に楽しめる完全無料のゲームなっていますので、是非ダウンロードして遊んでみてください。

↓SQN のダウンロードはこちらから