※前編がこちらにあります 目次 icon links inputs keyboard navigation navigation menu modals prefers-reduced-* “skip” links SVGs tabs tables toggle switches tools tooltips video/audio players アクセシブルなインプット 2019年、WebAIMは上位100万件のWebサイトのアクセシビリティを分析し、エラーがないページの推定割合は1%未満というショッキングな結論に到達しました。アシスティブテクノロジー（支援技術）に頼っている人にとってインクルーシブで使いやすいサイトを作成するには、セマンティックHTMLの基礎を正しく理解する必要があります。Oscar Braunertのインクルーシブなインプットに関する記事は、彼の「小さく始めて共有・
Webサイトにモーダルは必要か
これは備忘録であり、閉じた空間で話したことをオープンにしたいと思って公開している記事です。文字起こしでありません。 経緯としては、僕がモーダルの不満をツイートしたのがキッカケで、情報設計の分野の大先輩の稲本さんに、とりあえず不満を聞いてもらいつつ、いっしょに意見を整理させてもらった。 定義 ここでいうモーダルは、「モーダルダイアログ」のことで、他の操作を受け付けない状態、つまり文字通りモード状態になるもの。基本的に全面に被さるダイアログが現れてその他の操作はそれをを閉じるまで不可能になるインターフェイスと定義する。 Webアプリはわかる、しかしWebサイトのそれはわからん まず前提として、Webアプリケーションにおけるモーダルの有用性や必要性は理解できている。そもそもGUIが誕生した初期から存在していて、WindowsやmacなどのOSでも要所々々で今でも採用されているインターフェイスだ。
何がjQueryを負債たらしめているのかを考察する | yamanoku Advent Calendar 2023
何がjQueryを負債たらしめているのかを考察する この記事はyamanoku Advent Calendar 2023の12日目の記事になります。 現代のフロントエンド技術的負債の要因となっているものはいくつかあると思いますが、その中でも共通で「jQuery」が挙げられるかなと思っています。長期間運営されているサービスであればまだまだ現役なのではないでしょうか？かくいうウチもそうです！ 2023年現在でのフロントエンド開発であれば今は新規でjQueryを選択肢としてあげることはほとんどないと思っていますが、今よりもJavaScriptのサポートが貧弱だったころ、かつてのブラウザ間の齟齬を吸収する点で大変重宝されていたようです。 JavaScript自体が進化してきたのもあり、jQueryでできた表現が単体のJavaScriptとWeb APIとで表現できるようになってきている1ので
Pop!_OSに移行する「11の理由」｜Histone
母艦のUbuntuデスクトップと併用して、ここ暫くPop!_OSをラップトップで同じくらいの頻度で使っていました。結果、デスクトップのほうもPop!_OSに移行することにしました。ZBrushやBlender、3Dプリントなどのモデリング環境も含め全てPop!_OSへ全面移行です。 (※ちなみに私のメインOS変遷) ・Mac OS ・Mac OS X ・Ubuntu ・macOS ・Windows ・Ubuntu ・Pop!_OS（←いまココ） Pop!_OSはただのUbuntuクローンではない使い込んでいくうちに確信に変わっていったこと。それは、 「Pop!_OSはただのUbuntuクローンではない」 ということです。 実は最初、私は「Ubuntuベースの派生OSのひとつ」というイメージを持っていました。なのでメインではなくサブ的に使う予定でした。ところが、使いながら色々調べていくうちに
Franken UI
Home Changelog About Examples Blogs Getting Started Introduction Installation JavaScript Web Components Dark Mode Hooks Theming Typography Accessibility UIkit Components Accordion Alert Align Animation Article Background Badge Breadcrumb Button Card Close Column Comment Container Countdown Cover Description List Divider Dotnav Drop Dropbar Dropdown Dropnav Filter Flex Form Grid Heading Height Icon
CSSのみでモーダルウィンドウを作成
jQueryなどのJavaScriptを使って作成することが多いモーダルウィンドウですが、CSSのみでも作成することが可能です。 JavaScriptが使えない制作環境での実装におすすめです。 モーダルウィンドウの実装イメージモーダルウィンドウの実装イメージ本記事で実装するLightbox風モーダルウィンドウのイメージです。 実装するモーダルウィンドウの特徴jQuery、JavaScript不使用jQuery、JavaScriptを使わず、HTMLとCSSのみで実装します。 <inputタグ> 、<labelタグ>不使用<inputタグ>、<labelタグ>で実装するモーダルウィンドウもありますが、本記事のモーダルウィンドウはCSSの:taget擬似クラスを利用しています。 Yahoo!ショッピングの商品ページなど、 <inputタグ>使用不可の制作環境でも利用できます。 レスポンシブ対応
[レベル: 上級] 多くのサイトが AMP のサポートを打ち切り始めています。 AMP に明るい未来はあるのでしょうか？ Twitter も AMP サポートを終了 Twitter は、2021 年の第4四半期に AMP のサポートを終了することを AMP に関する開発者向けページで告知しています。 この機能 (AMP) のサポートを私たちは終了するプロセスにあり、2021 年第4四半期には完全に使わなくなる予定です。 ツイート内のページが AMP 対応していても今は通常ページに連れて行くように仕様がすでに変わっているようです。 これまでは、AMP バージョンのページがあれば Twitter はそちらを表示していました。 Search Engine Land も AMP をやめました。 もっと有名どころでいうと、Washington Post もいつの間にか AMP 配信を終えていたようで
Webアプリを個人開発した時に使用した便利なJavaScriptのライブラリを5つ紹介する - Qiita
はじめに 個人でWebアプリを開発した際に使用したJavaScriptの便利なライブラリを紹介します。 HTML/CSS/JavaScriptの知識があれば公式サイト見たり、ググったりすれば移植できます！ 目次 1.グラフを書きたい！=Chart.js 2.並び替えができる表を作成したい！=List.js 3.画像を自動再生するスライドショーを作りたい!＝VEGAS2 4.モーダルで画像を表示したい!=Lightbox 5.カンバンボードを作成したい！=Muuri 6.最後に グラフを書きたい！=Chart.js Chart.js は棒グラフ、折れ線グラフ、円グラフなどを簡単に画面に表示できるようになるライブラリです。 公式サイト デモ 以下のようなグラフを表示できます。 棒グラフ 折れ線グラフ レーダーチャート サンプルコード 円グラフを表示するコードです。 See the Pen Un
WordPressを使っているけど、デザイン性の高いページを作りたいページビルダープラグインを使ってみたいけど、どれがオススメなのか教えて欲しい と思ったことはありませんか？今日は、そんなあなたにElementor（エレメンター）という、無料で使えるWordPressの専用のページビルダープラグインをご紹介します。ちなみに、普段僕も、実際に使っていて、結構なヘビーユーザーなので、その実体験を元にご紹介していきます。 Elementor（エレメンター）とは？ Elementorは、無料で使えるWordPressのページビルダープラグインです。海外では有名で、たくさんの人が使用しています。通常、WordPressのサイトは、テーマごとに書式やレイアウト等が決まっています。でも、Elementorを使うことによって、テーマのデザインに依存しない綺麗なデザインのページを作成することができます。ただ
このメンバーで2週連続でどこかへ行くというのは、とても珍しいことですが、どうしても今年中にテントを決めたいと言う事で「意見を聞かせて！」ということでした。 と言っても、私は全然アウトドアには詳しくありません(;´Д｀) テントの種類も最近調べたりし始めただけで、本当に長所や短所もこれまでは全く知りませんでした。 お2人の買いたいテントは「コットンテント」？？という分類の居住性が高いテントという種類のようです。 先週アウトレットパークでは、「Springbar」というアメリカのメーカーのテントを検討していたので、そこは固いのかなと思いました。 「女性の友達とかも誘いやすいようにしたい」と言う部分もありそうです！(笑) おばちゃんの意見で良ければということで今週は国内のメーカー「ogawa（オガワ）」のテントをメーカー直販も行っている小平の展示スペースに見にいきました。 ↑ 1階の展示スペース
Taylor Swift is not just a pop icon; she's an economic powerhouse of epic proportions. When Taylor Swift comes to town, excitement grows, and cash flows. In fact, Swift is so influential that she has even birthed a new branch of economics called "Swiftonomics." Her current tour, the Eras Tour, has proven to be a veritable goldmine for host cities around the world, generating hundreds of millions i
InstagramをウェブサイトやWordPressに表示させたり、WordPressの記事を自動的にInstagramにも投稿させる方法など、Instagramの連携方法をご紹介します。 「ホームページにインスタグラムの写真を表示したい」 「ブログを投稿すると、インスタグラムにも自動で投稿したい」 と言ったケースは多いと思います。 ホームページとインスタグラムの連動についてベストな方法をご紹介いたします。 ホームページとインスタグラムの連動させる事前確認 SEOの影響 表示する枚数やキャッシュ機能、LazyLoadなどを利用することで、素早く表示させることができます。 instagramの写真を表示させることで、ホームページの表示速度が遅くなり、SEOへの影響を気にされる方もいますが、当社の事例や、海外の事例をみても影響はありません。 ただし、サイトスピードテストには影響するため、点数が
A Complete Guide To Accessible Front-End Components — Smashing Magazine
In a new short series of posts, we highlight some of the useful tools and techniques for developers and designers. Recently we’ve covered CSS Auditing Tools and CSS Generators, and this time we look into reliable accessible components: from tabs and tables to toggles and tooltips. Table of ContentsBelow you’ll find an alphabetical list of all accessible components. Skip the table of contents, or j
調子どうですか。 これから新築で無垢の床を検討中なんて方、絶対気を付けておくんなさいよ。 急に一体なんですか。 施工中に多用されるであろう養生テープ。 こいつの 無垢床材への直貼り！ いや、何をギャンって言っとるんすか。 常識ですわ。 って方、そーゆーとこちゃんとやる建築業者なりでお建てになられる方は、今回の話はまるっきり雑音でしょうか。 わたくしの場合はこれガッツリとテープ跡が残りまして・・・。 こんな感じ。 場所によっちゃ併走してみたり。 こんなのが無垢床の４部屋と玄関なり廊下なりの端っこ全周に及んどる。 地味にくらうカッコ悪さ。 コレ、もちろん引き渡しのときにわたくし言いましたよ。 「この跡っていつ落とすんですか？」 ハウスクリーニング後なのに、わたくしもとんちんかんなこと質問しますわ。 sameo-japan.hatenablog.com 「これは、住んでるうちに消えますからご安心
GROWI に draw.io 連携機能を PR (Pull Request)して v3.7.0-RC としてリリースされた話 - Qiita
GROWI に draw.io 連携機能を PR (Pull Request)して v3.7.0-RC としてリリースされた話JavaScriptMarkdownReactDraw.ioGrowi はじめに GROWI に draw.io 連携機能を実装して Pull Request し、無事マージされて、バージョン 3.7.0 RC(Release Candidate) としてリリースされました！ (今は docker image のみ提供されてます) weseek/growi Add draw.io Integration #1685 使い方のドキュメントはこちらです。 draw.io で様々な図を作成する | GROWI Docs この記事では簡単な機能紹介と実装のモチベーション、どうやって実装したかなどをお話しようと思います。 GROWI って何？ 株式会社 WESEEK が OS
【JavaScript】Swiper.jsを使ってjQuery要らずのスライダー - ABCウェブエンジニアblog
ウェブサイトではトップ画面などによくスライドショー/スライダーを見かけますよね。 でもHTML/CSSだけではスライダーは実装出来ません。 なるべく簡単に実装できるよう、私もよく利用するSlick.jsやbxSliderなどのプラグインがありますが、jQuery必須だったりします。 jQueryはJavaScriptを拡張したものです。 JavaScariptもままならないのにjQuery？？という方、、、困りますよね。 今回はできる限り素のJSを利用したいという方や、HTML/CSSと学んで次にスライダーをとにかく実装できるようになりたいという方にjQuery不要の「Swiper.js」導入方法を解説したいと思います。 プラグインとは何か？jQuery？ まだHTML/CSSしか学んだことがないという方であればまずプラグインとは何？というところかもしれません。 簡単にいうと、追加で機能を
モーダルであるかどうかにかかわらず、ほとんどのオーバーレイは間違ったタイミングで表示され、重要なタスクの最中にユーザーの邪魔をし、わかりにくい言葉が使われ、ユーザーが自分の位置を見失う要因となっている。 Popups: 10 Problematic Trends and Alternatives by Anna Kaley on June 30, 2019 日本語版2020年2月17日公開 何十年もユーザー調査をおこなってきてわかっているが、ユーザーはポップアップやモーダルが好きではない。最近、実施したユーザビリティ調査で、私はこの事実を思い出すことになった。タスクを完了しようと努力していた参加者が、ポップアップが何個も立て続けに出てきたとき、自分の携帯電話をテーブルの反対側に放り投げたのである。彼は失望してタスクを放棄し、その組織に対して非常に悪い印象をもったまま、Webサイトから離れて
Webサイトやアプリなどのソフトウェア開発において、ユーザーのアクション・操作に対して何らかのレスポンスを返す、という相互的なUIを実装する機会があります。 こうしたUIに対し見た目先行で仕組み・機能への理解が足りないのか、疑問符のつく使われ方を見ることが割とあります。デザイナーであっても開発実装者であっても、そのUIの原型がどういった目的や仕様で生み出されたものなのかを調べるなどして、適用前に一度問い直してみることは大事かなと思います。 モーダルダイアログ (モーダルウィンドウ)とは？ なかでもよく誤用されるパーツの例として、今回は「モーダルダイアログ(モーダルウィンドウ)」を取り上げます。以下が大まかなモーダルダイアログの基本仕様です。 アクションを実行すると画面最前面にウィンドウが現れ、選択肢を選ぶ、文字入力する、閉じるなど何かの操作をユーザーにさせる 別ウィンドウが表示され操作が終
GitHub - timlrx/tailwind-nextjs-starter-blog: This is a Next.js, Tailwind CSS blogging starter template. Comes out of the box configured with the latest technologies to make technical writing a breeze. Easily configurable and customizable. Perfect as a re
Demo Blog - this repo My personal blog - modified to auto-generate blog posts with dates Karhdo's Blog - Karhdo's Blog - Karhdo's Coding Adventure (source code) ben.codes blog - Benoit's personal blog about software development (source code) tsix blog - A front-end engineer is used to record some knowledge points in work and study 中文 SOTO's Blog - A more personalized personal website upgraded from
画像をポップアップ風に拡大表示できるライトボックスのJavaScriptライブラリ | HPcode（えいちぴーこーど）
Lightboxのダウンロード 以下にアクセスしてください。 ダウンロード先 → Lightbox 「DOWNLOAD」ボタンからダウンロードできます。 いろいろなファイルが入っていますが、使用するのはdist内のファイルだけです。 Lightboxの使い方 Lightboxの使い方はめちゃくちゃ簡単です。 distフォルダ内のCSSファイル、JavaScriptファイル、imagesフォルダを移動して、画像のリンク先を指定したaタグを用意するだけになります。 CSSを<head>内に読み込みます。パスはご自身の環境に応じて変更してください。
YouTube動画をブログのアイキャッチ画像にする方法！
ここあです。 少し気が早いですが、2021年以降は世の中に5Gが浸透してくると いよいよ動画の時代になってくるかと思います。 とは言え、これからインターネットを使ってビジネスをするなら ブログやメルマガ、LINE、SNS 、動画など様々なツールを使って クロスメディア的に仕組みを構築していく方が効果的です。 なので、私はまだYouTubeこそ始めてませんが、 いずれにしても、動画コンテンツという形で コンサル生向けに動画を作ったりはしています。 そういう意味では、これから先、ブログの使い方も ただ記事を書いて読んでもらうというだけではなく、 例えばですが、同じ内容のものを 1つは動画コンテンツ1つはラインティングコンテンツ（記事）こんな感じで用意しながら運営すれば、 通勤電車の中で記事を流し読みしたい人、 動画の音声だけで聴きたい人、 それぞれ両方のニーズを満たすことができますし、 ブログ
Adobe製品やOffice製品には、よく使うショートカットキーをまとめたチートシート(早見表)があります。だいたい印刷してA4用紙1枚ほどのコンパクトさで、壁に貼っておくと便利であります。Davinci Resolveでも似たようなものがないかと探したものの、見当たらなかったのでレッツ制作!! ……というものの、Davinci Resolveは巨大すぎるソフトウェアです。完成したチートシートを見るに、どうにも紙幅が足りず初心者向けになってしまった……。ので、今度は逆にショートカットキー全録を作ってしまうか。と思ったらアレヤアレヤと今度は膨大に。どうにもちょうど良い塩梅は難しい。 よって、早見表としてのチートシートと、よくばりさんの為のショートカット全録。両方載せておきます。 チートシート全貌 Mac版とWindows版の2枚を作りました。どちらも書かれている内容自体は同じです。自分の検証
Press Enter, and JHipster will create your app in the current directory and run npm install to install all the dependencies specified in package.json. Verify Everything Works with Cypress and KeycloakWhen you choose OAuth 2.0 and OIDC for authentication, the users are stored outside of the application rather than in it. You need to configure an identity provider (IdP) to store your users and allow
アシアル鴨田です。 とあるプロジェクトで、AMP(Accelerated Mobile Pages)を使用したWebサイトを作成しており、その中で得た知見を少しお話したいと思います。 AMPに関する基本的な説明は省きますので、「AMPとは」みたいな検索で概要を把握しておいていただければと思います。 「AMPとは」Google検索結果 CSSのサイズに気をつけろ AMPでは、CSSのサイズ上限が決まっています。以前は50,000Byteまででしたが、現在は75,000バイトまでと、若干ではありますが緩くなりました。 AMP HTML 仕様 実際、プロジェクト中に50,000Byteの壁に悩まされたので、75,000Byteまで増えたのは本当にありがたかったです。 もし、CSSサイズでバリデーションが通らなかったときは、以下のような対策はいかがでしょうか。 Vueを使用していて、かつ、Scop
このページはElementorの使い方をまとめたリソースページです。 Elementorを１から始めたい人もすでに使っていて新しい情報が欲しい人も、Elementorに関する有益な情報が見つけられると思います。 日々アップデートしていきますので是非チェックしてみてください。 それぞれのセクションの下に関連リンク集がありますので、そこに更に深掘りした情報があります。 Elementorの公式ページはこちら Elementorは無料ですが、更に優れたPro版もあります。 Elementor Proの購入方法はこちら Elementorの使い方のコースができました！ 興味がある方は是非みてみてください。 WordPressのことをもっと知りたい場合はWordPressの使い方のページを見てください。 Elementorの基本的な使い方がわかる動画 Elementorとは Elementorとは世
【初心者向け】 HTML、CSS、Javascriptの基本を理解しよう | デジタルマーケティングブログ
みなさんは「HTML、CSS、JS」の違いや役割を、さっ と答えることができますか？ なんとなくは分かっていても、具体的に何をしていくものなのか分かっていない方も多いのではないでしょうか？ そんな方に向けて紹介していきたいと思います♪ HTMLとは 正式名称は「HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」。 略して「HTML」といいます。 簡単に言うと普段みなさんが目にするWebページの土台を作るための言語ですね。 言語といっても、日本語や英語のような自然言語ではなく、「マークアップ言語」と呼ばれるコンピュータに文書構造を伝える命令を出す為の言語になります。 Webページは、HTMLでマークアップされることによって、見た目が形成されます。 HTMLのバージョン HTMLといっても、様々なバージョンがあります。 最近では、ほとんどHTML
jQueryって…重いですよね。 各種ブラウザへの対応が面倒くさかった時代には本当にありがたかったのですが、モダンブラウザ全盛の今、jQueryの必要性を感じないことが多くなってきました。 いやホント、長年お世話になっておいてナンなんですがｗ 最近ではLightboxやLityのためだけにjQueryを入れている 画像をクリックしたときにふわりと浮かぶあのLightbox、便利ですよね。 特にブログなどの文章が多い場面では画面遷移せずに見られるLightboxの仕組みは必須だと感じています。 当ブログで使っているWordPressのテーマ、Simplicityでも軽量化されたLityというJSライブラリが使用可能なため使っていたのですが、いくらライブラリが軽量でもjQuery自体が重いのが気になっていました。 jQuery不要のLightbox代替スクリプトLuminousを知る 同じよう
WordPress の新しいバージョン ver5.5 が 2020/8/11にリリースされました。 今回のバージョンアップでは さまざまな機能アップや仕様変更が大幅にされています。 WordPress 5.5 をチェックしています 特に、WordPress5.5ではJQueryの呼び出し方が変わりますので不動産プラグインシリーズで影響が出る可能性があります。 JQuery(本体) 今まではJQueryの呼び出しが「ヘッダ固定」でしたがWordPress5.5からフリー(ヘッダ/フッタどちらでも)になります。 具体的には 他プラグイン(wp-jquery-lightbox等)のJQuery連携仕様で「フッタ呼び出し」になってしまいます。 これにより、条件検索が動かない、マップが表示されない、スライダーが動かない。。等の不具合が予想されます。 【参考】Updating jQuery versi
SPAのサイトにGoogle Analyticsを導入することは色々大変なのですが、Vue.jsの場合はvue-analyticsを使用することで簡単に導入することができます。 インストール 以下のコマンドでvue-analyticsをインストールします。 $ npm install vue-analytics vue-analyticsのセットアップ vue-analyticsのセットアップは以下のように行います。 import Vue from 'vue'; import VueAnalytics from 'vue-analytics'; // Configuration VueAnalytics Vue.use(VueAnalytics, { id: 'UA-xxxxxxxxx-x' }); idには、自分のGoogle AnalyticsのIDを設定してください。 マニュアルでト
GLightbox. Code name "Gie" A touchable Pure Javascript lightbox with mobile and video support. Images with Description You can add descriptions to your slides, the description position can be set globally for all slides or you can set a different position for each slide. options are: top, bottom, left or right. You can adjust the style the way you want with basic CSS. The description can display h
サイト構築の際に、便利なJSのライブラリを導入したいということがよくあるかと思います。該当のライブラリをパッと試すなら、jsDelivrというCDNをサービスしているサイトがとても便利です。 jsDelivrとは npm、GitHub、WordPressプラグインのライブラリを世界中のサーバーから配信しているCDNサービスです。利用に際してお金がかかることはありません。また、npmやGitHubがダウンしてもjsDelivrが稼働していれば影響を受けない構成にしているようで、高可用性が期待できます。 CDNとはCDNはContent Delivery Networkの略で、「コンテンツ配信ネットワーク」の意味。インターネット上にキャッシュサーバーを分散配置し、エンドユーザーに最も近い経路にあるキャッシュサーバーから画像や動画などのWebコンテンツを配信する仕組みのこと。CDNサービスは、C
VCCとはなんですか？ 私はそれについて、何かする必要がありますか？ - Narazaka::Blog
VCCとはなんですか？ 私はそれについて、何かする必要がありますか？— ﾊﾔﾁｬ (@HAYACHAN_VR) 2022年12月22日 こちら、VCCヘルプセンターです（？） adventar.org Q. VCCとはなんですか？ Q. 私はそれについて、何かする必要がありますか？ Q. 移行作業は具体的にどのようにして行いますか？ Q. 移行前、移行後に気をつけるべきことはなんですか？ アバターのプロジェクトの移行 1. 削除されるアセットの待避（移行前） 2. 移行時に問題になるアセットの対処（移行前・移行後） 問題ないと思われるアセット 3. VRCSDKの更新による非互換への対応（移行後） 手が動かなくなった場合 ワールドのプロジェクトの移行 1. 削除されるアセットの待避（移行前） 2. 移行時に問題になるUdonアセット等の対処（移行前・移行後） Q. その他のよくある質問 U
Jeremy Bishop 世界のダイヤモンド市場の80％を寡占するデビアス社が昨年開始した人造ダイヤモンド製造販売のLightboxが最近あちこちのポッドキャストで宣伝しているので調べてみた こんな感じで、ネックレス、指輪、ブレスレットなどにセッティングした形で売っていて、一般的な透明以外にブルーとピンクがある。 そして、お値段は１カラット当たり800ドルという明快な値付け。写真のネックレスはシルバーのネックレス代が100ドル、１カラットのダイヤが800ドル、あわせて900ドル。そして、0.5カラット400ドル、0.25カラット200ドル、と重量比例の明朗会計である。 4Cと言われるダイヤのグレードは公表していないが、ダイヤモンド鑑別機関GIAによれば、カラーはG、クラリティはVVS2、カットはエクセレントと、総合してかなりグレードの高いダイヤ（らしい。よく知らないけど）。 同じグレード
作品を掲載するのに最適なWordPressのポートフォリオプラグイン12選 プロのカメラマンであれば必ずと言っていいほどポートフォリオを持っているでしょう。アーティストや代理店、フリーのライターなども同様です。コンテンツクリエーションにおいては、自分にフィットした顧客を探すために作品をオンラインで掲載することがマストとなります。ポートフォリオは一番最初の営業用のツールの役割を果たします。自分の最高の姿を見せる場所であり、具体的にどのような分野に特化しているかを示すハブ。ポートフォリオを簡単に作るには、WordPressのテーマを探し、サイトを作り、WordPressのポートフォリオプラグインを追加すると良いでしょう。 費用が抑えられ簡単な上に、優秀なWordPressのポートフォリオプラグインではWordPress以外のプラットフォームにはない数々の機能が利用できます。 では、現在最も優秀
Published: February 28, 2023 Updated: March 12, 2023 This is a followup to the post Understanding easing and cubic bezier curves in CSS. (This is also the original URL of that post.) If you came here looking for that—or if you don’t already have a solid grasp on CSS cubic-bezier curves—I suggest reading that post now. There are certain things you just know when you experience them, even if you don
playbook を作っているときに、毎回最初から実行し直すのはめんどくさいので、前回実行でコケて修正したところから実行したい。 → "--start-at=" オプションを使えばいい $ ansible-playbook site.yml -l redmine --start-at="redmine : install plugins in github" 指定するタグは、実行ログに出てきたもの (playbook の name で指定したもの) ... TASK [redmine : install flat theme] ******************************************** ok: [redmine] TASK [redmine : install circle theme] ************************************
JQueryで拡大画像のモーダルウィンドが作れる「Lightbox」というプラグインはご存知でしょうか？ Lightboxはサイトにギャラリーを載せる際などに小さな画像を拡大して表示する時によく使われます。 ライセンスもMITなので無料でかつ、商用利用もできて入門者でも簡単に使えるので、JQueryで拡大画像のモーダルを作る際には一番おすすめのプラグインです。 そこで、今回はLightboxをJQueryで使う方法について詳しく解説していきます。 Lightboxとは何か LightboxはJavaScriptで、拡大画像が表示できるモーダルウィンドウが作れるJQueryのプラグインです。 サイトへの導入も簡単でJavaScriptとCSSのファイルをダウンロードするだけですぐに使うことができます。 また、JQueryは1.7以降が安定的に動作するので、別バージョンのものを用意のが面倒な場
JavaScriptのCDN※といえば、Google Hosted Librariesあたりが有名でしょうか。 うちの会社では業務系のWebシステムをメインに扱っているため、たまに一般向けサイトの案件が持ち込まれるとデザイン部分は専門の会社に外注しているのですが、この前納品されたHTMLを見たら、普通にGoogle Hosted Librariesのコードが含まれていて驚きました。納品物に使われるくらいメジャーになっているんですねえ。 Google Hosted Librariesは快適だが数が少ない そんな便利なCDNのJavaScriptライブラリですが、Googleで配信されているのは鉄板の有名どころに限られているため、17個くらい。※2018年12月現在 画像を拡大表示する際によく使われるLightbox（このブログではLity）や、スライド表現によく使われる FlexSlider
You’re creating a patient registration flow and your user is partway through the form wizard and needs more information on how to find and fill out their “insurance certificate number” in order to continue. Some users need to know what this means. Others need to know where to find it (hint: it’s on another piece of paper). Example: AKIRA’s registration flow for users with corporate health plans wi
Over a Dozen Malicious NPM Packages Caught Hijacking Discord Servers
At least 17 malware-laced packages have been discovered on the NPM package Registry, adding to a recent barrage of malicious software hosted and delivered through open-source software repositories such as PyPi and RubyGems. DevOps firm JFrog said the libraries, now taken down, were designed to grab Discord access tokens and environment variables from users' computers as well as gain full control o
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
アクセシブルなフロントエンドコンポーネントの完全ガイド - 後編 | POSTD
AMPに明るい未来はあるのか？ アメブロやTwitterなど有名サイトが次々とAMPサポートを打ち切る
【2021年最新版】Elementorの使い方：完全ガイド | KCLUB MARKETING
「OGAWA」というメーカーのテントを見に…2週連続でアウトドア？！ - なるおばさんの旅日記
Taylor Swift Is Not a Good Role Model
ウェブサイトにInstagramを表示させたり、投稿を連動させるベストな方法
無垢床の養生テープ跡って落とすの後だと超厄介 - 茅ヶ崎のそこそこタフなラフな家
ポップアップ：問題のある10個のトレンドと代替手段
UIをきちんと考えた実装 - モーダルダイアログ (モーダルウィンドウ) - Qiita
DaVinci Resolve のチートシートとショートカット全録 – ToooNの工作室
Full Stack Java with React, Spring Boot, and JHipster
AMPを採用したWebサイトをリリースし、運用してきた雑感
2024年Elementorの使い方【完全ガイド】 | NoCodeWeb.jp
jQuery不要なLightbox代替スクリプトLuminousが本当に軽量
WordPress5.5 で予想される 不具合について
SPAのVue.jsとGoogle Analyticsを連動させたい
GLightbox | A touchable pure Javascript lightbox
jsDelivrなら超簡単に使いたいライブラリ（プラグイン）のCDNが見つかるかも！｜shun
人造ダイヤモンドでファッションジュエリーに進出するデビアスのブルーオーシャン戦略
作品を掲載するのに最適なWordPressのポートフォリオプラグイン12選
Ten tips for better CSS transitions and animations
Ansible playbook の途中から実行 - @//メモ
JQueryプラグインLightbox2の使い方【商用利用OK】
JavaScriptライブラリはCDN使ったほうが便利だし早いっていう話
Modal vs Page: A Decision Making Framework