SVG

前回に引き続きAstro.jsでの小ネタを紹介していきます。 1. TailWind CSSにTwitter色を追加 サイトの"Twitterにシェア"機能の実装でSVGのアイコンなど設置してみましたが、ついでに Tailwind にTiwtterのアイコンカラーを追加して、いろいろ使えるようにしてみたいと思います。 tailwindの設定ファイルに以下のように追加するだけです。 module.exports = { ... theme: { ... extend: { colors: { twitter: '#1DA1F2', }, }, }, ... } themeの直下に colors …

こんにちは！ 意匠部のおばらです。 今回はファビコンに関する記事です。 「チャレンジ石垣島」ウェブサイトではファビコンを OS やブラウザの外観モード（ライトモード／ダークモード）に応じて（一部の環境を除き）切り替えています。 今回はそのロジックをご紹介します。 （ロゴの制作秘話に関しては前回の記事を御覧ください） 目次 目次 ファビコンを設定する ライトモード向けのファビコンがダークモードで見づらい メディアクエリでファビコンの見た目を切り替える 方法 ①「SVG 内に記述した CSS で切り替える」 SVG を作成する SVG をテキストエディタで開く <style> タグで CSS を追…

スマホアプリで文字数の多いテキストを表示するとき、レイアウトに悩むことってありますよね。最初の数文字だけ表示して、文章全体はポップアップや別画面で確認をしてもらえるようにしたり、予めラベルサイズを大きくとっておいたりすることがあると思います。今回お話するテクニックは、画面やポップアップを用意せずに、スクロールで文章全体を表示してみようというものです。 下に表示しているのは Power Apps で作成した植物図鑑ですが、ギャラリーにある説明文がとても長くて1行では収まりません。なので、 この部分だけ、選択時に右から左へ文字が自動でスクロールするようにしてみたいと思います。

無料アプリ9VAeきゅうべえを使って、ロック解除の素材動画を作る手順を説明します。作業時間は１５分程度です。 ほかの解説動画はこちら。 9VAeきゅうべえとは 9VAeきゅうべえのダウンロード SVGフリー素材イラストを読み込む 続きを作ってパーツ分解 動きをつける 背景を作りいらない点を消す 動きグラフをつける 素材動画出力 解説動画の作り方 9VAeきゅうべえのダウンロード 画面キャプチャ方法 キャプチャ画像を9VAeに読みこむ 文字、矢印を入れる 文字の色、縁、影をつける ひとコマアニメーションにする アニメGIF、動画出力 9VAeをつかえば素材動画が作れる 9VAeきゅうべえに関する…

当ブログで紹介したSVGの記事をまとめました。SVGは、描画ソフトが無くても単純な図形ならコードを書くことで、簡単に作れます。ベクター画像なので、デバイスを気にすることなく表示できるのが良いです。記述ルールとアニメーションの仕方が分かれば、ある程度のものが作れるのではないでしょうか。 SVG記事のまとめ 基本 応用 今後の取り組み SVG記事のまとめ 基本 【SVG】SVGについて 【SVG】SVGの基礎 【SVG】基本形状の描画 【SVG】パス 【SVG】テキスト 【SVG】座標系の変換:transform 【SVG】線の形状 【SVG】アニメーション1(属性値の変化) 【SVG】アニメーシ…

作ったもの 作り方 0. 用意するもの 1. モデリング 2. スライス 3. 出力・洗浄・硬化 4. 編む 5. 補強 6. 完成 制作経緯 おわりに 作ったもの ミニベレー帽を作りました。 レジン布ベレー帽（裏面）表面ぬいぐるみに被せたところ 思いつきで作ったわりにはうまく出来た気がします。 粘りのある柔らかいレジンと光造形3dプリンターを使って生地を出力、テグスで手編みしてみました。 記事は手で簡単に曲げられる程度の柔らかさ。適度にハリと弾性があるため、芯地不要で成形しやすかったです。 柄はペンローズタイルのP2です。 かわいいですね (蜘蛛の巣とか言ってはいけない)。 en.wikip…

キリン舎と申します。 普段は自作キーボード界隈でメカニカルキーボード用のkawaiiキーキャップを自作したり、デスクマットをデザインしたりしています。 こんなのを作っています キーキャップ - BOOTH デスクマット - BOOTH 今回の記事は、Keyboard layout editor（以下、KLE）で自分の理想のキーキャップセットを形にする方法についてまとめています。 soap bubble（Acid caps）検討段階 なお、掲載しているAmazon・楽天の商品ページにはアフィリエイトをつけています。ご購入の際はなるべくこちらのページを経由していただけると、大変ありがたいです。 背…

ファミリー劇場 給食スペクタクルコメディ「おいしい給食」一挙放送記念！秋のグルメバトル特集 おいしい給食【一挙】| J:COMテレビ番組表 - https://tinyurl.com/22qbgvoc劇場版 おいしい給食 卒業 | J:COMテレビ番組表 - https://tinyurl.com/2avv7svg 番組概要 【出演】：市原隼人、土村芳、佐藤大志、勇翔（BOYS AND MEN）、山崎玲奈、田村侑久（BOYS AND MEN）、登坂淳一、いとうまい子、直江喜一、木野花、酒井敏也 番組詳細内容 【あらすじ】 1986年、秋。黍名子中学校の数学教師・甘利田幸男（市原隼人）は大の給食…

