Webページの特定テキストへ直接ジャンプしてハイライトするリンクの作り方／「Chrome」「Edge」は標準機能で、「Firefox」は「Link to Text Fragment」拡張機能で【レビュー】
2021年にCodepenで話題！コピペ可なHTMLスニペット ベスト100発表
HTMLなどのコードをブラウザ上で確認ができ、公開や共有もできるなど、世界中のデベロッパーが愛用するCodepen。 この記事は、2021年に特に人気の高かったHTMLスニペットをランキング形式でまとめた The Most Hearted of 2021 が発表されていたので、その中でも実用性の高いHTMLスニペットを中心にまとめて紹介しています。 CSSのみで表現されたお手軽なHTMLスニペットから、Three.jsをつかったインタラクティブな動きやアニメーションにも注目が集まっています。 HTML/CSSやJSなどのコードの確認や編集を行うことができるので、今後のデザイン制作に活用してみてはいかがでしょう。 2021年にCodepenで話題！コピペ可なHTMLスニペット ベスト100発表 97位 Metallic Bordered Text with CSS Photoshopで作成し
クリエイティブコーディングの教科書
ゲームエンジンや3Dソフトウェアを利用して高度な表現ができるこの時代でも、プリミティブな描画や動き、アルゴリズムから学べることは多い。それらをJavaScriptで書くクリエイティブコーディングという形で学べる手引書が本書となる。
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も画像も使われていません。 複雑な幾何学模様系のアニメーションが多いです。 線が動く
VS Codeを使いこなせ! フロントエンジニア必須の拡張機能7選 - ICS MEDIA
「Visual Studio Code（略称：VS Code）」はMicrosoftが提供している無償で高機能なエディターです。標準でも十分な機能は備わっていますが、拡張機能をインストールすることで、より使いやすく自分にあったエディターへとカスタマイズできます。 本記事では、HTMLコーダーやフロントエンドエンジニアに役立つ拡張機能を紹介します。 1. IntelliCode IntelliCodeはMicrosoft謹製の公式プラグイン。AI支援による次世代のコード補完がJavaScriptやTypeScriptで利用できるようになります。APIの一覧がアルファベット順に提示されるのではなく、利用する可能性の高いAPIがAIによって予測されます。 コード補完の様子を次のスクリーションショットでご覧ください。入力候補の「★」マークが付いているところが、補完候補になっているところです。人工知
Vue.jsとHTMLとCSSで3Dアクアリウムを作ってみた - Crieit
ブラウザで見ることができる3Dアクアリウムを作ってみました。 この3Dの実装は基本的にはHTMLとCSSだけで出来ています。canvasも使っていません。Vue.jsも使っていますが、魚を泳がせたり視点を変更するための用途のため、3D描画自体にはあまり関係ありません。 記事の最後に操作できるCodePenを配置してあるので読むのが面倒な方はそちらを見てしまってください（大泣きしながら）。 作り方 HTML HTMLは単にそれぞれの素材を配置しているだけです。 <div id="app" @mousemove="onMouseMoved" @touchmove="onMouseMoved"> <div class="container" :style="rotation"> <img class="bg" src="bg.jpg"> <img class="water front" src=
若い世代が知らない2000年代のHTMLコーディングの地獄 - ICS MEDIA
ウェブの黎明期である2000年頃と比べてはるかにHTMLはコーディングしやすくなりました。10〜20年前のHTMLコーディングはどのようなものだったのでしょうか。 この記事では、NetscapeとIEのブラウザ戦争に決着がついた後の、IE6が全盛期となった2000年代のウェブサイト制作を振り返ります。懐かさに浸たり、現代のウェブの成り立ちに通じる温故知新な情報として参照ください。 テーブルレイアウト / spacer.gif XHTML・CSSが普及するまではテーブルレイアウトが一般的でした。テーブルレイアウトとはtableタグを使い、格子状にレイアウトしていく手法です。テーブルレイアウトは、デザインファイル（Image ReadyやFireworks）から画像を切り出す「スライス機能」と相性のいい方法でした。 <table border="0" cellspacing="0" cellp
フロントエンド技術を導入した Java ウェブアプリケーション開発 | hiromasa.another :o)
Visual Studio Code Advent Calendar 2017 の 11日目の記事です。 🙂 今年の自分は Java と PHP と JavaScript と電子工作の年だったような気がするのですが、そんな中、全てにおいて随分お世話になりました VS Code。Microsoft から Arduino 拡張がリリースされたのが一番驚きました。 ということで、今日より 3日間 VS Code について書いていこうと思います。まず最初は Language Support for Java(TM) by Red Hat（vscode-java） から。「フロントエンド技術を導入した Java ウェブアプリケーション開発」です。 この記事では VS Code で Java とフロントエンド系の開発を行うサンプルプロジェクトを準備しました。 簡単な操作で昨今のフロントエンド技術を使
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」が登場』の続編
【意訳】Webpackの混乱ポイント - Qiita
この記事はWebpack — The Confusing Partsを、筆者の許諾を得て意訳しています。 何か誤りがありましたら、ご指摘いただけると幸いです。 (以下、訳) ReactとReduxで作られたアプリケーションにとって、Webpackは最先端を行くモジュールバンドラです。Angluar2やその他のフレームワークを使っている人々は、たいへんWebpackのお世話になっていることでしょう。 私が初めてWebpackの設定ファイルを見た時、それはさながら宇宙人のようで非常にわかりづらく見えました。しばらく試しているうちに、今では次のように考えるようになりました。Webpackは単に独特のシンタックスと新しい哲学を持っており、それがとっつきにくさの原因になっているのだと。偶発的とはいえ、これらの哲学は、Webpackの人気を押し上げた原因の１つでもあります。 Webpackのとっつきに
SPAじゃなくてもWebpack導入（ファイル監視&自動リロード + レガシーブラウザ対応 + JS最適化 + ES2015(ES6) + SCSS + ESLint） - Qiita
Septeni Originalの大久保です。 世間ではSPAが流行ってるかと思います。 ただHTMLのレンダリングはサーバー側で行うケースは以前多いのではないでしょうか？ 現在自分が携わってる新規プロダクトでモダンなフロントエンドの技術（WebapackやES2015など）を使いつつ、HTMLレンダリングはサーバーに委ねるようなアーキテクチャ（Multi Page Application）の調査を行ったので、そこでの知識を備忘録的にまとめたいと思います。 今回作成したコードはGithubにあげているので、興味あればご参照ください。 Github URL：https://github.com/yoppe/webpack-es2015-base-for-play #やりたいこと バックとフロントのGitリポジトリを分けずに作る。 ⇒ リリース時などにバックとフロントを別々にリリースしたりデプ
今時のフロントエンド開発2017 (1. 愚痴編) - Qiita
良いものを書きたいので指摘などは大歓迎です。 その際はコメントや編集リクエストをいただければ修正します。 大きな変更が加わるときは通知すると思います。 はじめに これまでのフロントエンドの開発には多くの問題や面倒ごとを抱えています。 その解決手段としてよくビルドツールやaltJSといったワードを目にしますが，これらがどういった目的で利用されているのかについて触れながら進めていきます。 主にパッケージ管理やビルドツールを初めて見る人向けになっているので全編通すとそれなりに長いです。 動かすまでが長めになっていますが理解してしまえば本当に必要な手順はさほど多くありません。 実際に開発を始めるために必要な準備はせいぜい1~2つのファイルを記述してコマンドを数回叩く程度なので，過度な抵抗感を持たずに読んでいただけたらなと思います。 登場するツールや技術は多くの問題を解決してくれますが，これらは飽く
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メタ
React＋CSSフレームワークを検討してみたよ - Qiita
React使いつつも、既存のCSSフレームワークを何か載せようと思っていろいろ調べたメモ。 あくまでもReactとの親和性などに絞って選んでます。 Bootstrapは何か「出、出〜〜〜！！Bootstrap奴〜〜〜！」ってなりそうだったので、最後の砦として触れてません。 Material-UI 一番Reactに寄り添って出来ている。 以下のように必要なコンポーネントをimportしてrender()内で使うだけ。 実際触ってみると非常にお手軽で、動きのクォリティも高かった。 余計な外部ファイルも読む必要がなくて綺麗。 その分かなりカッチリと仕様が決まっているので、少し手を加えたい場合は さらにMaterial-UIコンポーネントをラップするオリジナルコンポーネントを作れば拡張はできる。 // タッチ・クリックの挙動のために必要っぽい import injectTapEventPlugin
Reactとかgulpとかfirebaseとか色々いじってみた - satococoa's blog
色々一気にやりすぎてちょっとパンク気味ですが、以下のリポジトリにおいて最近興味があったものを色々試してみました。 iOSやAPIサーバの仕事ばかりやっている間に大きく遅れてしまったWebのフロントエンド技術にキャッチアップしたいというのが狙いです。 satococoa/react-firebase-chat · GitHub 今できているものは単純なチャットアプリみたいなものです。ページングとかは手を抜いています。 試してみたこと一覧 React Firebase Web Starter Kit Bourbon Reactは最近流行りのJSのライブラリですね。最近仕事でVue.jsを導入してみてとても良い感触を得ているのですが、それと比べてどうなんだろう？という比較もしたいと思い。 FirebaseはいわゆるMBaaSの一つで、だいたいParseと同等の機能があるようですね。Firebas
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Hover Effect Ideas | Set 1
CSSで面倒なコード、HTML5の新要素やスニペット、FacebookのOGPやTwiterカードなどのコードを生成できるオンラインツール
http://buchineko.website/chrome-devtools-cording/
