点線の作り方 線の幅が「3px」、間隔が「5px」の点線を作ると想定してご説明します。 まずはHTMLを記述します。 <div class="example"></div> 次に、CSSで点線を作っていきます。 以下3つのプロパティを使います。 点線の1セットをつくる 「1セット」とは、赤枠で示した部分のことです。 この1セットを作って、あとは「background-repeat」で繰り返し表示するイメージです。 「background-size」で大きさを設定 background-size: 8px 1px; まずは1セットの枠の大きさを設定します。 線の幅が「3px」で間隔が「5px」⇒「8px」と指定。線の高さが「1px」⇒「1px」と指定。 「background-image」+「linear-gradient」で点線を描く グラデーション（linear-gradient）を使っ

本書『サバイバルTypeScript』は実務でTypeScriptを使う開発者のための入門書です。そして、このページはTypeScriptの特徴を最速で把握できるよう、数百ページからなる本書のコンテンツをつまみ食いした要約です。 » 本書について詳しく知る » とにかく今すぐTypeScriptを書いてみたい TypeScriptとは​JavaScriptのスーパーセットとなるプログラミング言語。静的型付け言語であり、プログラムの正しさが静的に検査できる。ライブラリやIDEなどの開発環境が充実しており、大きなエコシステムを持っている。Microsoftが2012年に開発し、オープンソースで公開した。» TypeScriptの特徴について詳しく知る » TypeScript誕生の背景について詳しく知る TypeScriptはJavaScriptのスーパーセット​スーパーセットとは、元の言語と

この記事では、Webデザイン制作の面倒な作業をラクにするCSS便利ツール87個をまとめています。なお、新しいツールを随時アップデートしています。 CSS FlexboxやGridをつかったレイアウト生成ツールや、レスポンシブ対応の画像ツール、配色に困ったときに便利なツール、多彩なCSSアニメーション、話題のニューモーフィズムなど、CSSスタイリング時間節約や、さまざまな問題を瞬時に解決することを目的に作成された便利なツールが揃います。 Web制作に活用したい最新ツールと合わせてチェックしてみてはいかがでしょう。 これだけあれば困らない！Web制作を快適にする最新オンラインツール48個まとめ Web制作�の面倒�な作業をラクにするCSS便利ツールまとめ CSS box-shadow Examples さまざまなサイトで実際に使われているCSS box-shadowを集めているライブラリ。お好

CSSのプロパティにはまとめて記述するための「ショートハンド」という書き方が用意されています。制作のスピードがグッと早くなるので、プロの制作現場ではショートハンドでの記述は必須テクニックです。 fontやbackground、box-shadow、animationなど一括指定を忘れがちなプロパティもわかりやすくまとめているので勉強中や制作中に是非活用してください！

用意された項目を数値入力や操作していくだけで簡単に見栄えが再現でき、必要なCSSコードなどを出力してくれるCSS関連のジェネレータのまとめです。 CSSが苦手な人は上手く利用すればスタイル作成の時間短縮になりますし、CSSを勉強中またはこれから勉強しようと思っている人の学習ツールとして使えるものもあります。 ツールによってはもう少しシンプルに実装できると感じるコードが出力されるので、その辺を判断できる人はそのまま出力コードを使うのではなくベースとして使用するのが良いかもしれません。 また、公開されてからしばらく経っているなどの理由で、現在ではほとんどの場合で不要なプレフィックスが出力されるものもあります。 各プロパティのプレフィックス有無の判断が難しい人は、「Can I use...」などと併用して試してみてください。 Neumorphism/Soft UI CSS shadow gene

この記事では、Webデザイン制作に便利なコピー＆ペーストで実装できる最新HTML/CSSスニペットをまとめてご紹介します。 一般的に「切れ端、断片」といった意味をもつスニペット（英: Snippet）は、ウェブサイトなどのプログラミングで簡単に切り貼り、再利用できる部品、コンポーネントを指します。 これらのスニペットを利用すれば、最新のウェブデザインテクニックを手軽に実現、楽しむことができます。今後のウェブ制作に活用してみてはいかがでしょう。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. テキストエフェクト系 2. イメージスライダー系 3. ナビゲーションメニュー系ト 4. ローディングアニメーション系 5. ページレイアウト系 6. ボタンエフェクト系 7. 便利、面白系スニペット 「Run Pen」をクリックすることで読み込みが開始され

