アネ婚の模写コーディング途中経過です。
現在やっと3分の1程度終わりました(レスポンシブも)。
アネ婚長い…
途中で挫折しかけましたが、何とか続けています。
二行テキストのボタンリンクの作り方。
このボタンリンク↓
テキストが二行ですよね。
このボタンリンクの作り方がちょっと難しいんです。
ボタンのHTMLがこうだとして↓
<p><a href="...">オンラインの<br>カウンセリングはこちら</a></p>
一行テキストなら、a要素のline-heightをp要素のheightと同じにすればテキストが上下中央にきますが、
二行テキストの場合、同じように指定するととんでもないことになってしまいます↓
なので、二行テキストをボタンの上下中央に配置するのに私はpaddingを使いました↓
ただし親要素のpにpaddingを指定すると、padding部分はリンクが効かなくなってしまいます。
なので、a要素にpaddingを指定します。するとpadding部分もリンクが効きます。
「アネ婚」模写その他の部分。
「アネ婚には30代40代のお姉さん世代と…」のの部分、
ここは本物のサイトだと全て画像なのですが、それだとあまりに簡単なのであえてコーディングで作ってみました(主にdl要素)。
「price」のグラフの部分は結構苦労しました。
スマホ画面とPC画面とでレイアウトがかなり変わるのでHTMLも少し複雑に。
そしてpositionを結構使います。
今後の予定。
とりあえず9月いっぱいまでは「アネ婚」の模写に専念し、
10月からはココナラに出店したりクラウドワークスなどで案件を探していこうかなと思ってあます。
ただし私はあくまで副業+子育てしながらなので、無理に案件を取ろうとは思ってません。
納期に余裕があり依頼者に迷惑のかからないような案件があったら取ってみようかなと思っています。
案件がなかったらとりあえず今の模写コーディングを終わらせて、
いよいよPHPやWordPressにも挑戦していこうと思います。
コメント