shiga-raita https://blog.hatena.ne.jp/shiga-raita/ SIGA BLOG https://sigablog.com/ ブログ運営 前回はこちらの記事で愚痴をこぼしていた通り、手順解説に使えるようなCSSを作っていたのですが―― sigablog.com 遂に実用性のあるCSSが完成しました！ スポンサーリンク 前回の失敗 原因究明 修正した内容 完成したデザイン HTMLとCSS 前回の失敗 前回も今回も思い描いていたデザインはまったく同じもので、 このようにSETPと書いた円形吹き出しの右側にテキストを表示するというだけの至極簡単なものでした。（しかしCSSで書こうとすると上手くいきません…） 前回はこの横並びを成立させるためにdisplay: flex;というコードを利用していました。 一見うまくいったかと思いきや…… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fsigablog.com%2Fentry%2F2021%2F04%2F07%2F201000" title="CSSを用いた手順解説のデザインサンプル【STEP】 - SIGA BLOG" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://cdn-ak.f.st-hatena.com/images/fotolife/s/shiga-raita/20210407/20210407112504.jpg Hatena Blog https://hatena.blog 2021-04-07 20:10:00 rich https://sigablog.com/entry/2021/04/07/201000 1.0 100%