Yearly Archives: 2019

New!

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 は思い出せても、正規表現を使った指定はなかなか思い出せません。… 続きを読む
Update!

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

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

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で共有していただければ幸いです。

WordPress: ユーザー権限と判定一覧

今回は WordPress のユーザー権限と可能な、functions.php での判定の記述に関するメモです。 目次 ユーザー権限一覧 まとめ ユーザー権限一覧 上位権限は下位権限の実行レベルをすべて含みます。 権限グループ role ユーザーレベル 実行可能 購読者 Subscriber 0 ログイン        寄稿者 Contributor 1 レビュー待ち投稿        投稿者 Author 2 投稿 編集者 Editor 3-7 投稿 固定ページ カテゴリー 管理者 Administrator 8-10 テーマ プラグイン ユーザー サイト設定 functions.php 権限の判定サンプル まとめ ユーザーレベル判定は現在非推奨となっているため、できるだけ権限グループ名を利用した方がよいと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Tips: A・B規格サイズ表(デザイナーズメモ)

以前投稿した 封筒・ハガキ・名刺のサイズ に続き、今回はA・B規格に関するデザイナーズメモとなります。 目次 A・B規格サイズ表 まとめ A・B規格サイズ表 A規格 名称 サイズ(mm) A0 841×1189 A1 594×841 A2 420×594 A3 297×420 A4 210×297 A5 148×210 A6 105×148 A7 74×105 A8 52×74 A9 37×52 A10 26×37 B規格 名称 サイズ(mm) B0 1030×1456 B1 728×1030 B2 515×728 B3 364×515 B4 257×364 B5 182×257 B6 128×182 B7 91×128 B8 64×91 B9 45×64 B10 32×45 まとめ A・B規格ともに比率は 1:√2 となっており、この比率を元に、A・B共に基準となる1つのサイズさえ覚えておけば、全てのサイズが算出できる事になります。 とりあえず、実用的な A4、B5 のサイズだけでも暗記しておけば、便利かもしれませんね。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。