文字下げを考慮したリストマークはflexと疑似要素で作るのが良いと思う | q-Az

2017/10/29 30 users Flex text-indent CSS ul class

CSS の li 要素にあるリストマークプロパティは現状使いにくいのですが、リストマーク的なものを疑似要素とflexを使って作る方法です。 text-indent を駆使して昔はやってましたが使わずとも文字下げ可能です。 flexと疑似要素を用いたリストマークのサンプル まずはサンプルです サンプル1 テスト文章 テスト文章 テスト文章 テスト文章 HTML <ul class="markList... 続きを読む

文字列中のカラーコードに自動で色見本を付けるJavaScript | q-Az

2017/06/25 20 users RGB tag 色見本 エディタ カラーコード

エディタなどでよく見る、 #66cdaa や rgb(240, 128, 128) みたいな感じで カラーコードがテキスト中にあると自動で色見本を付けてくれる JavaScript を作ってみます。 正規表現を駆使して書くことになるので、完璧とまではいっていませんがそれなりに判別できるコードになったと思います。 function colorSampleTag(tag) { var elm = do... 続きを読む

PHPの関数でHTMLを出力する方法 | q-Az

2017/06/18 22 users Echo div 関数 PHP HTML

特に難しい技術ではないのですが、こんな事も出来たんだと言う事をついこの前知ったので記事に書いてみます。 恐らく PHP の関数で HTML を出力したいときは普通、以下のような感じで書くと思います。 <?php function make_html() { echo '<div>書き込みたい要素</div>'; } //関数の実行 make_html(); ?> この記事ではこれとは違った方法で出... 続きを読む

たったの3行でエイプリルフール感を出すCSS | q-Az

2017/04/01 10 users transform CSS エイプリルフールネタ 縮尺 あたり

せっかくのエイプリルフールなのでエイプリルフールっぽい感じの記事を。 ご使用は自己責任でお願いします。 左右反転のCSS 過去に Yahoo! あたりもエイプリルフールネタでこんなことをしていた気がしますが、CSS でやればたったの3行で済んでしまいます。 body { transform: scaleX(-1); } transform の scaleX は X 軸の縮尺を決めるもので通常は1、... 続きを読む

CSSのposition:stickyがすごく便利 | q-Az

2017/03/05 594 users sticky position CSS 魔法 便利

最近新しく追加された position の新しい値 sticky が場合によってはすごく便利なので記事を書いてみます。 対応ブラウザがまだあまり多くないので実用性は乏しいかもしれませんが、今まで JavaScript の力を借りなきゃ出来なかったことがたったの2行の CSS で出来てしまう魔法みたいな position の値です。 position: sticky MDN が説明が詳しいので貼って... 続きを読む

jQueryを使わずに滑らかに動くトップに戻るボタン | q-Az

2017/01/20 19 users jQuery リニア ネイティブ 原理 アニメーション

よく色々なサイトで実装されているトップに戻るボタンをピュアな JavaScript のみで実装してみます。 jQuery を使えば数行で実装できますが、リニアな動きであればネイティブな JavaScript でもそんなに大変ではありません。 アニメーションの原理 JavaScript でアニメーションをさせます。少し古い記事になりますが以下の記事が大変参考になります。 参考： これでできる！ クロ... 続きを読む

なるべくCSSだけでアナログ時計を作る | q-Az

2016/12/19 15 users JavaScript CSS 部分 アナログ時計

CSS だけでアナログ時計を作ってみます。ただ CSS だけではどうしてもできないことがあるので、その部分は JavaScript にやってもらい、なるべく CSS だけでアナログ時計を作ります。 まCSS だけでアナログ時計を作ってみます。ただ CSS だけではどうしてもできないことがあるので、その部分は JavaScript にやってもらい、なるべく CSS だけでアナログ時計を作ります。 ま... 続きを読む

CSS4 :matches の使い方とブラウザ対応状況 | q-Az

2015/11/23 19 users matches CSS4 ブラウザ対応状況 使い方

まだCSS3もIEがやっと対応したのに話が早いですが、CSS４の草案自体はだいぶ前に発表されていて部分的には各ブラウザ対応が進んでいます。 まだまだ草案の状態なのでこれから変化、消滅等起こると思うのでまだCSS3もIEがやっと対応したのに話が早いですが、CSS４の草案自体はだいぶ前に発表されていて部分的には各ブラウザ対応が進んでいます。 まだまだ草案の状態なのでこれから変化、消滅等起こると思うので... 続きを読む