stylelint導入
stylelint導入してみました。これは便利ですね。コードがキレイに書けるようになります。複数人で作業してもstylelintが勝手にプロパティー順に並べてくれるし、エラー出してここ直してねって教えてくれます。 sty […]
投稿
ブレイクポイント別に非表示にさせるクラス
今まで下記のような記述で、PC・SPサイズで表示・非表示をしていましたが、命名が曖昧でわかりにくいと指摘され、確かに「dispaly」ってinlineもあるし、flexもあるしクラス名だけでパッと見て判断は厳しいと感じま […]
初めてのVue.js
とりあえず、なにもわからないので、1ページずつ進んで写経。Chapter9でマークダウンエディタを作ってみました。簡単にパッとできました。 See the Pen VweKrMw by syunichi hashimot […]
CSSの命名規則
次の案件で、この命名規則を試してみようかと思ってます。 PRECSS https://precss.io/ja/ この本には、PRECSSとはどういうものなのか、BEMと比較しながら解説しています。 また、レイアウトやモ […]
Sassの@importルール廃止！？
2020年6月15日追記 詳しく解説してくれている記事がありました。gulpを使っている人は、gulp-dart-sassがいいかもです。 Webクリエイターボックスさん https://www.webcreatorbo […]
WordPressでサイト作ってみました。
10数年HTMLコーディングしかしてこなかった男が、WordPressに手を出してみました。 参考書は、「WordPress 仕事の現場でサッと使える! デザイン教科書[WordPress 5.x対応版]」 WordPr […]
1行分しか想定されていない見出しのデザインだと文字がはみ出してしまってあら大変。ものすごく長い日本語のタイトルが付いた記事の表示テストです。複数行になっても問題ないデザインだといいですね。あと前後の記事へのリンクを出力している場合や、パンくずリストを実装している場合なども表示にズレがないか確認しておきましょう。
記事タイトル部分の見出しデザインが崩れていないか、文字が背景からはみ出していたりしないか確認しましょう。 the_post_navigation() などで前後の記事のタイトルを出力する場合も、レイアウト崩れが発生してい […]
マークアップ: HTML タグとフォーマット
見出し 見出し壱 見出し弐 見出し参 見出し四 見出し五 見出し六 引用 (Blockquote) テスト 一行の引用。 ハングリーであれ、愚かであれ。 cite 参照を含む複数行の引用。 これは言語みたいなものだ。アル […]
マークアップ: 画像の配置
画像の配置テストへようこそ ! 画像をいろいろな位置に配置してみるのに一番良い方法は、言葉の海の中に画像をそっとうずめてみることです。さあ、はじめましょう。 画像の配置では、ユーザーが「指定なし」「右寄せ」「左寄せ」「中 […]
マークアップ: テキスト配置
デフォルト これは段落です。特別なテキスト配置処理が付いていない状態になっている必要があります。通常のテキストフローと同じように表示されるべきです。なにも特別なことはありません。ただ、愛とともに自由に流れるテキストだけ。 […]