Web制作者必見！ VS Codeのおすすめ機能拡張のまとめ、HTMLやCSSやJavaScriptのコードを書く時に便利
Visual Studio Code（以下、VS Code）が素晴らしいエディタである理由の一つは、デベロッパーの生産性を向上させるVS Codeの機能拡張の巨大なライブラリがあることです。 その中から、HTMLやCSSやJavaScriptのコードを書く時に便利なVS Codeの機能拡張を紹介します。 My 12 Favorite VSCode Extensions by Katherine Peterson 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 VS Codeとは VS Codeの機能拡張 VS Codeのおすすめ機能拡張 VS Codeとは VS Code(Visual Studio Code)は、Microsoftが提供する統合ツールを備えた強力で軽量なコードエディタです。MITライセンスで、商用でも完全に無料
現代ウェブフロントエンド（ウェブアプリケーション）について理解する唯一の方法｜erukiti
この記事は、ウェブ技術の開発者（Java, PHP, Ruby, Go... 全て含む）のうち、少しでもJavaScriptを触ったことがあるけど、現代ウェブフロントエンドというか、特にウェブアプリケーション —— React, Vue, Angular など—— が分からない人に向けて、たったひとつの理解方法を提示するものです。 追記: ちなみに果てしなくどうでもいいですが、今回の記事が記念すべき100記事目らしいです。（Noteさん！その手のヤツはいっそ自動で記事にバッヂを表示するとかしてくれるとうれしいです！） 対象読者は、Java, PH(以下略）などのコードと一緒に、ほんの少しでもJSのコードを触った、見たことがあるというレベル感の人なので、既にReact, Vue, Angular などでガリガリコードを書いている人は対象ではありません。 あとホームページ屋さんとかウェブコーダ
HTMLとCSSも進化している！JavaScriptを使用せずに、HTMLとCSSだけで実装できるUI要素のまとめ
以前まではJavaScriptでないと実装できないと思われていたものも、最近ではHTMLとCSSのみで実装できるものが増えてきました。HTMLとCSSには新しい機能が追加され、そして古いブラウザのサポートも必要なくなり、より簡単に実装できます。 実はJavaScriptを使用せずに、HTMLとCSSで実装できるUI要素を紹介します。 You can create these elements without JavaScript by Adrian Bece (@AdrianBDesigns) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに レスポンシブ対応のテキスト省略 スター レイティング ツールチップ・ドロップダウンメニュー モーダル フロートするラベル アコーディオン・トグル 終わりに はじめに スマホやWeb
フロントエンドのコーディング課題６選-このフロントエンドの課題、実装できますか？ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? こちらの記事は、Indrek Lasn 氏により2019年 10月に公開された『 Here Are 6 Front-End Challenges to Code 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 著者Twitter https://twitter.com/lasnindrek フロントエンドの開発はストレスが多く難しい作業ですが、練習すれば技術をマスターすることができます。 自ら進んで鍛錬と努力をすれば、フロントエンド開発の場面で問題を解決することのエキスパートとなることができるでしょう。 優れたフ
Front-end Developer Handbook 2019 - Learn the entire JavaScript, CSS and HTML development practice!
Written by Cody Lindley Sponsored by Frontend Masters, advancing your skills with in-depth, modern front-end engineering courses Download: PDF | epub Overview: This is a guide that everyone can use to learn about the practice of front-end development. It broadly outlines and discusses the practice of front-end engineering: how to learn it and what tools are used when practicing it in 2019. It is s
コンテンツがスクロール可能な場合にヒントを表示する ScrollHint の設定とカスタマイズ方法 | OSS | スタッフブログ | 名古屋のCMS構築・Web制作会社 アップルップル
レスポンシブデザインの普及により、デバイスの画面サイズに合わせてコンテンツを動的に調整することが一般的になりました。しかし、このアプローチは、特に ＜table＞要素などの広いコンテンツを含むページで課題を生じさせることがあります。 スマートフォンのような狭い画面では、重要な表データを見やすく表示させることが難しく、収まらない部分をスクロールさせることで解決できないかと考え、その際にスクロールできる事を気づいてもらうために、私たちが開発したのがユーザーに視覚的なヒントを提供するJavaScriptライブラリ「ScrollHint」を作りました。 2018年にリリースし、今では多くのサイトで「スクロールできます」を見かけるようになりました。ありがとうございます。また Google や X で ScrollHint を検索してみると、ブログの記事 や 感想の POST を見つけることができ、大
[CSS]pointer-eventsプロパティですごい便利に！クリックやホバーのターゲットになる要素を変更するテクニック
CSSのプロパティ「pointer-events」は主に、要素のクリックイベントをキャンセルするために使用されます。しかし用途はそれだけではありません、 クリックやホバーなどで要素のスタイルを変更する際、通常その要素自身がトリガーでターゲットになりますが、「pointer-events」を使用すると、子要素をトリガーに定義できます。今まではJavaScriptを使用しないとこういったことは実装できませんでしたが、ピュアCSSで簡単に実装するテクニックを紹介します。 Stuff you can do with CSS pointer events pointer-eventsは、要素に対するホバーやクリックなどのマウスイベントをキャンセルできるプロパティです。初期値は「auto」で通常通りホバーやクリックのイベントを受け取りますが、「none」を指定するとイベントを受け取りません。
![[CSS]pointer-eventsプロパティですごい便利に！クリックやホバーのターゲットになる要素を変更するテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/3abe6226aaa63d2d34d23f22fd074a83c59dc310/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018072601.png)
どんな背景でも自由に描ける! CSS Paint APIの使い方 - ICS MEDIA
最近のChromeにはCSSの新機能が次々と搭載されています。2017年にはCSS Grid Layoutなどインパクトの大きい新機能が話題になりましたが、他にも有用な新機能があることをご存じでしょうか？ この記事では、CSS Paint APIを紹介します。 CSS Paint APIはグラフィックを描く機能 CSS Paint APIは自由にグラフィックを描ける仕様です。HTML Canvasのようなものを要素の背景画像（background-imageやborder-image）として設定できます。JavaScriptを使って自由にグラフィックを描けるため、従来のCSSで再現の難しかった表現が実現可能になります。 たとえば、次のようなビジュアルを考えてみましょう。四隅の形状が欠けたような表現となっています。従来のCSSではdivタグを複雑に組む必要がありました。 サンプルを別ウインド
フロントエンドの「想定外」に対応する考え方とTipsいくつか
とても個人的な話ですが、ここ最近で自分自身のプライバシー意識の高まりを感じて、ブラウザの設定を見直す機会がありました。見直したのはCookieの設定で、許可したドメインにしかCookieを記憶しないようにしました。設定変更によるある程度の不便は覚悟していました。とはいえ、ま〜せいぜい、初回アクセスの時のモーダルが何度も出るようになるとか、ログインできなくなるとか、そのくらいかなと思っていました。 しかし実際は、悪い意味で期待を裏切られることになりました。 Cookieが無効なだけで、“全く”動かなくなってしまうウェブサイトやウェブアプリが、本当にたくさんあることに気づいたのです。 全く動かなくなってしまう原因は単純（後述）だったのですが、ちょっとした対処で簡単に直せることなのに、サイト全体が一切使い物にならなくなってて、もったいない！！ と思いました。 フロントエンドの想定外 ウェブサイト
Parallax scrolling with CSS variables | basicScroll
Standalone parallax scrolling with CSS variables basicScroll allows you to change CSS variables depending on the scroll position. Use the variables directly in your CSS to animate whatever you want. Flexible animations Animate everything you want with CSS variables and CSS properties. Or use JS to get even more control over your animations. Insane performance Small, modern and framework independen
Micron.JS - a [μ] microInteraction Library
Add Interaction Easily add an interaction to the DOM element with data attributes. You can add the click interaction to every element whether it's Button, SVG or a Paper. Add Interaction to the element with data-micron="interaction" Control Interaction's duration with data-micron-duration="number" Control Interaction's timing-function with data-micron-timing="type" Read Docs Bind Interaction Easil
![Micron.JS - a [μ] microInteraction Library](https://cdn-ak-scissors.b.st-hatena.com/image/square/81e1688be0bdbeea6a1a8d1b185ca66351270e8d/height=288;version=1;width=512/https%3A%2F%2Fwebkul.com%2Fblog%2Fwp-content%2Fuploads%2F2018%2F01%2Fmicron-card.png)
CSSだけでも実装できる！ページ内アンカーやページ上部にアニメーションでスクロールさせるCSS, JavaScriptのまとめ
ページ内のアンカーやページの上部にアニメーションで、スムーズにスクロールさせるCSS、単体のJavaScript、Vue.jsやjQueryのプラグインを紹介します。 現在では、CSSだけでも実装できるようになりました。IEは例のごとく非対応ですが、ポリフィルがあるので利用できます。 イラスト: Girls Design Materials CSSでページをアニメーションでスクロールさせる JavaScript単体でページをアニメーションでスクロールさせる プラグインでページをアニメーションでスクロールさせる CSSでページをアニメーションでスクロールさせる CSSのプロパティ「Scroll-behavior」を使用すると、アニメーションを使用してスムーズにスクロールさせることができます。 Scroll-behaviorのサポートブラウザ scroll-behavior -MDN web
CSSコーダーにとっての2018年のコーディング事情。アンケート結果から分析するイマドキのウェブ制作 - ICS MEDIA
CSSコーダーにとっての2018年のコーディング事情。アンケート結果から分析するイマドキのウェブ制作 ウェブ業界の当たり前だと思っていることでも、同業他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか・・・ この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載第4回目となる本記事ではウェブ業界の「CSSコーダーにとっての2018年のコーディング事情」と題してアンケート結果を紹介します。アンケートは筆者のTwitterから実施していたものです。 CSSのベンダープレフィックスは今も付けてますか？ ブラウザのサポートが拡大し、多くのCSSプロパティでベンダープレフィックスの記載が不要になってきました。みなさんは今もベンダープレフィックスを書いているのでしょうか？ 309票の回答があり「ごく一部のものに付けてる」が38%、「なるべく付けて
デンソー ブランドサイト
未来は語るものでなくて、つくるもの。デンソーが培ってきた、モノづくりの魂を、これからもこれまで以上に大切にし、これからも新しい価値を創造し続けるために。私たち自身を、そしてブランドのアイデンテティを見つめなおしました。すべては、より良い未来を次世代に届けるために。
株式会社八百彦本店 | 名古屋で創業290余年。仕出し弁当、宅配弁当をお届けいたします。
カジュアルに尾張名古屋の食文化と300年の技と想いを楽しむ。 和のフードホール“食楽堂”「蓬左<hōsa>」内に誕生した 江戸時代より約300年続く老舗仕出し料理屋「八百彦本店」の新ブランド。 創業の頃より変わらぬ技と想いを、お気軽にお楽しみいただけます。 四季折々の景色と旬の味覚が楽しめる由緒ある和食処 尾張徳川家の文化財を収蔵する徳川美術館。その敷地の一角に宝善亭はあります。 江戸より続く歴史と文化、そして季節ごとにかわる風情と旬の味覚が、 お客様の大切な人と過ごす優雅で心豊かなひとときを演出します。 最大50名まで座れる貸座敷でゆっくりとお寛ぎください 法要・会合・各種宴会などにご利用できる貸座敷です。 お座敷、テーブル席など、６～７人ほどの個室から 最大50名が座れる大広間まで幅広くご用意しております。 八百彦本店の仕出し料理やお飲み物のご提供もさせていただきます。
ウェブデザイナーが試したい、Webアニメーション無料プラグイン＆ライブラリ75個まとめ【保存版】
アニメーション（英: Animation）は、ウェブデザイン制作で必要とされる人気トレンドのひとつです。かろうじて気付くような控えめなローディングから、映画のような体験を提供するページ遷移まで、あらゆるデザインに採用されています。 ウェブサイトへのアニメーション実装を検討しているデザイナーには、無料プラグインが豊富に用意されています。デザイン的要素の強いものから、ユーザーエクスペリンスを向上させるものまで、さまざまなアニメーションを作成できます。 今回は、ウェブデザイナーが確認しておきたい、アニメーション用プラグインとライブラリ75個をまとめてご紹介します。利用するケースやアイデアに応じて、これらの素材を活用してみましょう。 ウェブデザイナーが試したい、ウェブアニメーション無料プラグイン、ライブラリまとめ 01. Animate.CSS Animate.CSS は、クロスブラウザ対応の基本
slick - the last carousel you'll ever need
Features Fully responsive. Scales with its container. Separate settings per breakpoint Uses CSS3 when available. Fully functional when not. Swipe enabled. Or disabled, if you prefer. Desktop mouse dragging Infinite looping. Fully accessible with arrow key navigation Add, remove, filter & unfilter slides Autoplay, dots, arrows, callbacks, etc... Single Item
CSSやJavaScriptで実装された、2016年に人気が高かったテクニックのまとめ -Top Pens of 2016
世界中の多くのWeb制作者・クリエイターが利用しているCodePenから、CSSやJavaScriptを使って実装された2016年にもっとも人気のあったデモを紹介します。 Top Pens of 2016 on CodePen Top Pens of 2016では、人気が高かったスゴ技が100個紹介されており、その中からベスト10を紹介します。 当ブログで紹介したものもいくつかあり、初見のものいくつかありました。 I DESIGN WITH CODE ❤ 10位は、Creogram animatedの動画にインスパイアされて実装されたSVGアニメーションのデモ。動きだけでなく、見せ方もうまいです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
今どきのスムーズスクロール(2019年版)
2019年までに見直しておきたい
CSS・JavaScriptの手法 - Speaker Deck
