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;

最近アクセスが減って寂しいハナさんです。 アクセスが減った原因は、人気だった記事が古くなって読まれなくなったとか、記事の更新が減ったとか、ハナさんに原因があるのではないかと思ってはいるのですが、自分以外に原因があるんじゃないかと疑いたくなるのが人の性(サガ)というものでして… あっ、人の性なんて主語が大きくなりましたね、ハナさんの性でした… それで、タイトルにした、https化しないはてなのせいとか独自ドメインでSSL認証を取る話。 以前、ハナさんが、 www.hana3.net という記事を書いた時、 あと、未だにhttps化しないはてなが悪い説も。Googleはhttpsじゃないサイトはランク下げるって言ってるし。ウチも減ってます。— ꧁🐶꧂ (@shigeo_t) 2017年6月22日 とshigeo-tさんからブコメをいただきました… そうか！はてなが悪いんだ！？ 目次 SSL/

JavaScript を使ってランダムに要素を動かしてみます。 完全なるランダムであるため、クネクネと言うよりはガタガタ動く感じのランダム移動になりました。 ランダム移動サンプル 赤い玉がガタガタ移動しています。 ランダム移動コード CSS .randomWrap { background-color: #ccc; position:relative; height: 300px; margin: 24px 0; overflow: hidden; } #randomMove { position: absolute; transition: .1s; transform: translate(-50%, -50%); /*見た目*/ width : 5px; height: 5px; border-radius: 50%; background-color: red; } transla

特に難しい技術ではないのですが、こんな事も出来たんだと言う事をついこの前知ったので記事に書いてみます。 恐らく PHP の関数で HTML を出力したいときは普通、以下のような感じで書くと思います。 <?php function make_html() { echo '<div>書き込みたい要素</div>'; } //関数の実行 make_html(); ?>この記事ではこれとは違った方法で出力してみます。 PHP で HTML を出力以下のコードでも、上記のコードと同じ結果を得ることが出来ます。 <?php function make_html() { ?> <div>書き込みたい要素</div> <?php } //関数の実行 make_html(); ?>中括弧、ブラケットの始まりと終わりで PHP のエリアを一度切って、普通の HTML を書けばその部分が普通に出力されます。 初

最近新しく追加された position の新しい値 sticky が場合によってはすごく便利なので記事を書いてみます。 対応ブラウザがまだあまり多くないので実用性は乏しいかもしれませんが、今まで JavaScript の力を借りなきゃ出来なかったことがたったの2行の CSS で出来てしまう魔法みたいな position の値です。 position: stickyMDN が説明が詳しいので貼っておきます。 参考：position - CSS｜MDN 簡単に言うと「スクロールでその位置まで来たらそれ以降は fixed する」みたいな感じです。 サンプルこの記事内で「position: sticky」や「サンプル」など h2 要素に position: sticky をかけています。対応ブラウザであれば h2 要素が fixed しているはずです。 HTML<h2 class="h2-stic

実際には今のところ純粋な border の端を丸めることはできません。 border-radius を使えば出来そうな気もするのですがやってみると上手くいかないです。 border-radius を使うと半円のような感じになってしまいます。 細長い長方形の端を丸めるborder-radius では 端だけを丸めることはできないので、ここでは border を使うのではなく細長い長方形の疑似要素を作りその頂点を丸くすることで角丸な線を実現します。 HTML<div class="round-cap">ここに角丸下 border</div>

タスクランナーの Gulp と PostCSS を使い未来的な CSS を書いてみます。 未来的と書いたのは「いつか未来に使えるかもしれない、でも今はまだ使えない CSS をつかって書いてみよう」というお話。 PostCSSで出来ることGulp の導入、PostCSS とはという話は割愛します。わからない方は検索してください。 例えば PostCSS と postcss-selector-matches というプラグインを使うと以下のような疑似セレクタが使えます。 body:matches(.home, .archives, .tag) { color: red; }疑似セレクタ :matches は「セレクタをひとまとめ」にするセレクタで、CSS4 で定義されています。現状ではほぼ全てのブラウザで使うことができません。ただ postcss-selector-matches は上の CSS

CSS だけで web ページをバウンドをしているように表示させてみます。現在このページでもバウンド表示を実装しているのでビヨンビヨンとバウンドしながら表示されたと思います。 web ページ全体をするというと若干好みが分かれそうな表示ですが、全体ではなく一部の要素だったりマウスがホバーした要素だけなどであれば、デザインによっては効果的なものになるかもしれません。 webページ全体をCSSだけでバウンドさせるCSS の animaion と transform の scale 値を使います。scale で拡大率を指定しています。 body { animation: bound 2.2s ease-in-out; transform-origin: 50% 50vh; } @keyframes bound { 0% {transform: scale(0.1)} 12.5% {transfor

通常の web ページは縦に長く、縦のスクロールバーが作られスクロールが出来るようになります。 スクロールが発生しないような一枚絵の web ページを作っているならともかく、大抵は出来てしまう縦スクロールバー。web ページが表示された瞬間をよく見てみるとスクロールバーが作られるときに全体がガタッと動いています。 なぜ表示がガタつくのか理由は簡単で以下の画像のようになります。 web ページの描画が始まると上から順に要素を構成していきます。図の状態ではブラウザはウィンドウから要素がはみ出していないのでスクロールバーを作りません。赤い線がスクロールバーがない時の中心線です。 ブラウザは要素全体がウィンドウの高さより初めて高くなった時にスクロールバーを表示します。青い線がスクロールバーば出現した結果の中心線です。元の赤い中心線より左にずれます。 ブラウザの幅は固定なのでスクロールバーがあること

AMP の HTML が間違っていないかをチェックするときに AMP ページの URLの末尾に #development=1 を付けてあげるとブラウザのデベロッパツールで確認をすることができます。 ただ「#development=1 って書くの長いし面倒くさい」と思ったので自動でハッシュをつけて AMP ページを開いてくれるブックマークレットを作りました。 以下のような条件で3つに分岐させています。 AMP ページが存在する通常ページ ・・・AMP ページに #development=1 を付与してページを開く 開いているページがすでに AMP ページ ・・・URL 末尾に #development=1 を付与してページを開く AMP ページがない ・・・その旨をアラート #development=1 ブックマークレットブックマークレットの登録の仕方は割愛します。わからない方は「ブックマー

今までも SVG で作ったロゴを使用していましたが、Illustrator の使い方を少し覚えたので、使いつつロゴを作成しました。同じく SVG で書き出しています。 ロゴの歴史歴史といっても2つしかないです。前回のロゴが下の感じだったのでかなりの進化ですね。 配色は全く同じです。グリッドをおいてひたすら規則正しく直線を引いていくだけの簡単なお仕事でした。 アウトライン化せずに直線、つまり line 要素として SVG を作ったので少し文字数の削減が出来ています。 SVG<svg id="logo" viewBox="0 0 508 284"> <title>q-Az</title> <line stroke="#9FA8DA" stroke-width="27" stroke-linecap="round" x1="141.5" y1="141.5" x2="141.5" y2="269

「後で読む」の 代表サービス Pocket。書いた記事がどれだけ Pocket に登録されているかを JavaScript だけで取得したいのですが、公式には Pocket 数取得のための API がないということで JavaScript の力だけでは無理です。ですので米 Yahoo! が提供している YQL というサービスと併用して Pocket 数を取得したいと思います。 YQL は特に登録せずとも使えるサービスなのでこちら側がすることは JavaScript コードを書くだけです。パッと見「Pocket 数を JavaScript だけで取得する方法」に見えるかと思います。 追記：Pocket 公式ボタンの仕様変更があったため色々変更しています。2016/12/4 YQL とは 参考：YQL YQL はものすごく簡単に、雑に言うと「指定した URL の内容を JSON 化して送ってく

ナイトモード、夜間モードが iPhone や Twitter の公式クライアントに搭載されて、夜は暗めの画面で見るという事が増えてきたように感じます。半分お遊びですが WordPress にもナイトモードを搭載して夜でも安心して読めるブログを目指してみようというお話です。 使用中のテーマによって色々な状況が考えられるので、誰でも簡単に夜間モードを搭載できるという訳ではありません。またブログのメインとなる色を変えてしまうので、良いか悪いかよくわかりません。一つのアイデアとして考えてください。 JavaScript if((new Date()).getHours() >= 20 || (new Date()).getHours() < 6 ) { document.body.className += " night-mode"; } JavaScript を直接テーマに入れる場合は上のコード

jQuery、JavaScript を使ってスライドショーを作るのが昔は一般的でしたが今なら CSS だけでも十分スライドショーに見える仕組みを作ることが出来ます。 この記事ではシンプルにフェイドイン・フェイドアウトで画像が切り替わるスライドショー作ってみます。下の方にデモも作りましたので参考にしてみてください。 作り方制限を緩めて作ることも当然可能なのですが説明をシンプルにするために、画像の形は正方形限定です。サイズに関しては制限はないですが width、height 属性はあった方がいいのでそろえた方が楽に HTML をかけると思います。画像の枚数も制限を付けて8枚です。 HTML<div class="photo-show"> <img src="画像のURL"> <img src="画像のURL"> <img src="画像のURL"> <img src="画像のURL"> <im

せっかく WordPress を使っているので、ギミック的な JavaScript コードの紹介をするときは WordPress ですぐに使える形がしたいなと思い　body の最下部、つまり、 ・・・ <script> //ここに挿入 </script> </body> </html>と functions.php から インラインの JavaScript コードを挿入できる方法を考えました。直接メインのテーマを編集することなく、functions.php の編集だけで入れられる事で利便性が増すのではないかと思います。 なぜ head ではなく body 最下部なのかhead ではなく body の最下部に JavaScript コードを挿入することの利点は、Web ページの描画を高速化することです。昔は head 要素に script タグを使って書いてあげることが主流でしたが、最近の流

こんにちは。 鈴木はるかです。 久しぶりのSEOネタです。 今回は、世界で拡大をみせているAMP（Accelerated Mobile Pages）の終焉を予測してみようと思います。 もちろんGoogle大好きの私のサイトはフル対応（実験中のRecipeもマークアップ）です。よろしければマークアップを確認してみてください。私のページは/amp/でAMPページになります。 2020年6月私のサイトは、CoreWebVitals(後述)の導入発表によりAMP機能を完全に廃止しました。 はじめに 　最初に申し上げますが、みなさんが楽しみにしているこのサービスの終わりを大胆に予測するなんて、なんて「偏屈」だと思う方がいらっしゃるかも知れません。 しかし、サービスを開始した瞬間から、終わりまで正しく予測しておかないと自社の振る舞いを見誤ってしまう可能性があるのです。 マーケティングのお仕事をしている

マウスをクリックしたときに雨のしずくが落ちたようなエフェクトを JavaScript で付けてみます。 CSS のアニメーションに大体のことを押し付けているので、動きも軽めです。その代り古いブラウザには対応できていない感じになります。現在このページでそのエフェクトを付けてますのでマウスクリックをしてみてください。 作り方CSS.sizuku { animation: sizuku 1s linear 0s; /*1s はアニメーションにかかる時間*/ background-color: #6EB2E0; /*背景色*/ border-radius: 50%; border: 4px solid #6EB2E0; /*ボーダーの幅と色*/ position: absolute; z-index: 1000; } @keyframes sizuku { 0% { height: 0; opac

PageSpeed Insights とは Google が提供している Web ページの表示スピードを測定して点数をつけてくれるツールです。点数が高いほど Google 検索において有利だと言われているので、高いに越したことはありません。今回はその点数を満点である100点にする方法を紹介します。 「WordPress は遅い」「PHP は遅い」という話を聞いたりもしますし、WordPress だから高得点は無理だと思い込んでいる人もいるのでそんなことは無いよ、というお話です。これを真似すれば基本的には誰でも、WordPress であっても PageSpeed Insights で100点を取れるはずです。 Google アナリティクスを外すPageSpeed Insights では、JavaScript ファイルのブラウザキャッシュ時間を長め（10日程度）に設定しないと点数が下がります。

今回は div だけで球体を作るのにチャレンジしてみます。 参考：CSSで球体を作る。｜Qiita Qiita でこんな記事を見つけて、もっと高密度で作れるかもと思い作ってみました。下の方に実際の球体のデモを表示してます。 作り方 CSS と JavaScript を使って作ってみます。 HTML <div id="ball"></div> 上記の div の中に球体になる div 要素を入れていきます。rotateY で 1deg ずつずらして重ねていくことで球体にしていきます。 CSS #ball { animation: rolling 2s linear 0s infinite; height: 300px; margin: 50px auto; position: relative; transform-style: preserve-3d; /*要素内の子要素が3Dで描画される