【2026年最新】Google AI StudioとGeminiの違いとは？使い分けと活用法を徹底解説

※ CSS Animationに関してはWeb Animation APIを使うことでより簡単にJavaScriptからアニメーションを構築・制御できるようになります。2020年2月時点ではブラウザの実装が不十分でPolyfillを要するため、この記事では対象外としています。 専用ライブラリを使わずにアニメーションを作ろう 各ライブラリは特別な魔法を使っているわけではありません。 原理的にはCSS・SVG・WebGLといった各要素技術をしっかりと習得すれば、専用のライブラリと同等のことができるばかりか、より高い自由度を手に入れながら軽量化を実現できる可能性もあります。 また、専用のライブラリを利用する場合にも、基礎となる原理や各技術の得意不得意を知っていることは大きな武器となるでしょう。 Vue.jsを使ってCSSやSVGのアニメーションを書く とは言え、これらのアニメーションを土台の技術

仮想DOMは本当に“速い”のか？ DOM操作の新しい考え方を、フレームワークを実装して理解しよう 最近のJavaScriptフレームワークで利用される「仮想DOM」について、リアルDOMの違い、メリット・デメリット、仮想DOMを使ったフレームワーク開発などを、ダーシノ（bc_rikko）さんが解説します。 はじめまして、ダーシノ（@bc_rikko）です。さくらインターネットでフロントエンドエンジニアをする傍ら、NES.cssというファミコン風CSSフレームワークを開発しています。 さっそくですが、皆さんは、ReactやVue.jsといったJavaScriptフレームワークを使ったことがありますか？ そういったフレームワークで使われている、仮想DOMについて知っていますか？ 「聞いたことない」「聞いたことはあるけど、どう実装されているかは知らない」「熟知している」。いろいろなレベルの方がい

『JIS X 8341-3:2016』レベル Aの達成基準（W3C勧告『WCAG 2.0』のレベル Aと同じ）をベースにして、エー イレブン ワイ（株式会社インフォアクシア）が独自に作成した『Webアクセシビリティ逆引きガイドライン』です。注意事項をご確認の上、Webコンテンツのアクセシビリティ向上にご活用ください。 最終更新日：2018年12月15日 注意事項 HTMLのWebページを対象にしています。 このガイドラインに沿って制作したWebコンテンツが、『JIS X 8341-3:2016』や『WCAG 2.0』の達成基準を満たすことを保証するものではありません。 『JIS X 8341-3:2016』や『WCAG 2.0』の達成基準が適用されるすべてのケースを網羅しているわけではありません。 また、達成基準で要求されている事項と異なるものが一部含まれています（その場合、ほとんどはユー

「文字の単位が複数あって、結局どれを使えばいいのかわからない。」 「文字単位のそれぞれの特徴がよくわかっていない。」 文字サイズの単位にこのような感想を感じた人は、htmlの学習を始めたばかりの人には多いのではないでしょうか？事実、一つのサイトに複数の単位が使われている時などは、「なぜこの単位なの？」と思った方も多いでしょう。 実際、全ての単位を駆使して、サイトを作っている人は少ないでしょう。ですが、状況に応じて特定の単位を使い分けている人は多いですし、そうすべきです。今回、単位の背景にあるサイト構築の方法にも触れ、どの状況で、どの単位を使うべきかを解説します。文字サイズの問題は今後も避けて通ることはできない問題ですので、早めに理解しておくことが寛容です。心配しないでください。頻繁に使うフォント単位はある程度決まっており、コツをつかめばすぐに使えるようになります。 この記事は初学者向けのも

CSSで「〇〇したい」とか「これどうするんだっけ...」というときに使えるものや地味だけど覚えておくと便利だと思う簡易的なスニペットの一覧です。 August 16, 2018 追記 「CSS Snippets #7」を追加しました。 November 08, 2017 追記 「CSS Snippets #5」を追加しました。 「CSS Snippets #6」を追加しました。 November 07, 2017 追記 「CSS Snippets #3」を追加しました。 「CSS Snippets #4」を追加しました。

g.o.a.t is a free but stylish blogging service with access to stock photos and many new tools. Within minutes and hassle free, you can write or blog.

