はてなブックマーク

BEM命名規則を前提としています。 ルール 略さない（imgは略してOK） 長い単語で一般的な略し方で浸透してる場合は略してOKとします。 description...desc introduction ...intro information...info Frequently Asked Questions...faq 一般的な単語を使うこと 新しい言葉は作らないでください blockとElementに同じ命名をしない。 .button__buttonや.input__inputはNG 同じコンポーネント内で似てる単語は使わない。 containerとcontent、dateとdataなど。 単語をつなぐときは-を使う 〇〇-✕✕のように-でつなぐことで「〇〇の✕✕」を表す。 search-barで「検索のバー」、tag-groupで「タグの集まり」というように HTMLタグの名前をク

この記事はおひさしぶりのWordPressまとめ - Qiitaでまとめたつまずいた点のパーマリンク関連の解決方法。 #前提 ページャーには WP-PageNavi を使用。ページャーがおかしくならない実装を。 デフォルトの投稿だけでなく、カスタム投稿にも反映させる。 カスタム投稿・タクソノミーの実装は Custom Post Type UI を使用。アーカイブありにすることを忘れない。 カスタム投稿のパーマリンクも設定でいるようにCustom Post Type Permalinksを入れる ##テンプレートファイル構造 投稿一覧・カテゴリー別投稿一覧 archives.php カスタム投稿一覧 archives-{カスタム投稿名}.php カスタムタクソノミー別カスタム投稿一覧 taxonomy-{カスタムタクソノミー名}.php ##ワシが目指すパーマリンク構造 投稿一覧 https

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

ハンバーガーアイコンの☓になる動き、横からメニューが出てくる動き、メニューが出てるときはメインエリアを暗くすることまで、すべてCSSのみで実装可能。 See the Pen drawer menu by himeka223 (@himeka223) on CodePen. 解説 CSSのみで作るドロワーメニューの動きは、inputタグのcheckboxで制御している。 チェックがされた場合…　メニュー横から出現、アイコンを☓に、メインエリアを暗く。 チェックがはずれた場合… すべてもとに戻る。 checkbox と label の連動 checkbox を label と連動させ、 labelのクリックで、checkboxにチェックが入るように。 <!-- checkbox自体は非表示 --> <input class="l-drawer__checkbox" id="drawerChec

FLOCSSとは 「Foundation Layout Object CSS」 OOCSSやBEM、SMACSSのいいとこ取りをしたCSS設計思想。 構造 dartsassに移行しましたので構造を修正しました。 scss/ ├─ foundation/ │　├─ _base.scss │　├─ ... │　├─ index.scss ├─ global/ │　├─ mixin/ │　│　├─ _hover.scss │　│　├─ ... │　│　├─ index.scss │　├─ variable/ │　│　├─ _color.scss │　│　├─ ... │　│　├─ index.scss │　├─ index.scss ├─ layout/ │　├─ _header.scss │　├─ ... │　├─ index.scss ├─ object/ │　├─ component/ │