Webページの特定テキストへ直接ジャンプしてハイライトするリンクの作り方／「Chrome」「Edge」は標準機能で、「Firefox」は「Link to Text Fragment」拡張機能で【レビュー】
SVG ANIMATIONS - JavaScriptも画像も用いないアニメーション集
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Web上でアニメーションを実現する方法は幾つかあります。アニメーションGIFを使う方法、CSSアニメーション、そしてSVGやJavaScriptを使うこともできるでしょう。ユーザ操作によるインタラクティブなアニメーションを実現しようとすると、JavaScriptが選択肢になります。 しかしWebブラウザ側でJavaScriptをオフにされるだけでJavaScriptベースのアニメーションは実現できなくなります。そこで参考にしたいのがSVG ANIMATIONSです。 SVG ANIMATIONSの使い方 SVG ANIMATIONSはCSSとSVGのみでアニメーションしています。JavaScriptも画像も使われていません。 複雑な幾何学模様系のアニメーションが多いです。 線が動く
HTML/CSSで実装できる！今どきデザインのホバーエフェクト30個まとめ
ウェブサイトを魅力的に仕上げるだけでなく、ユーザーの注目を集めることができる、アニメーション・エフェクト。今回は、サイトコンテンツ表示に活用できる、HTML/CSSのみで実装できるホバーエフェクトをまとめています。 CSS3 を駆使したスタイリングは、コピペで利用することもでき、他と差のつくデザインエフェクトを、手軽に実現することができます。そのままコードを編集し、動作を確認することもできるので、今後のデザインプロジェクトに活用してみてはいかがでしょう。 詳細は以下から。 ウェブデザインを魅力的に仕上げる、HTML/CSSホバーエフェクトまとめ HTML/CSS/JS をクリックすると、各コードやスタイリングを確認でき、Result で実際のエフェクトを試すことができます。Return をクリックすると、読み込みを再度行います。 マウスホバーで、タイトルをモザイク状に表示。 See the
さらばjQuery！アニメーションをサクサク処理できるVelocity.jsの使い方
「jQueryのアニメーションが遅い」「CSSアニメーションは使いにくい」。そこでアニメーション処理の定番ライブラリー「Velocity.js」の出番です。基本的な使い方を一通り紹介しましょう。 本記事ではJulian Shapiroにより開発された高速かつ強力なJavaScriptアニメーションエンジン、Velocity.js（以降、Velocity）を紹介します。記事のコードやデモすべてに目を通せば、Velocityを使って自分のアニメーションが作れるようになり、サイトはさらにインタラクティブで使いやすいものになるでしょう。jQueryには頼らず、すべて素のJavaScriptだけで作ります。 この記事は『CSSライクでデザイナーに優しい！anime.jsはDOMアニメーションの新定番だ！』『HTMLもSVGもテキストも自在！DOMアニメーションの決定版「KUTE.js」が登場』の続編
UI Components libraries to build admin panels and dashboards · CoreUI
UI Components to Build Powerful Admin Dashboards FasterOpen Source UI components library for Angular, Bootstrap, React.js, and Vue.js CoreUI’s comprehensive set of UI components and premium templates help you kickstart your next project, saving you time and development costs. Get the flexibility of open-source plus the professional features your team needs.
2016年、ReactがAngularを抜いて1番人気に！ JSライブラリの利用意向はますます高まっている
← 前回 連載 INDEX 次回 → 依然としてJavaScriptライブラリの栄枯盛衰は、すさまじいスピードで進んでいる。2016年、本当に利用意向の高いJavaScriptライブラリはどれなのか。これを調査するため、Build Insiderではアンケート調査を実施した（※ちなみに、本稿とほぼ同じ質問内容のアンケート調査を毎年5月に実施している。この定点観測により、技術トレンドの推移を浮き彫りにしたいと考えている。その去年の結果はこちら）。 さっそくランキングをジャンル別に紹介していこう JavaScript関連全体の動向： 人気ジャンル フレームワーク関連： MV*などのJavaScriptフレームワーク／SPA（Single Page Application）開発の採用動向 各種アプリを支える技術＆ツール： altJS（JavaScript代替）／CSSプリプロセッサー（CSSメタ
The Boat | SBS
SBS acknowledges the Traditional Owners of Country throughout Australia
Smoothslides - ケン・バーンズ効果を使ったカルーセル MOONGIFT
最近はWebサイトにカルーセルを載せて写真をスライド表示するのを多く見かけるようになりました。大抵右から左に写真が流れていくものが多いのですが、あまり多いと見飽きてしまいます。これではせっかくの写真が印象に残りません。 より写真を強調したカルーセルを考えるならばSmoothslidesを使ってみても面白そうです。 Smoothslidesの使い方 Smoothslidesを使うと写真が単に表示されるだけでなく、上下左右にゆっくりと動きます。写真がより印象深くなるのではないでしょうか。 これはケン・バーンズ効果と呼ばれ、静止画に動きと生命を与える手法として知られています。AppleのiPhoto、iMovieなどでも実装されているものになります。写真を楽しむ上で欠かせないテクニックと言えそうです。 SmoothslidesはJavaScript製、Creative Commonsのオープンソ
Smoothslides Demo
By Kevin Thornbloom A responsive jQuery slideshow with beautiful panning effects. 1) Include CSS in your website's header <link rel="stylesheet" href="css/smoothslides.theme.css"> 2) Add your images to a div with a class of smoothslides. Also give the div a unique ID to differentiate it from other Smoothslides on the page. You'll get better results with images that are the same size. 3) Add the ja
Material Design Lite
Material Design Lite Material Design Lite lets you add a Material Design look and feel to your websites. It doesn’t rely on any JavaScript frameworks and aims to optimize for cross-device use, gracefully degrade in older browsers, and offer an experience that is immediately accessible. Get started now. Templates The MDL components are created with CSS, JavaScript, and HTML. You can use the compone
How To Enable HTML5 In Chrome | Robots.net
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
Bootstrapで日本語をより美しく表示させることにこだわった無料のテーマ -Honoka
Bootstrapは人気のフレームワークですが、日本語のコンテンツを表示するために最適化されているとは言えません。フォント指定・文字サイズをはじめ、日本語をより美しく表示するためのさまざまなアプローチを取り入れたテーマ「Honoka」を紹介します。 単に使用するだけでなく、他のものでも日本語を美しく表示させるのに役立ちます。 Honoka Honoka -GitHub 日本語フォントは、たくさんのフリーフォントがあります。 2017年用、日本語のフリーフォント 259種類のまとめ Honokaの特徴 Honokaのデモ Honokaのアプローチ -Bootstrapでの日本語表示最適化 Honokaの利用方法 Honokaの特徴 Honokaは、Bootstrapでより美しく日本語を表示させることにこだわったオープンソースのテーマファイルで、これをベースにWebサイトを作成したり、既にBo
2015年も注目したいCSSフレームワーク6選 | エバーセンス開発ブログ
”CSSフレームワーク”といえば「Bootstrap」が有名ですが、Bootstrap以外にも多くのフレームワークがあります。 特にGoogleのMaterial Designなども台頭してきたこともあり、今後はBootstrapにとどまらず、目的に合わせてフレームワークを使い分けながらデザインをしていく事が求められそうです。 そんな訳で、Bootstrapを代表としたCSSフレームワーク6選！を紹介したいと思います。 ENTRY NO:1 / Bootstrap http://getbootstrap.com/ 最早フレームワークの代名詞となったBootstrap。 twitter社が開発してフレームワークで、ver2からレスポンシブWEBデザインに対応した事が切っ掛けで一気に普及したようです。 CSSフレームワークの中では、最も多くの企業やサイトで採用されているので、そのUIを
material - マテリアルデザインを行うベースにどうぞ
Googleの提唱するマテリアルデザインはAndroidだけに止まらず広がりを見せています。特にWebデザインは相性が良いようで、フラットにしたけれどクリッカブルな場所が分からなかったり、あまりに簡素化されたデザインでかえってユーザを混乱させてしまうことがあります。 そんな時にマテリアルデザインを使うことでユーザビリティの高いサイトを構築できるでしょう。そこでベースに使ってみたいのがmaterialです。 materialの使い方 materialはフレームワークと言うよりもテンプレートに見えます。 materialはまさにGoogleでよく見られるようなデザインを作ることができます。グリッドなど、フレームワークによくある部品はありませんが、十分にこったデザインのサイトを作ることができるでしょう。 materialはHTML5/JavaScript/CSS3製のオープンソース・ソフトウェア
Web制作に使える！オシャレなサイトに見せるためのCSSやjQueryプラグインまとめ
作成：2015/03/2 更新：2016/06/29 Web制作 > 今風のサイトの動きやエフェクトを実現するために知っておくと助かるjQueryプラグインをまとめました。トレンドをおさえた最近のものや定番化しているものまで。ちょっとした動きを取り入れてオシャレなサイトを構築したい時に。 エンジニア速報は Twitter の@commteで配信しています。 もくじ インタラクティブ １．クリック時のエフェクト ２．フォームクリック時のエフェクト ３．テキストに１１種の動きを出すエフェクト ４．分離するエフェクト フルスクリーンの見栄えをよくする ５．フルスクリーン 縦スライド３つ ６．全画面+オーバーレイ ７．フルスクリーン背景＋ローディング ８．写真から背景色を抽出 ９．background-size 対策 ドロワーメニュー １０．ドロワーメニュー３つ スクロールエフェクト １１．スクロ
CSS3のFlexboxを基本から理解して、使い方をマスターしよう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、王です。デザイナーやってます。 今回は「Flexboxを基本から理解して、使い方をマスターしよう！」ということで、初耳の方でもざっとFlexboxで何ができるか分かるように短い動画を用意しました。 動画の中で使ってたデモをアップしたので、確認してみたい方は以下のリンクをどうぞ！ デモ 昨今では、当然ながらデジタルデバイスサイズの多様化でレスポンシブデザインとやらが流行っています。 同じサイトをさまざまなスクリーンサイズに応じたデザインをしなければならない上に、コーディングにも手間がかかります。制作側からしたら何かと厄介ですよね。 「なるべく手間をかけずに作りたい！」という世界中のデザイナーの声に応えて、「Twitter Bootstrap」をはじめとした数多くのフレームワークが徐々に脚光を浴びはじめて久しくなります。 ただ、これらはあくまで古い技術の組み合わせで、革新的な技術で
エンジニアがいい感じにフロントエンド開発を爆速化できる環境構築の手順 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
今年もHTML5 Minutesに登壇してきました。こんにちは、先生です。 当日は「フロントエンド開発スピードをあげるための環境を作ってみた話」をしてきました。 今回はその環境を使ってみるまでの手順を書いていきたいと思います。 必要なものをインストール NodeJS Gulp WebPack Bower PhantomJS NodeJSとGulpのインストールは過去の記事「Gulp.js入門 – コーディングを10倍速くする環境を作る方法まとめ」をご覧ください。 WebPackのインストール WebPackはさまざまな形式のモジュールを静的なファイルにまとめて出力してくれるツールで、拡張性が高く最近好んで使っています。 WebPack http://webpack.github.io/ インストールはnpmを使って簡単にできます。 npm install webpack -g ※ macは
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Hover Effect Ideas | Set 1
UIkit
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