ファミリー劇場 給食スペクタクルコメディ「おいしい給食」一挙放送記念！秋のグルメバトル特集 おいしい給食【一挙】| J:COMテレビ番組表 - https://tinyurl.com/22qbgvoc劇場版 おいしい給食 卒業 | J:COMテレビ番組表 - https://tinyurl.com/2avv7svg 番組概要 【出演】：市原隼人、土村芳、佐藤大志、勇翔（BOYS AND MEN）、山崎玲奈、田村侑久（BOYS AND MEN）、登坂淳一、いとうまい子、直江喜一、木野花、酒井敏也 番組詳細内容 【あらすじ】 1986年、秋。黍名子中学校の数学教師・甘利田幸男（市原隼人）は大の給食…

こんにちは、lisです！ 仕事用にと思いLubuntu環境構築をしています。 今回はターミナルアプリをAlacrittyに変更してみました。

はじめに こんにちは。DIVXエンジニアの安部です。 今回は、Postmanの操作方法や開発に役立つTipsについてまとめました。PostmanはAPIの開発、テスト、デバッグ、ドキュメント作成などを支援するためのツールです。 使いこなせば、日々の検証作業や実装におけるコーディングの手間を大幅に減らすことができます。(うれしい!!) しかし、使い方をうまくマスターできないと、検証のたびにツールを切り替える非効率的な「社内・開発ツールが多すぎてカオス」な状況になるだけです。(かなしい!!) そこで、本記事ではPostmanの汎用的な使い方をまとめたいと思います。この記事は全ての人に役立つものです…

長かったコロナもようやく明け 県外の活動もして行こうとラーメン処 福岡県に上陸しました。 福岡と言っても小倉はほぼ山口県と言っても過言では無く 宇部市からは1時間20分ほどで到着 周南市に行くのと同じくらいです。 最近オープンしたばかりの佐賀つけ麺 孤虎という店が目当てで 同じ小倉の有名店 ぎょらん亭にも寄るコースで予定。 まず一軒目 佐賀つけ麺の店は 商店街の外れながら駐車場が無い立地。近くの有料駐車場に止めて行くもオープンが確か10時からだったので まだ客はまばら 券売機でつけ麺 肉玉子を購入して席に着く。 福岡はラーメン処ではあるが つけ麺の美味しい店は多くない。こちらも佐賀県からの出店…

はじめに 数ある本の中から、本書を手に取っていただき、ありがとうございます。 本書は、現在世界中で注目されている「ChatGPT」について、その有効な使い方を説明しています。 ChatGPTとは、OpenAIが開発した自然言語処理技術のソフトウェアで、文章の自動生成や翻訳、Q&Aシステムなど、さまざまな用途に活用されています。 その精度は驚くべきものであり、まるで本当の人間が話しているかのような感覚で会話が成立するところにあります。 ChatGPTは、2022年11月30日にリリースされ、5日間で100万人以上のユーザーが登録し、現在、世界中で使用されています。 マイクロソフトが今後数年間でト…

自身のアウトプットも兼ねてつれづれと書き続けるブログ。 HTML解体新書ー仕様から紐解く本格入門 [ 太田 良典 ] 前回からの続きです。 HTTP[06] HTTPメッセージ MIMEタイプ HTTP[06] HTTP（Hypertext Transfrt Protocol ハイパーテキスト トランスファープロトコル） ハイパーテキストを転送するための通信プロトコルです。ユーザーエージェントがサーバーに接続しメッセージをやり取りします。 HTTPメッセージ ユーザーエージェントがサーバーに送るメッセージをHTTPリクエスト（HTT Prequest）と呼びます。 GET /index.htm…

はじめに フロー設計の課題 draw.ioのメリットとフローへの影響 draw.ioって？ フローのプロセス可視化と変更管理、レビューの効率化 drawioの使用例 SQLを使ったテーブル図の作成方法 まとめ はじめに 今回はSalesforceアドミンな方々が悩んでいるであろう、作成したフローの可視化管理について、「draw.ioを使うのがいいよ！」っていう布教活動が目的の記事です！※ついでに現職のアドミン方に紹介するための記事です。※draw.io以外でもいいっちゃいいです。 フロー設計の課題 まずは下記のようなフローがあったとします。 フローを見たところ、非常に簡単な作りであるため処理の…

いきなりですが問題です． 小学校の算数では，「3本の直線でかこまれている形」を「三角形」ということを，2年生で，また「6本の直線で囲まれた図形」を「六角形」ということを，5年生で学習します． では，次の図形は，6本ではなく5本の直線で囲まれた図形なので，五角形なのでしょうか．

#Day45 Photoshop・Illustrator・XD役割についての動画を見た。 ・Photoshop：画像編集。補正。レタッチも可能。切り抜き。 ラスター画像：拡大縮小で劣化してしまう。ドットで構成。 ・Illustrator：バナーやロゴに使われることが多い。画像とテキストなどを組み合わせてコンテンツの作成が可能。グラフィックデザイン。 ベクター画像：拡大縮小しても劣化しない。座標で構成。 ロゴやアイコンに多い。 先日のフィードバックレビュー内で”SVG化”という言葉があったが、このこと。 【超入門】SVGファイルって何？特徴と変換方法まとめ - RAKUS Developers …