メインカテゴリーを選択しなおす
【Vue.js＋TypeScript】デジタル時計を作ってみた
こんにちはです。あっちのそららです。最近勉強しているTypeScriptのアウトプットとして、デジタル時計を作ってみました。 デモページ acchinosorara.github.io「Vue.js」というフレームワークを使用。ディスプレイの文字がリアルタイムで更新される、ありきたりな時計です。 文字のデザイン カクカクしたデジタル時計らしさを出すため、文字はCSSでデザインしました。 参考記事 ja.wikipedia.org HTMLで各セグメントを生成し、A～Gの連番を振って配置しました。数字に応じて個々の表示・非表示が切り替わる仕組みです。例えば、 「2」→ C、Fを非表示 「4」→ …
【WordPress】記事の読了時間を計算表示するショートコードを作成してみた！
こんにちは、鈴木俊吾（すずしん）です。 あなたは、ブログの記事を読むことはありますよね？その際に、記事をどれくらいの時間で読了できるか、気になったことはありませんか？ 私は、ブログを読む際に、記事の長さや内容によって、どれくらいの時間がかか
WordPressウィジェットでリンクボタンを横並びにする方法（CSS完結版）
WordPressのカスタムHTMLウィジェットで、ブログ村やブログランキングのリンクボタンをCSS（Flexbox）を使って横一列に並べる方法を解説。テーブルタグを使わないシンプルでレスポンシブな実装です。
初心者にもやさしい 簡単HTML作成がFC2WEBのサービス終了に伴い移転
以前から、Webサイト(HTMLタグ, JavaScript, CSS)の勉強のために作成した初心者にもやさしい 簡単HTML作成ですが、FC2WEBのサービス終了を受けて、移転が必要となりました。 現在は、もっと便利なWebサイトも
はじめに n 番煎じ感が否めない記事だけど、ワイの知らない間に scroll-snap-type とかいう知らないプロパティくんがシゴデキらしいと聞いたのでまとめておく コード <div class="container"> <div class="items"> <div class="item">item 1</div> <div class="item">item 2</div> <div class="item">item 3</div> </div> </div> :root { --width: 300px; } /* カルーセルのcontainerの領域を指定 */ .conta…
input type="range"でつまみのない丸っこいスライダーを作る
作りたいもの つまみを非表示もどきにして丸っこくしたい 動作確認環境 Google Chrome コード まずは HTML と CSS でできるところまで作るゾ1 <input type="range" value="0" min="0" step="1" max="5" /> input[type="range"] { -webkit-appearance: none; /* デフォルトのCSSをリセット */ --range-height: 20px; --range-width: 250px; width: var(--range-width); height: var(--range-…
【WordPress覚え書き】サイドバーのカテゴリ一覧の行間を詰める
WordPressで管理するブログのサイドバーのカテゴリー一覧の行間を変更するには、一般的に「.widget_categories」を設定すれば良いそうなのですが、「.widget_categories」の設定では変化が見られなかったため、スタイルシートを読んで一応の解決を図ったので、情報を共有したいと思います。
【CSS】Youtube動画の埋め込みで縦横比率をPCでもスマホでも維持する方法
ブログやホームページにYoutube動画を埋め込む際にYoutubeで埋め込みコードをコピペするとサイズが小さかったり、でかすぎたり、左寄せで見栄えが悪かったり。 そこで、縦横サ...
今回は、tableの枠線(border)を消す方法について説明します！borderを全体的に消すには、border:none;を指定し、borderで一部消すには消したい線を指定(※)します。※上線を消すには border-top:none; 右線を消すには border-right:none; 下線を消すには border-bottom: none; 左線を消すには border-left: none;
今回は、擬似要素と擬似クラスの使い方について説明していきます。擬似要素と擬似クラスの違いは、擬似要素は、要素に実際には存在しない部分（前後のコンテンツや最初の文字、行など）にスタイルを適用するのに対し、擬似クラスは、要素の状態（ホバー、フォーカスなど）に基づいてスタイルを適用します。
【CSS】display:none と visibility:hiddenの違い
display:noneとvisiblity:hiddenはどちらも要素を非表示にする時に指定しますが、display:noneは要素を「非表示にする」だけでなく、その要素自体がレイアウト計算から完全に除外されます。で、visibility:hiddenは要素を「非表示」にするものの、レイアウトのスペースは維持されます。
こんにちは、すぐこです。HTMLなどのWeb制作について学習していると、「セマンティックなんちゃら〜」「セマンティックWebがどうのこうの〜」という言葉を聞いたことがあるかと思います。なんだか難しそうな単語ですっ飛ばしたくなっちゃいませんか...
【初心者向け】CSSのブロックレベル要素とインラインレベル要素の違いは？
こんにちは、ただいまHTML＆CSSを学習中のすぐこです。HTML＆CSSのCSSを学習していると出てくる、ブロックレベル要素とインラインレベル要素。何が違うの？むしろ何か違うの？って思いませんか？私も最初は全然見分けがつきませんでした。で...
![[感性古すぎ！？]インタラクティブ？な「ホームページ」を創ってみた](https://img.blogmura.com/sites/1287037/post-images/68090446.webp/crop/435x435)
[感性古すぎ！？]インタラクティブ？な「ホームページ」を創ってみた
初めに 以前こちらの記事にて、当ブログのトップレベルドメインにページが存在せず、403エラーが出ていたことをお伝えした。問題が判明して以来、長い時間を掛けて素材画像やページの制作に着手していたのだが、なにぶん俺の知識が乏しいばっかりに、作
線形グラデーション 1 2 3 4 5 6 7 8 9 10 .linear-1 { /* orangeからblueにグラデする。orange 0%, blur 100% と同じ挙動 */ background: linear-gradient(orange, blue); } .linear-2 { /* 左から右にグラデする。to right = 90deg or 0.25turn と同じ挙動 */ background: linear-gradient(to right, orange, blue); } .linear-3 { /* 45度回転した状態でグラデする。45deg = to…
WordPress：ページの表示速度改善｜Autoptimizeの設定注意点
「Autoptimize」は、WordPressのプラグイン。HTMLやCSS、JavaScript、画像を最適化し、サイトの表示速度を高速化するもの。Autoptimize不具合時の対処法。
【デイトラ初級編】jQuery実践課題②モーダルで画像の拡大表示
デイトラWeb制作コース初級編【調べながら実装しよう】jQuery実践課題②「モーダルで画面の拡大表示」を終えたので、復習のために記事にしました。HTML、CSS、jQueryを載せています。
【デイトラ初級編】jQuery実践課題①ページトップへ戻るボタンを付ける
デイトラWeb制作コース初級編【調べながら実装しよう】jQuery実践課題①「ページトップへ戻るボタンを付ける」を終えたので、復習のために記事にしました。HTML、CSS、jQueryを載せています。
【デイトラ初級編】調べながら実装しようjQuery実践課題①
2024年8月から、デイトラでWeb制作コースを学んでいます。 今回は初級編DAY21「調べながら実装しよう」で、jQueryを使って自分でサイトの動きを実装する課題です。 初級編で構築したスイーツサイトに動きをつける課題が2つ出ました。
WordPressプラグイン「TablePress」で、Excel のような行列固定表示がやってみたかったので調べてみると・・CSSを記述すると実現できました！
自作ブログのカスタマイズ：タグ検索機能の実装方法 スズシンラボ
自作ブログにタグ検索機能を追加しました。キーワードを入力すると、そのキーワードに一致するタグの記事を検索できるようになりました。この記事では、そのタグ検索機能の実装方法を紹介します。一般的な方法とは若干異なりますが、参考にしていただければ幸いです。
目次・見出しのデザイン変更、マーカー機能、カテゴリーのタイル表示、実際にこのブログでのカスタマイズについて。CSSコードあり。
こんにちはです。あっちのそららです。今回は、HTMLとCSS（ウェブ制作などで使う言語）で、太陽を描画してみました。「Result」で確認できます（レスポンシブ対応済）。 See the Pen Untitled by あっちのそらら (@acchinosoraranocode) on CodePen. 静止画だとシンプルすぎて味気なかったので、遊び心でアニメーションも加えました。ギザギザ部分は、複数の正方形をつなげて再現。円周上に並べるため、三角関数を使用したので、ざっくり解説します。 正方形を描画する spanタグで正方形を作ります。数が多いほどギザギザが細かくなりますが、見た目のバランス…
Webサイトをデザインする時には、視覚的な演出としてちょっとした動きを付加することも同時に検討する。動きを与えることで見せたいものをより印象付けたり、UIの観点で使いやすくしたり、情報の内容をより分かりやすく伝えることが […]
画像をふわっと。初心者でも簡単に実装できるシンプルなテクニック。具体的なコード例を交えて紹介。デザインスキルを次のレベルに引き上げるための必読ガイドです。
SWELLカスタマイズ：素人が追加CSSでブログをカスタマイズしてみる【記事スライダー編】
このブログは「SWELL」というワードプレステーマを使用して作っています。SWELLはHTMLやCSSなどの専門知識がなくても、直感的に良い感じのサイトデザインができます。本業がフォトグラファーなので、ブログの写真には結構こだわっているつも
SWELLカスタマイズ：素人が追加CSSでブログをカスタマイズしてみる【トップページ記事一覧編】
このブログは「SWELL」というワードプレステーマを使用して作っています。SWELLはHTMLやCSSなどの専門知識がなくても、直感的に良い感じのサイトデザインができます。本業がフォトグラファーなので、ブログの写真には結構こだわっているつも
SWELLカスタマイズ：素人が追加CSSでブログをカスタマイズしてみる
「記事スライダー編」と「トップページ記事一覧編」に分けて、素人の追加CSSによるカスタマイズを紹介しています。この記事ではカスタマイズで完成したページを見ていきます。それぞれの記事に細かいカスタマイズについて書いています。 完成したトップペ
【JavaScript】カラフルなオリキャラをランダムに描画する
こんにちはです。あっちのそららです。前回、HTMLとCSS（ウェブ制作などで使う言語）で、オリキャラを描画しました。 acchinosorara.hatenablog.jp 今回はそのアレンジで、大量のオリキャラをランダムに描画するコードを書いてみました。「Result」で確認、右下の「Rerun」で再描画できます。描画はランダムなので、毎回違った結果になります。 See the Pen Fairy-rain by あっちのそらら (@acchinosoraranocode) on CodePen. JavaScriptで乱数を生成、かつ値が被らないようにし、下記内容をランダムに設定しています…
【はてなブログ-カスタマイズ】スマホ版のグローバルナビゲーションに検索機能を追加する（JavaScript・HTML・CSS対応）
スマホ版のグローバルナビゲーションに検索機能を追加してみました。以前「スマホ版のグローバルナビゲーションを設置する」対応をしています（以下リンク）。 今回はそれに検索機能を追加しました。miya-moto-blog.hatenablog.com元々ページの下の方に検索機能はあったのですが、スマホ版だとそこに辿り着くまで意外と遠いです。 今回の対応で、グローバルナビゲーションからいつでも検索できるようになりました。それではサクッと本題へ。
![はてなブログカスタマイズの記事まとめ（その8）[CSS、HTML、JavaScript関連]](https://img.blogmura.com/sites/1251975/post-images/62402677.webp/crop/435x435)
はてなブログカスタマイズの記事まとめ（その8）[CSS、HTML、JavaScript関連]
ブログカスタマイズに関する記事をいくつか投稿したので、まとめてみようと思います。 ちなみにブログカスタマイズの記事まとめは8回目です。これまでのまとめ記事はこちら。 これまでのブログカスタマイズ まとめ記事 ブログカスタマイズの記事まとめ（その1）[CSS/JavaScript/デザインテーマ] ブログカスタマイズの記事まとめ（その2）[CSS/はてなブログ関連/デザインテーマ] ブログカスタマイズの記事まとめ（その3）[CSS/HTML/JavaScript] ブログカスタマイズの記事まとめ（その4）[CSS/HTML/JavaScript/はてなブログ関連] ブログカスタマイズの記事まとめ…
【はてなブログ-カスタマイズ】スマホ版で追従する目次を表示する（JavaScript・HTML・CSS対応）
スマホ版で目次を常に表示するように対応してみました。 スクロールの度に目次が追従するようにしています。以前「追従する目次をサイドバーに表示する」対応をしています（以下リンク）。 今回はそれをスマホ対応したような内容です。miya-moto-blog.hatenablog.com上記の対応（PCサイズ）だとサイドバーがあるため、そこに目次を表示するようにしました。 今回の対応（スマホサイズ）だとサイドバーがないため、別の方法で目次を表示するようにしています。今回はその辺りに関して詳しく書いていきます。
【CSSイラスト】発光するオリキャラのアニメーションを作ってみた
こんにちはです。あっちのそららです。今回は、HTMLとCSS（ウェブ制作などで使う言語）で、オリキャラのアニメーションを作ってみました。「Result」で確認できます（レスポンシブ対応済）。 See the Pen Shine-Fairy by あっちのそらら (@acchinosoraranocode) on CodePen. アニメーション用の正円を作り、大きさや不透明度を徐々に変化させることで、発光を表現しています。また、正円は同じものを3つ重ね、各々のアニメーション開始のタイミングをずらし、波紋のような動きにしました（下記参照）。 正円1のアニメーションを開始 正円1の開始から0.3秒…
【はてなブログ-カスタマイズ】見出しデザインをCSSで変更（4回目）
数日前から適用していますが、見出しのデザインを少し変更してみました。見出しデザインは何度か変更していて、今回の変更で4回目です。 これまので見出し変更の記事は、この記事の最後に関連記事としてリンクしておきます。それではサクッと本題へ。
【はてなブログ-カスタマイズ】最新記事（サイドバー）にある「もっと見る」リンクのデザインを変更（CSS変更）
数日前から適用していますが、「もっと見る」リンクのデザインを変更してみました。 「もっと見る」リンクは、サイドバーの最新記事に表示されているものです。「もっと見る」リンクがだいぶ簡素だなと思い、変更してみました。 ちょっとした変更なのですが、良い気分転換になりました。それでは本題へ。
【はてなブログ-カスタマイズ】右下に固定表示している「トップへ戻る」「HOME」ボタンのデザインを変更（HTML・CSS変更）
数日前から適用していますが、「トップへ戻る」「HOME」ボタンのデザインを変更してみました。 右下に固定表示しているボタンです。以前も「トップへ戻る」「HOME」ボタンは変更しています。 以下の記事で詳しく書いています。miya-moto-blog.hatenablog.com変更前はアイコンだけだったのですが、それぞれのボタンに名称を付け足してみました。他のサイトでもよく見かけるので、アイコンだけでどんな機能か示せている認識でいます。 ただちょっと変化をつけたいなと思い、カスタマイズしてみました。それでは本題へ。
【はてなブログ-カスタマイズ】グローバルナビゲーションの不具合対応（z-index）（CSS対応）
以前、グローバルナビゲーションのデザインを大幅に変更しました。変更内容の詳細は以下の記事に書いています。 miya-moto-blog.hatenablog.com 上記の変更からしばらくして、グローバルナビゲーションに不具合があることに気付きました。 ちょっとした不具合なのでササっと修正してお終いにしても良かったのですが、せっかくなので不具合対応の内容を記事にしてみようと思います。 それでは、どんな対応をしたか書いていきます。
CSS（スタイルシート）を更新したときにキャッシュを自動で読み直すために対応した話
今回はCSSファイルを更新したときにだけ、最新のCSSを読み直させるための対策をご紹介したいと思います。
備忘録 CSSだけでSPの時はアコーディオン風でPCの時はタブ切り替えを実装する方法
CSSだけでSPの時はアコーディオン風になり、PCの特はタブ切り替え風になる方法をご紹介したいと思います。
![はてなブログカスタマイズの記事まとめ（その7）[アイコン、HTML、CSS関連]](https://img.blogmura.com/sites/1251975/post-images/61390015.webp/crop/435x435)
はてなブログカスタマイズの記事まとめ（その7）[アイコン、HTML、CSS関連]
ブログカスタマイズに関する記事をいくつか投稿したので、まとめてみようと思います。 ちなみにブログカスタマイズの記事まとめは7回目です。これまでのまとめ記事はこちら。 これまでのブログカスタマイズ まとめ記事 ブログカスタマイズの記事まとめ（その1）[CSS/JavaScript/デザインテーマ] ブログカスタマイズの記事まとめ（その2）[CSS/はてなブログ関連/デザインテーマ] ブログカスタマイズの記事まとめ（その3）[CSS/HTML/JavaScript] ブログカスタマイズの記事まとめ（その4）[CSS/HTML/JavaScript/はてなブログ関連] ブログカスタマイズの記事まとめ…
【はてなブログ-カスタマイズ】見出しデザインをCSSで変更（3回目）
数日前から適用していますが、見出しのデザインを少し変更してみました。見出しデザインは何度か変更していて、今回の変更で3回目です。 これまでの見出し変更の記事はこちらです。miya-moto-blog.hatenablog.commiya-moto-blog.hatenablog.comそれではサクッと本題へ。
このページでは、HTMLとCSSのみで要素の表示非表示をクリックやタップで切り替えられる方法についての覚え書きをまとめています。 デモはこんな感じ。 DEMO 映画やゲームの感想...
![[VSCode] 自動補完機能が効かなくなった](https://img.blogmura.com/sites/1282896/post-images/67463299.webp/crop/435x435)
![[CSS] レスポンシブなfont-size指定](https://img.blogmura.com/sites/1282896/post-images/66837594.webp/crop/435x435)
