CSSだけでスクリーンサイズやフォントサイズを取得、CSSの三角関数tan(atan2())はcalc()ではできない計算もできる
CSSで便利な機能の1つがcalc()、ページのレイアウト、要素やフォントのサイズ設定に活躍します。特に異なる単位で加算減算（calc(1rem + 1px)）できることが便利ですが、乗算除算（calc(1rem / 1px)はできません。 そこでCSSの三角関数です。すべてのブラウザにサポートされているatan2()を使用すれば、異なる単位で計算ができます。tan(atan2())を使用して、スクリーンサイズやフォントサイズを取得するテクニックを紹介します。 CSS Type Casting to Numeric: tan(atan2()) Scalars br Jane Ori (@Jane0ri) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに tan(atan2())は単なる数値である 追記: 三角関数を学び直
覚えておくと便利なCSSデザインTipsを9つ集めてみた | BUILD Journal
覚えておくと便利なCSSデザインTipsを9つ集めてみたUpdate2023.05.18Release2023.05.18Coding HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する これまでは画像で表現していたデザインを今ではCSSのみで実装できるものが多くなってきました。今回は覚えておくと便利な現場で使えるCSSデザイン Tips を9個紹介します。いざという時に使えるものばかりですので、ストックしておくことをおすすめします。 見出しの改行位置をCSSで調整する見出しの改行位置を調整する見出しの文章が中央揃えである程度の文字数があると、スマホで見た場合意図したところで改行ができていないことがあります。上の動画をご覧ください。上側の文章は改行されると2行目3行目も中央寄りになるため、画面サイズによっては最終行が1〜3文字になってしまい
CSSのスタイルクエリの基礎知識と使い方を解説、親要素の「スタイル」に応じて子要素のスタイルを適用
Chrome 106, Safari 16でサポートされたコンテナクエリは、親要素（コンテナ）のサイズに応じて子要素のスタイルを設定できる新機能です。しかし、これは機能の一部です。親要素のスタイルに応じて子要素のスタイルを設定できるスタイルクエリを紹介します。 たとえば、下記は右のカードの親要素に特定のスタイルが設定されており、それに応じて子要素のスタイルが適用されています。 Container Queries: Style Queries by Bramus 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに コンテナクエリとスタイルクエリの違い スタイルクエリの基礎知識 スタイルクエリの使い方 スタイルクエリのブラウザサポート スタイルクエリのリソース はじめに CSSのコンテナクエリは「コンテナのサイズ」だけではない
この発想はすごい！ モダンCSSで実装する、ボーダーをアニメーションさせるテクニック
モダンCSSで実装する、ボーダーをアニメーションさせるテクニックを紹介します。矩形のHTMLはdiv要素1つだけ、ボーダーがどのようにアニメーション化されているのか、その仕組みが視覚的に分かるデモもあります。 CSS border animations by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスにもとづいて翻訳しています。 はじめに CSSにおけるボーダーの設定 ボックスモデルの保持 ボーナスコンテンツ: border-image 終わりに はじめに ボーダーをアニメーションさせるCSSのテクニックを紹介します。 ボーダーをアニメーションさせる仕組み CSSにおけるボーダーの設定 CSSで要素にボーダーを実装するには、border, outline, box-shadowの3つのプロパティがあります。Modern CSS Solutionsで詳しく説
参考にしたい日本人デザイナー・エンジニアのポートフォリオサイトまとめ
転職・フリーとして活躍したいWebデザイナーの方は、ポートフォリオ作りに勤しんでるのではないでしょうか。 ポートフォリオは実績・実力がわかりやすい必須ツールです。 こんにちは、Webデザイナーの平尾誠です。 駆け出しのwebデザイナーが現役の先輩メンターを見つけるCODEMENTORを共同運営しています。 かっこいい・可愛いサイトを集めたサイトはよくありますが、フリーランスや個人のポートフォリオは見つけにくい。 検索しても日本人に絞った、個人のポートフォリオサイトって出てこないんですよね。 そこで、デザイナーやエンジニア、アートディレクターの個人のポートフォリオを集めました。 参考にして面接官の脳みそをぶっ飛ばしましょう。 これが就職活動中の悩める子羊たちの一助になればと思います。 SHOGO TABUCHI http://www.s5-style.com/ まずは私が最も尊敬するデザイナ
覚えておこう！ CSSのconic-gradient()関数を使用した美しいグラデーションの実装方法
CSSグラデーションといえば、linear-gradient()とradial-gradient()の線形グラデーションと放射グラデーションで実装することが多いと思いますが、もう1つ扇形グラデーションのconic-gradient()もあります。 conic-gradient()を使用した美しいグラデーションを実装するテクニックを紹介します。IEを除く、すべてのブラウザにサポートされています。 Use conic gradients to create a cool border まずは、実際のデモをご覧ください。 conic-gradient()のグラデーションは線形・放射とは異なり、色の変化は円の中心点から回転しながら色を変化させる扇型の円錐曲線グラデーションです。 See the Pen Conic Gradient Border by Adam Argyle (@argyleink
いちばんやさしい webpack 入門
webpack is 何? webpack とは、一言で言うと JavaScript 向けのモジュールバンドラーです。 複数の JavaScript モジュールを一つ（またはいくつか）のファイルへバンドル（=bundle: 束にする、包む）してくれます。 複数の JS モジュールを（場合によっては CSS や画像などのアセット類も）一つにまとめる すでに新規開発の終了も伝えられる webpack ですが、「STATE OF JS 2022」ではいまだに利用率 No.1 の地位にあります。 webpack 後継のモジュールバンドラーとしては、すでに Turbopack の開発開始がアナウンスされています。しかし、これがプロダクションレベルに達するまでは webpack がおそらく使い続けられることになるでしょう。 使うメリットは何？ モジュールを 1 つ（もしくは少数）にまとめることでブラウ
加工なし CSS のみで画像にグリッチと RGB ずらし効果をかける
はじめに 以下のツイートが500いいねを超えましたので解説記事を書きます。 デモ＆ソースコード CodePen に完成品のデモとソースコードを置いてあります。 グリッチとは 元々は「一過性の障害」という意味ですが、映像の世界ではしばしば「映像の乱れ」という意味で用いられます。ホラーやサイバーなどでよく見られる演出の一つ。 https://www.google.com/search?q=glitch&tbm=isch RGB ずらしとは 色収差、RGB シフト、RGB split (RGB 分割) など、さまざまな言い方がありますが、要するに本来光の三原色である Red、Green、Blue がズレることなく重なって映像を映し出すところ、それがズレた状態で表示されることです。 グリッチエフェクトと一緒に用いたり、場合によっては色ズレも含めてグリッチと言ったりしますので、今回も合わせて実装する
canvasで大量の円がランダムに動くパーティクルを実装してみよう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアのぜんちゃんです。 最近はアニメーション表現を増やすために、canvasの勉強を始めました。そこで、今回はcanvasやJavaScriptの基本技術を使って、円がランダムに動くパーティクルアニメーションを実装したいと思います。 今回作るアニメーションはこちらです。 円を作成・描画する canvas要素を作成し、そのcanvas内に円を作っていきます。 まずは一つだけ作りたいと思います。 <canvas id="canvas"></canvas> // キャンバス要素を取得 const canvas = document.getElementById('canvas'); // キャンパスに描画するコンテキストを取得 const ctx = canvas.getContext('2d'); // キャンバスサイズをwindowサイズに canvas.wi
少しのコードで実装可能な20のjQuery小技集
2016年6月22日 jQuery 素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、以前書いた「少しのコードで実装可能な20のCSS小技集 」に続き、今回はプラグインなしで実装できるjQueryの小技を紹介します！「jQueryってなんだ？」という人もコピペで実装できますよ！サンプルも用意したのでぜひご覧ください！ ↑私が10年以上利用している会計ソフト！ 追記：この記事で紹介されているいくつかの方法が、今ではCSSのみで実装可能です！詳しくは「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」をご覧ください。 jQueryの基本的な使い方 まずはjQuery本家からjQueryファイルをダウンロードします。<head> 内に下記を記述し、jQueryファイルを読み込みます
【PHP】たった1行コマンドを入力するだけでComposerを劇的に速くする方法【アジア圏限定】 - $yuzu->log();
PHPerで使っていない人はいないというぐらい、メジャーなPHPの依存管理ツールComposer。 ですが、動作が遅いという欠点があります。 Composerが遅い原因は主に下記だそうです。 packagist.orgが日本から遠い composerのアーキテクチャ的に、小さなjsonファイルを少しずつダウンロードするため、ネットワークの遅延がもろに影響する composerがfile_get_contentsでjsonをダウンロードしていて、どうやらKeep-Aliveを使っていないし、並列ダウンロードもしていない Qiita またある日@cakephperさんがこんなことを呟いていました。 アメリカでcomposer installしたら高速すぎてビックリした— cakephper (@cakephper) 2015, 11月 17 そしたら、packagistのミラーサイト作ればいい
珍しいCSSプロパティたち - Qiita
あまり見かけない、かつ実用的なCSSのプロパティをまとめました。 他プロパティに依存するプロパティは割愛します。 ブラウザ対応状況はCan I Use等でご確認ください。 紹介するCSSプロパティ will-change scroll-behavior resize object-fit と object-position appearance user-select font-feature-settings text-rendering font-smoothing hyphens pointer-events will-change 予め演算処理をさせておくプロパティです。 これから変化する スクロール位置 / 要素 / プロパティ を値に設定すると、事前に変化をブラウザに知らせる事ができます。 アニメーションのカクつきを、いくらか抑えることができるでしょう。 ただ、何にでも指定して
プロ御用達！WEBデザインに役立つデザインツール13選
更新日: 2017年9月26日公開日: 2015年6月10日プロ御用達！WEBデザインに役立つデザインツール13選 忙しい web デザイナーの方、web デザイン勉強中の方、CSS やプログラミングからチョット目を離してデザインツールを見直してみませんか？ 今までやっていた作業、可視化に時間のかかっていた作業を劇的に変えてくれるツールがたくさん存在します。チョット作業の手を止めて、以下のツールを覗いてみてください。きっとこれからのあなたの web デザインを快適にしてくれますよ！ WEBデザインに役立つデザインツール 13選プロ顔負けのデザインツール「webflow」 webflow 対応 / Mac、Windows 価格 / 無料 ～ $84 /月 表示言語 / English Free トライアル / 有 デザインには自信があるけれど、実はプログラミングはチョット苦手、という方にお勧
PHPユーザエージェント判別・判定
Updated 2015.12.07 / Published 2015.04.04 Firefox OSやWindows Phoneの登場でユーザエージェント情報に依存して処理を行っている部分が相次いで見直しを迫られることになりますので、2015年版JavaScriptユーザエージェント判別・判定と同趣旨でPHPにてスマートフォン・タブレットまわりのユーザエージェントを判別・判定して分岐処理を行う手順をご紹介します。 <?php class UserAgent{ private $ua; private $device; public function set(){ $this->ua = mb_strtolower($_SERVER['HTTP_USER_AGENT']); if(strpos($this->ua,'iphone') !== false){ $this->device =
WordPress で新サイトを開設する時に必ず入れるプラグイン14選 | キャリコ
WordPress は4つ運営中、キャリコ（ @calicocatxyz ）です。 やりたいことを叶えるために WordPress を覚えるところから始まり、初めて開設したキャリコ、MT から引っ越しさせた旅ブログ、仕事で扱うブログ、スコにゃん劇場と、気付けば4つのサイトを抱えるまでになっていました。 そうなると WordPress の扱いには慣れたもので、使うプラグインも大体決まってくるのです。基本的なプラグインを決めておいて、あとはそのサイトの特色に合わせて選ぶといった感じですね。それではいってみましょう。 WordPress プラグイン Autoptimize ダウンロードAutoptimize Web サイトのページ表示速度がエライ上がると評判の Autoptimize はインストールするだけで段違いに速くなります。特に JavaScript の縮小によりスマホ・パソコン表示のスコ
【3ヶ月編】プログラミング完全初心者が最初にやったことまとめ【その1】 | Project name
どうもこんにちは。年の瀬の寒さとカードの請求額に打ち震えながらこの記事を書いてます(^q^) どうもvsannaです。 年末なので1年間の振り返りでもしようと思い、 完全にずぶの素人が半年強プログラミングの学習をしてきた経緯をまとめてみました。 期間別に複数回記事を書きます。 それぞれのタイミングごとにお役に立てれば幸いです。 【3ヶ月編】プログラミング完全初心者が最初にやったことまとめ <= この記事 【6ヶ月編】プログラミング完全初心者が最初にやったことまとめ ※今書いてる 【9ヶ月編】プログラミング完全初心者が最初にやったことまとめ ※今書いてる 今回はその3ヶ月編です。 まずは3ヶ月でどこまで出来るようになるのか、そのために何をしたのかをざざっとまとめています。 「プログラミングやってみたいけど何からやればいいのかわからない」 「どれだけ時間かけたら、どの程度のことが出来
登録数2倍にしてと言われた時の正しい対処法
コミュニティマネジメントとは何か、なぜ今重要か / これから始めるコミュニティマネジメント入門 (1)Takaaki Umada
WordPressに予約管理システムを導入できる「MTS Simple Bookin C 」の設定方法 – ワードプレステーマTCD
プラグインのインストール 下記のボタンからサイトにアクセスして、プラグインをダウンロードできます。 MTS Simple Bookin C 初期設定 プラグインを有効化すると、管理画面に「予約システム」という項目が追加されます。その中にある「各種設定」にアクセスしてください。順番に紹介する各種設定をそれぞれ完了した後は、必ず「変更を保存」をクリックしてください。クリックせずに、次のタブに進むと設定が保存されません。 予約パラメータ内の設定 予約の受付のチェックボックスにチェックを入れます。チェックを入れることで、予約受付中になり、外すと予約の受付ができなくなります。受付を行っていないときに表示するメッセージは任意に設定可能です。基本的にそれ以外の設定は変更不要ですので、「変更を保存」をクリックし次へ進みます。 施設情報の設定 施設の名称や、住所、連絡先などの基本情報を入力します。予約された
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]レスポンシブ対応の最新版！サイズが不明な要素を天地左右の中央に配置するスタイルシートのまとめ![[CSS]レスポンシブ対応の最新版！サイズが不明な要素を天地左右の中央に配置するスタイルシートのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/b46fb0222c516388a0be1ca6e64e87199e362865/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201703%2F2017073001.png)
https://qiita.com/Dronetube/items/ac02a23eafe7d09f3b57