Web開発
CSSだけで簡単に1行や複数行の3点リーダーを付ける方法
この方法を知っていれば、1行でも複数行でも3点リーダーを表示でき、レスポンシブルデザインのようなマルチデバイスでもレイアウトが崩れずに表示可能です HTMLのレイアウトでは時には文字がはみ出した際に、3点リーダーと呼ばれる「…」をつける場合があります。 普通に記述してしまえば対応できますが…
最新技術やプログラム、デザインなど様々な情報を提供するサイト
Web Technic7 pages
Web開発
CSSでアプリのようにピタッとスナップするスクロールを作成
アプリでスクロールしてコンテンツにスナップする動作は一般的ですが、CSSでもアプリと同じようにスクロールしてスナップする動作が実装できます。 出典元：CSS Scroll Snap - Ahmad Shadeed アプリなどで横スクロールしてコンテンツにスナップするといった動作をよく見かけると思いますが、CSSで横スクロールのU…
Web開発
SVGとCSSでおしゃれでクールな最新のデザインにする
SVGとCSSのみでマルチデバイスの最新トレンドデザインを実装。マスク処理も可能で時間と労力を節約できて、サイトのパフォーマンスも向上します。 出典元：Building UI Components With SVG and CSS - Ahmad Shadeed SVGはアイコンやイラストだけでなく、開発者が時々忘れてしまう隠れた力をたくさん持っています。 CS…
Web開発
2022年のWebデザインの最新トレンドとレイアウト
2022年に期待されるトレンドは？クリエイターは、より「良い」ウェブデザインとされるものの境界を押し広げています。最新トレンドを取り入れましょう。 出典元：Web design trends for 2022 | Layout この2年間で学んだことは、私たちは常に新しいものに適応し続けなければならないということです。2022年に向けて、デ…
Web開発
第0回のテーマ「Webデザイナー、コーダーってなに？」
第0回「Webデザイナー、コーダーってなに？」にです。この講座では現役Web開発者がWeb業界を目指す方に様々な情報をわかりやすい解説しています。 はじめに 「未経験でもWebデザイナー、コーダーになろう」ではWebデザイナーやコーダーなどWeb業界を目指す方に、現役Webデザイナー兼コー…
Web開発
CSSでもできる！知っておくべき重要なヒントとコツ 8選 8選
わずか数行のコードでCSSで洗練されたデザインを作成可能。jsで実装していたことがCSSでも！？そんな効率的に開発するためのテクニックを紹介しています 出典元：8 Essential CSS Tips and Tricks Every Developer Should Know CSSは、HTMLスケルトンを設定した後、Webページにスタイルを追加するために使用されます。さらに、わずか数行…
Web開発
ファビコンは1サイズのみ！さらにダークモード対応させる
Webサイトをダークモード化、用意するファイルの数は1サイズでOK。綺麗なファビコン表示と、ファビコンをダークモード化する方法を詳しく説明します。 最近ダークモードと呼ばれる機能に対応したアプリが増え、それと同じようにWebサイトでもダークモードに対応しているものを見かけるようになりまし…