【GSAP】横スクロール、パララックス、時間差出現、ドラッグ操作を盛り込んだ実装
1.実装イメージ 実装イメージは以下の通りです。 See the Pen 【GSAP】横スクロール+パララックス+時間差+ドラッグ操作=お洒落 by りょーすけ (@s_ryosuke_1242) on CodePen. 2.HTML 次にHTMLです。 ドラッグ操作を可能にするための要素が11行目にあります。（proxy => 代理、代わり） <body> <main> <!-- SLIDER --> <section class="description"> <div class="container"> <h2>途中から横スクロール</h2> <p>横スクロール中はパララックス</p> </div> </section> <div class="vertical-slider__wrap"> <div class="proxy"></div> <section class="vert
エンジニアのための技術記事プラットフォーム「Chietta」を個人開発で作りました
はじめに 休憩中や電車とかの隙間時間にZennやQiitaのトレンド記事をよく読んだりするのですが、色んなサイトの技術記事をまとめたサービスがあれば便利だなと思い、Chiettaというサービスを個人で開発したので紹介します！ ※内容に間違いなどあれば教えていただけると幸いです どんなサービス？ Zenn、Qiita、企業ブログなどをまとめて見たり検索できるサービスです 検索 記事の共有 良いと思った記事を共有できる場が欲しい という個人的な願望があって、Xで「この記事良かった」みたいなことをつぶやきを見るのが好きなのでこの機能を作りました。ぜひここで共有してください！！！（非公開にもできるので積読用としても使えます） カテゴリのフォロー 開発したきっかけ 自分自身よく電車とかの隙間時間に技術ブログを読んだりしているのですが、その媒体が主にZenn, Qiita, Twitterのように複数
CSSファイルをJSで読み込むとレンダリングを妨げない問題
Beako.jsが抱えている、3つの大きな問題の二つ目です。 一つ目と三つ目はこちら レンダリング妨げない問題 HTMLでlinkタグを書くと、CSSファイルが読み込まれるまでレンダリングを妨げて、レイアウト崩れが発生するのを防ぎます。しかし、その挙動は初回だけで、JavaScriptで動的にlinkタグを書いてCSSファイルを読み込んでもレンダリングは妨げられず、レイアウト崩れが発生します。 再現してみる 例として、CSSフレームワークのSemantic UIをcdnjsから動的に読み込んで、併せてボタンを追加してみます。 ※例としてSemantic UIを使用していますが、Semantic UIの問題ではなく、あらゆるCSSファイルで発生します。 const link = document.createElement('link') link.setAttribute('rel', '
Responsive font sizeに（今更）チャレンジ | マークアップ かめ壺
今まで避けて通ってきたResponsive font sizeを使ってみました。とゆーのも、縦書きデザインのコーディングをすることになって、画面サイズとフォントサイズが連動したほうが都合が良さそうだったので。 Responsive font sizeをインポートして使ってみる 筆者が最初にResponsive font sizeを使用しようと思ったのは、Bootstrapのドキュメント内に言及されている箇所を見たとき。ファイルサイズが肥大するため、筆者自身はBootstrapはあまり使いたくないのですが、Bootstrap最高＼(^O^)／と思っているフシのあるパートナーさんに、使用するよう指示された案件に関わっていた時のことです。 件の記述を読んでみると、Bootstrapで使われている見出しのclassがResponsive font sizeに対応しており、Responsive fo
指定したSMTPサーバーを使ってメールを送信できるようにするWP Mail SMTPプラグイン – ワードプレステーマTCD
編集画面から、 設定 > WP Mail SMTP と移動する メール詳細設定を行うメール詳細設定を行う まず基本的な設定です。メールの差出人メールアドレスである「From Email」、差出人の名前である「From Name」を入力します。メールアドレスは省略するとデフォルトで設定されているメールアドレス、名前を省略すると「WordPress」になります。 そして「メーラー」は「WordPressの全てのメールをSMTP経由で送信する。」と「PHP mail() 関数を使用してメールを送信する。」のいずれかを選択するのですが、今回は外部のSMTPサーバを利用して送信しますので「WordPressの全てのメールをSMTP経由で送信する。」が選択されていることを確認して下さい。 From Email : あなたのメールアドレスを入力する（gmailやyahooなど） From Name :
SMTP設定でフォームからメールを送信する方法【Word Press】
Word Pressで設置したお問い合わせフォームからメールが届かない！と困っていませんか？ レンタルサーバーからメールを送信すると迷惑メールになる可能性が高くなります。これは、Word pressのテーマや設置したフォームの送信先などに設定しているドメインやURLと、レンタルサーバーから送信する際のURLが異なっていることが原因のひとつと考えられます。 Word Pressでメールを送信するにはSMTP設定をする必要があります。これは、プラグインの「WP Mail SMTP」を使って設定できます。 SMTPとは 「Simple Mail Transfer Protocol」の省略で、送ったメールを相手に届ける仕組みのことです。メールを送るときに使う約束事とも言えます。もっと詳しく知りたいと思う方は、SMTPとは｜「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典を見てみ
【MW WP Form】でGmailにメールが届かない時の対処法！WP Mail SMTPで解決！ - 株式会社TANE-be｜大阪にあるWebサイト制作
クライアントIDの発行は、GCP(Google Cloud Platform)で行う Google Cloud Platformを通して設定・発行を行うため、Googleアカウントを持っている事が条件となります。 まだ持ってない方は、Google アカウントの作成から行ってください。 プロジェクトの作成 ログインした状態で、Google Cloud Platformへアクセス。 まずは、プロジェクトを作成します。 プロジェクト名は任意で問題ありませんので、そのまま作成します。 ライブラリの追加 左のメニューAPIとサービス内にあるライブラリをクリック。 「gmail」と入力して検索すると、「Gmail API」が表示されるので こちらを「有効」にしてください。 認証情報を作成 こちらから認証情報を作成していきます。 ユーザーデータにチェックを入れ、次へ。 アプリ名は任意の名前で問題ありませ
最もよく使われている「 地図UI 」レイアウトとデザインのヒント
地図はアプリのデザインに欠かせないものであり、ユーザーが位置情報サービスとどのように接するかを形作ります。ライドシェアからローカルな発見まで、このような体験は直感的な 地図UI でシームレスでユーザー中心なものになり、地理データ、UI の地図デザイン、デジタルの進化が交差する中、地図UI の技術を習得するというのは、現代の製品にとって不可欠なものとなっています。 主なポイント： 効果的な 地図UI のデザインは、複雑な地理データと直感的な UX（ユーザーエクスペリエンス）の橋渡しになる。 見た目と機能性のバランスは、ユーザーのエンゲージメントと満足度にとって極めて重要である。 さまざまなスクリーンサイズに対応し、アクセシビリティを確保することは、幅広いユーザビリティのために非常に重要である。 Mapbox や Leaflet のようなツールのカスタマイズオプションで、ブランド固有の地図体験
[technique 13]自由な文字レイアウトをCSSジェネレータで実現する - MdN Design Interactive
作業効率がアップする隠れた使い方教えます！ WEB制作、プロの無料サービス活用術 ──デザインに使えるツール（2） [technique 13] 自由な文字レイアウトをCSSジェネレータで実現する 文＝小山勝正（Chameleon Graphics） Tool CSS Text Wrapper URL http://www.csstextwrap.com/ Webサイトをレイアウトする際、文字組みをより有機的に行いたいと思ったことはないだろうか。誌面レイアウトのように自由な文字の配置を行いたい場合に便利なオンラインサービスが「CSS Text Wrapper」である。 このツールを使用する際、サイト内のポイントと呼ばれる緑色の丸を配置し、それらを線で結ぶことで文字レイアウトのラインを組むことができる。つまり、自分で好きな図形を描き、それに合わせてテキストを配置することができるのだ。 さらに
![[technique 13]自由な文字レイアウトをCSSジェネレータで実現する - MdN Design Interactive](https://cdn-ak-scissors.b.st-hatena.com/image/square/800574e0ac3f44133aa2776c7c255fb83f19c305/height=288;version=1;width=512/https%3A%2F%2Fwww.mdn.co.jp%2Fdi%2Fimage.php%3Fasid%3D414%26type%3Ds)
検索順位チェックツールGRC
GRC は Vector の 2006年 ベストオンラインソフト の１つに選ばれました。 2004年の配布開始より、多くの皆様にご愛用いただきまして、本当にありがとうございます。 GRCは検索順位チェックツールのスタンダードです。 GRCは、ボタン一発ですべての検索キーワードの順位を調査します。 起動時に順位チェックを開始する機能を利用すれば、ボタンを押す必要すらありません。 順位を知りたいときに、GRCを起動するだけでいいのです。 直近の順位変化はもちろん、 過去の全ての順位変化も、グラフ表示で一目瞭然です。 実施したSEO対策の内容をGRCのメモ機能で記録しておけば、 順位グラフ上でメモを閲覧できます。 その前後の順位変化から「検索順位がなぜ変わったのか」を視覚的にとらえることができます。 他に無い豊富で優れた機能と、直感的な操作性、 何千もの項目があっても損なわれない抜群の高速性を、
もうjsなんていらない！世界で流行っているHTMXについてまとめてみた - Qiita
HTMXとは https://htmx.org/ HTMXは、JavaScript を記述せずに、Ajax通信や高度なUXを実現できるライブラリ。 軽量 で 高速 で、既存のサーバーサイドのフレームワークとシームレスなやり取りができる。また、AJAX通信の発火、フォームの送信処理、DOMの更新などを既存のHTML要素を拡張するだけで可能とする。WebSocketやSSEにも対応しているので、チャットアプリなどにも適している。 2023 JavaScript Rising Starsでは、 フロントエンド・フレームワーク部門で見事2位に輝いた！(一位はReact、全部門だとshadcn/ui) 似たような機能として、Ruby on RailsのHotWireがあるらしい。 2024年はHTMXがくると言われているぐらい世界で騒がれているのだが、あまり日本では流行っていない。以下はGoogle
地味に便利！ダミー画像をSVGで生成するスクリプト、ローカルでもオンライン環境でも利用できる -holder.js
ダミー画像を作成するのは面倒ですよね。ローカル環境でもオンライン環境でもダミー画像を簡単に生成できる軽量スクリプトを紹介します。 画像を用意する必要はありません。 簡単なコードで、SVGのダミー画像を利用できます。サイズ・カラーは自由にカスタマイズでき、文字入力やダミー画像用のクロス線にも対応しています。 さらに、レスポンシブ用の流体ダミー画像も生成できる優れものです！ holder.js holder.js -GitHub holder.jsの特徴 holder.jsのデモ holder.jsの使い方 holder.jsの特徴 holder.jsはダミー画像をクライアントサイドで生成するスクリプトです。ローカル環境でもオンライン環境でも利用できます。サイズ・カラー・フォントのカスタマイズにも対応しており、ダミー画像はSVGもしくはCanvasで生成されます。 MITライセンスで、個人でも
交響曲や協奏曲は英語で？楽曲の種類を英単語などに言い換え55選
こんにちは。『そうとめ』管理人のるいつです。(@Soutome_ruitsu)Twitterでは独自の創作ネタを発信しておりますのでフォローお願いします。 音楽はそれ自体が創作活動の一つでもありますし、音楽から影響を受けた創作も大変多いと思います。 関連して今回は「楽曲の種類と言い換え」についてお話したいと思います。 創作のタイトルや技名に使いやすい単語なので必見です！ ○○曲や○○歌などの種類一覧 タイトルになっている「交響曲」や「協奏曲」など聞いたことのある楽曲から「なんだこれ」と聞いたことのない楽曲まであるはずです。 やたらとカッコいい響きの単語が多いので創作におけるネーミングにはうってつけではないかと思います。 英語への言い換えとしていますが、フランスやドイツなど音楽が盛んな国からの輸入で使われるようになった単語も多いです。 それでは見ていきましょう。 交響曲(こうきょうきょく)英
変幻自在なグラフィック表現！CSS, SVG, Canvasでマスクを使いこなせ - ICS MEDIA
近年、ウェブ技術の発展により、画像の一部だけを表示する「マスク表現」がよく見られるようになりました。一言でマスクと言っても、アニメーションやインタラクションとの組み合わせによりさまざまな表現が可能です。 また、どの技術を用いるかという選択も重要になります。マスク表現はCSS, SVG, Canvas APIといった技術で実現できますが、それぞれが異なる得意分野をもちます。 本記事の前半では、マスク表現を実現する技術について解説を行います。後半では実践的なマスク表現をいくつか紹介しながら、それぞれの実装方法を紹介します。いままで技術的に難しいと諦めていた表現が、マスクによって実現するヒントになれば幸いです。 ▼マスク表現の例（背景画像の一部を表示している） - Erika Moreira Portfolio マスクとは 本記事で紹介するマスク表現とは、画像の一部を切り抜く手法です。マスキング
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ときどきWEB | 『スマホ・タブレットのサイズ/解像度一覧作ってやんよ!!!』
Android 画面サイズ・ピクセル数早見表
【コピペOK】サイト背景配色パターン集 〜シンプルカラーで見やすくかっこいいサイトに〜
WordPressのおすすめ初期設定【必須8項目】 | マニュオン
LiteSpeed Cacheの不具合の少ない設定方法と使い方【SWELL・Cocoon対応】 | マニュオン
意外と知らないパターンや柄の名前。 | ネクストページブログ
