アスペクト比

生成AIで説明スライド作るためのプロンプトを作った(SVG) AIの話題

生成AIで説明スライド作るためのプロンプトを作った(SVG)

説明スライドを効率的に作成するためのSVGプロンプト開発過程を紹介します。スタイル一元管理やテキスト配置の最適化により、視認性の高いデザインが実現できます。反復的な改善プロセスを通じて、情報伝達と視覚的魅力を両立させたプロンプトを開発できました。生成AIで情報をスライドに変換する生成AIは、文章だけでなくスライドも作ることができます。Claude 3.7 Sonnet にプロンプトを与え文章を送信すると、約45秒ほどで SVG(ベクター画像)を生成してくれました。プロンプトで...
[CSS]ブログカードの画像のアスペクト比を変更した[object-fit, aspect-ratio] ニッチな話題

[CSS]ブログカードの画像のアスペクト比を変更した[object-fit, aspect-ratio]

これまで一行で表示できるタイトル文字数が少なくて、タイトルが長くなると読みにくいことが気になっていました。ブログカードのデザインを少し変更しました。そこで、まず画像のアスペクト比を変更したり、文字のサイズを少し小さくして、タイトルを長めに取れるようにしました。CSSで自動的に画像のアスペクト比を変えて、トリミングすることができました。img{ object-fit:cover; aspect-ratio: 100/100;}また、ドメイン名の色を変更することで、タイトルと区別...