Every website and landing page should have a clear call-to-action button. This encourages the user to click and perform an action, whether to make a purchase, start a trial, or sign up for an account. There is no single best way to design a CTA and you can use many different styles, from large gradients to ghost buttons, and everything in between. But other factors like color, size, and position a

SVGアニメーションを用いると、さまざまなサイズのディスプレイで印象的なマイクロインタラクションを実現できます。マイクロインタラクションの導入によってUI改善に役立てているケースもあるでしょう（参考記事『SVGで始めるマイクロインタラクション入門』）。SVGでアニメーションを実装するには、CSSを使う方法、JavaScriptを使う方法、動画作成ソフトを使う方法等、さまざまなアプローチがあります。 今回は、HTMLコーダー、フロントエンドエンジニア、デザイナーの分野別のSVGアニメーションのアプローチ方法を挙げ、具体的な実装方法について紹介します。 【コーダー向け】CSSでSVGアニメーションを実現する方法 HTMLコーダーにオススメするSVGアニメーション実現方法の1つは、CSSプロパティを使う方法です。 SVGはCSSプロパティによってグラフィックの形状を変更できます。たとえば、次のコ

独学でつまずいていませんか？ Photoshopの使い方を効率的に学びたい、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGではWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。詳細を知りたい方は、ぜひスクールの詳細をチェックしてみてください！ →スクールの魅力が分かる資料はこちら！（資料請求） スライスせずに書き出せるPhotoshopの「画像アセット生成」って？ 画像アセット生成とは、ファイルのレイヤーやレイヤーグループのコンテンツからJPEGやPNG等の画像アセットを生成するという、スライス作業を不要とする機能です。PhotoshopCCから実装されている機能で、CC2014以降は画像に加えてSVGの書き出しも可能となりました。 普段からコーディングもしているデザイナーさんは効率化のために早くから使ってい

PWA(プログレッシブ ウェブアプリ)は開発者カンファレンス「Google I/O」でクローズアップされた注目の技術です。 ざっくり説明すると、ネイティブアプリとウェブサイトをいいとこどりしたWEBアプリケーションです。 ネイティブアプリのプッシュ通知やアプリ感覚性をWEBアプリにとりいれることにより、インストール不要なブラウザで動くネイティブアプリ(のようなWEBアプリ)が実現できます。 心地よいネイティブアプリのUIをインストールせず、触れるとなるとメリットですよね。 (しかも気に入れば、インストールすることもできます。) もう一つ、大きなメリットがPWA(プログレッシブ ウェブアプリ)にはあります。 ネットワーク接続に依存しません。 キャッシュをとることにより、オフラインやネット環境が良くない場所でも高速で動作させることができます。 ServiceWorkerやFirebase, A

Sassには@eachや@forといった制御構文があり、それらを利用することでCSSで繰り返し記述していたような手間を省くことができます。 そこで今回は基本的なものでありますが、その制御構文を使って繰り返し記述するようなものを楽に出力するサンプルをいくつか紹介します。 例えばクラス名の一部と背景画像名だけ変更したものをいくつも記述するとか連番付きクラスをいくつも記述しながら一部プロパティだけ変更するなど、普段からCSSを書くことが多い人であれば、ほとんどの人が先述したような同じようなものを繰り返し記述していくということをしたことがあると思います。 そういったときにSassを使っていれば、@eachや@forといった制御構文を利用して繰り返し記述する手間を省くことができます。 ここで紹介しているものはいずれも簡易的なものですし、実際に使ってみたりコードを少し見ればわかるようなものばかりだと思

医療器具からお医者さんまで、様々な医療・ヘルスケア関連のデザインアイコンセットのまとめです。 可愛らしい見た目や色合いのものが多く、その他にもシンプルなものやフラットデザインなものまであります。 紹介しているアイコンを使用する際は、ライセンス等は各自で再度確認してください。

一度は見かけたことがあると思う、スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。 途中から要素を固定させたり、スクロールした方向によって表示・非表示を切り替えたりなど全5種類です。 使用HTML 特にこのようにしなければいけないというものではないですが、今回のサンプルで使用しているHTMLはいずれも下記のようなもの（サンプルによってはnav要素がないものもあります）になっており、このHTMLにあるheaderやnav要素に対してjQueryで処理していくといった感じになります。 <header> ...</header> <nav> ... </nav> <main> ... </main> <footer> ... </footer>