こんなデザインがしたいです。コーディング方法教えてください

Question

canvasというタグを使えば直線が引けることは分かったのですが、具体的な使い方が分かりません

<div class="lesson_wrapper">
        <h3 class="price_container_title">レッスンの流れ</h3>
        <div class="lesson_box">
          <p class="step" style="text-align:center">STEP<br>1<br></p>
          <div class="lesson_box_inner">
            <h3>現地集合</h3>
            <p>あなたが思うより天才です。うっせえうっせえうっせえわあなたが思うより天才です。
　　　　　　　うっせえうっせえうっせえわあなたが思うより天才です。うっせえうっせえうっせえわあなたが思うより天才
            </p>
          </div>
        </div>
      </div>

.lesson_wrapper{
  max-width: 1200px;
  margin: 10em auto 0;
}
.lesson_box{
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  border: 2px solid #ebb94f;
  display: flex;
  justify-content: space-around;
  position: relative;
}
.lesson_box_inner{
  width: 85%;
}

参考になるサイトでも直接教えていただいても構いませんのでぜひ教えていただけたら幸いです。

Comments

[CHERRY]

ご自身でどこまでできるのでしょうか？
まずは、できている部分のコードを質問に追加していただけないでしょうか？

[YT0014]

タグ「デザイン」「デザインパターン」は、この質問とは無関係なタグと思われます。説明文をご確認頂き、両タグを削除していただくようお願い申し上げます。

[ockeghem]

「このようなデサイン」だけでは、「その画像をimgタグで貼っておけば?」となりますよ。もう少し機能的なことも説明しないと。

[m.ts10806]

私なら画像１枚作って終わりですね。

[Lhankor_Mhy]

ご提示のコードには画像がありませんでしたが、ご提示のイメージには右上に画像があるようです。
これは重要ではない、ということでしょうか？

ご提示のイメージの中で特に再現したいパーツがあるのではありませんか？
（たとえば、丸の中に文字を入れるとか）
そうであれば、そのように書いた方がいいと思いますよ。この状態ではどこまで再現したらいいのかわからないです。

Answer 1

デザインが本当にそれで良いのか決める
https://developer.apple.com/jp/design/tips/
https://liskul.com/landing-page-2-1015

似たようなデザインのサイトがあればどのような仕組みで動いているのかブラウザで確認できます。
https://www.buildinsider.net/web/chromedevtools/01

HTML・CSSでデザインを作ります。
https://developer.mozilla.org/ja/docs/Web/HTML/Element
https://developer.mozilla.org/ja/docs/Web/CSS/Reference

必要であればJavaScriptで動きをつけます。
http://js.studio-kingdom.com/javascript/

なんのことやら・・・という状態であればProgateで入門チュートリアルを行えば
デザインがどのように動いているのか作りながら学べるのでHTML・CSS・JSのチュートリアルをやると良いと思います。

↓こんな感じのチュートリアルを同時進行でやれば環境構築はできるんじゃないかな・・・と思います。
https://www.youtube.com/watch?v=yTTSIHjlM9Q

Answer 2

無限にやり方は存在すると思いますので、
必要そうなとこだけ、かいつまんで参考にしてください。

<ol>
  <li>
    <dl>
      <dt>実現性の高い<br />事業計画を作る</dt>
      <dd>
        まず初めに、ビジネスの設計図となる、事業計画を作ります。<br />
        実現性の高い、地に足のついた計画を作ります。
      </dd>
    </dl>
  </li>
  <li>
    <dl>
      <dt>公式を使って<br />売れる商品を探す</dt>
      <dd>
        通販のプロは、勘には頼りません。市場のニーズを数字でロジカルに把握して、逆算して売る商品を決めています。
        プロが実際に使っている「売れる商品の公式」を伝授いたしますので、ヒットする確実性の高い商品をみつけていただけます。
      </dd>
    </dl>
  </li>
</ol>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ol {
  list-style-type: none;
  counter-reset: section;
  border-left: 6px solid #a68c01;
}

ol li {
  counter-increment: section;
  width: 500px;
  height: 150px;
  border: 2px solid #959595;
  margin-top: 30px;
  padding: 15px 10px 0 40px;
  border-left: none;
  position: relative;
}

ol li::before, ol li::after {
  position: absolute;
  left: -28px;
  box-sizing: border-box;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  text-align: center;
  color: #fff;
}

ol li::before {
  content: "STEP";
  background-color: #a68c01;
  padding: 7px;
  font-size: 0.8rem;
  top: -10px;
}

ol li::after {
  content: counter(section);
  position: absolute;
  top: 8px;
  font-size: 1.4rem;
}

dt {
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.1;
  position: relative;
}

dt::after {
  position: absolute;
  top: -25px;
  right: -20px;
}

li:nth-of-type(1) dt::after {
  content: url(https://placehold.jp/13/cccccc/9a9a9a/100x60.png?text={1つ目の画像});
}

li:nth-of-type(2) dt::after {
  content: url(https://placehold.jp/13/cccccc/9a9a9a/100x60.png?text={2つ目の画像});
}

dd {
  font-size: 0.7rem;
  font-weight: bold;
  margin-top: 15px;
}

Answer 3

canvasが出てくる幕はたぶんないと思います。普通にHTMLとCSSを駆使すれば組めるかと。「コーディング方法教えてください」といっても、さすがにこの場で具体的に教えられる人はいないでしょう。教えることが多すぎます。

ここ3年以内に出た新しめのHTMLとCSSの本を1冊買って、1からしっかり学習するのがいいと思います。遠回りのようで実は一番の近道です。「すごく」頑張ればそこそこの短期間でご希望のデザインを実装できるくらいにはなると思います。最近はPCとスマホの両方の見栄えを気にする必要がありますが、PCだけと割り切ればそんなに難しく無さそうなレベルに見えます。

Answer 4

このデザインをコーディングするのであればcanvasは使わないかなぁ。
divを二重にして外枠を左側だけに付ければ良いと思う。