最新技術やプログラム、デザインなど様々な情報を提供するサイト

wyoshi24 pages

CSSだけで簡単に1行や複数行の3点リーダーを付ける方法
Web開発

CSSだけで簡単に1行や複数行の3点リーダーを付ける方法

この方法を知っていれば、1行でも複数行でも3点リーダーを表示でき、レスポンシブルデザインのようなマルチデバイスでもレイアウトが崩れずに表示可能です HTMLのレイアウトでは時には文字がはみ出した際に、3点リーダーと呼ばれる「…」をつける場合があります。 普通に記述してしまえば対応できますが…
CSSでアプリのようにピタッとスナップするスクロールを作成
Web開発

CSSでアプリのようにピタッとスナップするスクロールを作成

アプリでスクロールしてコンテンツにスナップする動作は一般的ですが、CSSでもアプリと同じようにスクロールしてスナップする動作が実装できます。 出典元：CSS Scroll Snap - Ahmad Shadeed アプリなどで横スクロールしてコンテンツにスナップするといった動作をよく見かけると思いますが、CSSで横スクロールのU…
パソコンは不要。スマホ、タブレットでできるブログ投稿
Web開発

パソコンは不要。スマホ、タブレットでできるブログ投稿

スマホ、タブレットを使って記事が投稿できたら、おしゃれなカフェで記事を書けます。そんなブログの投稿や更新方法を説明していきます。簡単に導入可能。 iPhoneやiPadなどのスマホ、タブレットは持ち運びに非常に便利です。パソコンよりも軽く、パソコンと同等の機能を備えてます。 そうした端末…
SVGとCSSでおしゃれでクールな最新のデザインにする
Web開発

SVGとCSSでおしゃれでクールな最新のデザインにする

SVGとCSSのみでマルチデバイスの最新トレンドデザインを実装。マスク処理も可能で時間と労力を節約できて、サイトのパフォーマンスも向上します。 出典元：Building UI Components With SVG and CSS - Ahmad Shadeed SVGはアイコンやイラストだけでなく、開発者が時々忘れてしまう隠れた力をたくさん持っています。 CS…
2022年のWebデザインの最新トレンドとレイアウト
Web開発

2022年のWebデザインの最新トレンドとレイアウト

2022年に期待されるトレンドは？クリエイターは、より「良い」ウェブデザインとされるものの境界を押し広げています。最新トレンドを取り入れましょう。 出典元：Web design trends for 2022 | Layout この2年間で学んだことは、私たちは常に新しいものに適応し続けなければならないということです。2022年に向けて、デ…
CSSでもできる！知っておくべき重要なヒントとコツ 8選 8選
Web開発

CSSでもできる！知っておくべき重要なヒントとコツ 8選 8選

わずか数行のコードでCSSで洗練されたデザインを作成可能。jsで実装していたことがCSSでも！？そんな効率的に開発するためのテクニックを紹介しています 出典元：8 Essential CSS Tips and Tricks Every Developer Should Know CSSは、HTMLスケルトンを設定した後、Webページにスタイルを追加するために使用されます。さらに、わずか数行…
ファビコンは1サイズのみ！さらにダークモード対応させる
Web開発

ファビコンは1サイズのみ！さらにダークモード対応させる

Webサイトをダークモード化、用意するファイルの数は1サイズでOK。綺麗なファビコン表示と、ファビコンをダークモード化する方法を詳しく説明します。 最近ダークモードと呼ばれる機能に対応したアプリが増え、それと同じようにWebサイトでもダークモードに対応しているものを見かけるようになりまし…
2022年に注目すべきモバイルアプリ開発トレンド 15選
Web開発

2022年に注目すべきモバイルアプリ開発トレンド 15選

モバイルアプリ開発の新しいトレンドが数多く出現していますが、今回はモバイルアプリ開発のトレンドのTOP15を取り上げます。注目のトレンド満載です。 出典元：Top 15 Mobile App Development Trends to Watch for in 2022 モバイルアプリ開発業界は、驚異的なスピードで進化しています。このデジタルダーウィン時代に生き残り、繁栄する…
overflow: scroll で後ろまでスクロールするのを防ぐ方法 - スクロール連鎖の防止
Web開発

overflow: scroll で後ろまでスクロールするのを防ぐ方法 - スクロール連鎖の防止

overflow: scroll で後ろの要素がスクロールすることがありますが、CSSを使って、解決する問題、その仕組み、および使用場所について説明します。 出典元：Prevent Scroll Chaining With Overscroll Behavior - Ahmad Shadeed position: fixedの要素があるとしましょう。スクロールがある場合は、要素の下部の境界に到達すると、ブラウザは…
簡単にできるHugoで人気の記事を表示する方法を詳しく解説
Web開発

簡単にできるHugoで人気の記事を表示する方法を詳しく解説

データベースもサーバーも不要。Hugoでも簡単に人気の記事を表示する方法を紹介いたします。あなたのサイトにもPVランキングを簡単に設置できます。 Hugoにはさまざまな機能があり、ブログを作るにはもってこいの静的サイトジェネレーターです。 関連記事も取得できて、検索機能もある「至れり尽く…

サイト内検索