字下げを考慮したリストマークはflexと疑似要素で作るのが良いと思う | q-Az
CSS の li 要素にあるリストマークプロパティは現状使いにくいので、リストマーク的なものを疑似要素とflexを使って作ってみます。 字下げは text-indent を駆使して昔はやってましたが使わずとも可能です。 flexと疑似要素を用いたリストマークのサンプルまずはサンプルです サンプル1テスト文章テスト文章テスト文章テスト文章HTML<ul class="markList"> <li class="markListItem">テスト文章</li> <li class="markListItem">テスト文章</li> <li class="markListItem">テスト文章</li> <li class="markListItem">テスト文章</li> </ul>CSS.markListItem { display: flex; align-items: baseline;
マウスhover時のCSS3 transitionとanimationの違い | q-Az
マウスが乗っかった事をトリガーに変更を加える擬似クラスが :hover という擬似クラスです。 それに少し挙動を加えたいと思った時に transition を使って、「もわーん」と一定の時間をかけて色を変えたり動かしたりすることが出来ます。IE が CSS3 にやっと対応してくれたおかげで最近色んな所で見るようになりました。IE9 以前なら JavaScript（大体 jQuery）を使ってやっていましたが、今は CSS だけで簡単に実装できます。 ただ「マウス hover の時は CSS transition を使います」と断言しちゃっているような事を書いているところも多いので「CSS animation でもいちょう出来るよ」というお話。 下の2つの箱にマウスを乗っけたり離したりしてみて違いを見てみます。 transition animation CSS/*左の箱 transition
CSSのposition:stickyがすごく便利 | q-Az
最近新しく追加された position の新しい値 sticky が場合によってはすごく便利なので記事を書いてみます。 対応ブラウザがまだあまり多くないので実用性は乏しいかもしれませんが、今まで JavaScript の力を借りなきゃ出来なかったことがたったの2行の CSS で出来てしまう魔法みたいな position の値です。 position: stickyMDN が説明が詳しいので貼っておきます。 参考：position - CSS｜MDN 簡単に言うと「スクロールでその位置まで来たらそれ以降は fixed する」みたいな感じです。 サンプルこの記事内で「position: sticky」や「サンプル」など h2 要素に position: sticky をかけています。対応ブラウザであれば h2 要素が fixed しているはずです。 HTML<h2 class="h2-stic
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
webでもCSSだけで1行の均等割付、両端揃え | q-Az