タグ q-Az
人気順 10 users 50 users 100 users 500 users 1000 users文字下げを考慮したリストマークはflexと疑似要素で作るのが良いと思う | q-Az
CSS の li 要素にあるリストマークプロパティは現状使いにくいのですが、リストマーク的なものを疑似要素とflexを使って作る方法です。 text-indent を駆使して昔はやってましたが使わずとも文字下げ可能です。 flexと疑似要素を用いたリストマークのサンプル まずはサンプルです サンプル1 テスト文章 テスト文章 テスト文章 テスト文章 HTML <ul class="markList... 続きを読む
文字列中のカラーコードに自動で色見本を付けるJavaScript | q-Az
エディタなどでよく見る、 #66cdaa や rgb(240, 128, 128) みたいな感じで カラーコードがテキスト中にあると自動で色見本を付けてくれる JavaScript を作ってみます。 正規表現を駆使して書くことになるので、完璧とまではいっていませんがそれなりに判別できるコードになったと思います。 function colorSampleTag(tag) { var elm = do... 続きを読む
PHPの関数でHTMLを出力する方法 | q-Az
特に難しい技術ではないのですが、こんな事も出来たんだと言う事をついこの前知ったので記事に書いてみます。 恐らく PHP の関数で HTML を出力したいときは普通、以下のような感じで書くと思います。 <?php function make_html() { echo '<div>書き込みたい要素</div>'; } //関数の実行 make_html(); ?> この記事ではこれとは違った方法で出... 続きを読む
たったの3行でエイプリルフール感を出すCSS | q-Az
せっかくのエイプリルフールなのでエイプリルフールっぽい感じの記事を。 ご使用は自己責任でお願いします。 左右反転のCSS 過去に Yahoo! あたりもエイプリルフールネタでこんなことをしていた気がしますが、CSS でやればたったの3行で済んでしまいます。 body { transform: scaleX(-1); } transform の scaleX は X 軸の縮尺を決めるもので通常は1、... 続きを読む
CSSのposition:stickyがすごく便利 | q-Az
最近新しく追加された position の新しい値 sticky が場合によってはすごく便利なので記事を書いてみます。 対応ブラウザがまだあまり多くないので実用性は乏しいかもしれませんが、今まで JavaScript の力を借りなきゃ出来なかったことがたったの2行の CSS で出来てしまう魔法みたいな position の値です。 position: sticky MDN が説明が詳しいので貼って... 続きを読む
jQueryを使わずに滑らかに動くトップに戻るボタン | q-Az
よく色々なサイトで実装されているトップに戻るボタンをピュアな JavaScript のみで実装してみます。 jQuery を使えば数行で実装できますが、リニアな動きであればネイティブな JavaScript でもそんなに大変ではありません。 アニメーションの原理 JavaScript でアニメーションをさせます。少し古い記事になりますが以下の記事が大変参考になります。 参考: これでできる! クロ... 続きを読む
なるべくCSSだけでアナログ時計を作る | q-Az
CSS だけでアナログ時計を作ってみます。ただ CSS だけではどうしてもできないことがあるので、その部分は JavaScript にやってもらい、なるべく CSS だけでアナログ時計を作ります。 まCSS だけでアナログ時計を作ってみます。ただ CSS だけではどうしてもできないことがあるので、その部分は JavaScript にやってもらい、なるべく CSS だけでアナログ時計を作ります。 ま... 続きを読む
CSS4 :matches の使い方とブラウザ対応状況 | q-Az
まだCSS3もIEがやっと対応したのに話が早いですが、CSS4の草案自体はだいぶ前に発表されていて部分的には各ブラウザ対応が進んでいます。 まだまだ草案の状態なのでこれから変化、消滅等起こると思うのでまだCSS3もIEがやっと対応したのに話が早いですが、CSS4の草案自体はだいぶ前に発表されていて部分的には各ブラウザ対応が進んでいます。 まだまだ草案の状態なのでこれから変化、消滅等起こると思うので... 続きを読む