こんにちは！たくみです。
プログラミングの勉強を始めて早6週目。
これまでにも、いくつかプログラミングに関する記事は書いてきましたが、実務的なことは書くスキルがありませんでした。
しかし、これからは自分の備忘録の意味合いを含め、少しずつプログラミングに関する記事を書いていこうと思います。
今回は、iSaraの模写のやり方について、部分的にですが書いていきます！
(「そもそもiSaraとは？」という方はこちらの記事をどうぞ⇓)
・自分がiSaraの模写をしていた時、解説しているメディアが少なく、進めるのに時間がかかったから。
プログラミングを勉強する人にとって、iSaraは模写の対象として有名でしょう。
にも関わらず、解説などを調べても参考にできる動画や記事が少ないと感じました。
私の場合、幸いなことに周りにプログラマー・エンジニアがいたので、分からない箇所は聞くことが出来ました。
しかし、プログラミングを独学で勉強していて、周りに聞ける人がいない場合もあるでしょう。
この記事は、そのような人の参考に少しでもなれば嬉しいです。
・これからiSara模写に取りかかろうとしている人
iSara模写ポイント解説
今回の記事でご説明するのは、下記の通りです。
・カッコ(「」)の作り方
・三角形の作り方
・ジグザグ線の作り方
・入力フォームの作り方
これだけ見てもピンとこないかもしれないので、一つずつ説明していきます！
角を丸くする方法
iSaraでいうと、この部分です⇓
何回か出てくるので、1回書き方を覚えておけば繰り返し使えます。
解説の前に、あらかじめコードを載せておきます。
See the Pen
ブログ記事用(削除禁止) by Takumi (@nxkvdovl)
on CodePen.
今回はコードを載せるので、文章での説明はピンポイントだけにします。
「角を丸くする方法」に必要なプロパティ、それはborder-radiusを使います！
border-radiusを使うと、ボックスの角を丸くすることが出来ます。
今回の場合は、<div>タグの中に<a>タグで文章を入れています。
そして<div>タグの大きさを調整していますが(詳しくはコードを見てください)、border-radiusを使わなければただの長方形になります。
See the Pen
ブログ記事用(削除禁止) by Takumi (@nxkvdovl)
on CodePen.
border-radiusをpxや%で調整して、適当な大きさにしましょう。
+α 円形画像も作れます
このborder-radiusですが、丸くする比率をどんどん上げていけば、50％で円形になります。
※参考例
See the Pen
ブログ記事用(削除禁止) by Takumi (@nxkvdovl)
on CodePen.
【解説】
1.widthとheightを設定
2.border-radiusを50%設定
これだけです。(円形にするので、widthとheightは同じ大きさにしましょう。)
iSaraでは、人物画像やポイントが円形で置かれていることが多いです。border-radiusを活用して、対応して行きましょう。
カッコ(「」)の作り方
つぎは「」の作り方です。⇓のような感じにしていきます。
これもiSaraサイトの中に何回か入っています。1回作り方が分かってしまえば、あとはコピー＆ペーストでできてしまいます。
これのコードはこのような感じです。
See the Pen
MWaBLqo by (@nxkvdovl)
on CodePen.
1.親要素(今回の場合<div>)をposition:relative;にして、「」部分はposition:absolute;で指定
2.親要素に疑似要素before,afterを付ける。
[コードは親要素::before,親要素::after。(:が２つ続くことが特徴。)]
3.content:””;を入れて、仮想ボックスをつくる。そのボックスに、線を入れていくイメージ。
4.疑似要素にそれぞれborderを付けていく。
左上なら、border-top&border-left。右下ならborder-right&border-bottom。
5.疑似要素の位置(top,bottom,left,right)はそれぞれ0に設定。
6.親要素のwidthを調整して、「」を適当な位置に持ってくる。
三角形の作り方
iSaraの中では、おそらく使われているのは1ヵ所でしょうか。
三角形の作り方の説明です。
⇑の部分をやります。
これは、正方形を削って三角形にするイメージです。(□⇒▽)
試しに画像の通り、下向き三角形(▽⇐こんなやつ)を作ってみましょう。
コードはこちらです。
See the Pen
mdejYPQ by (@nxkvdovl)
on CodePen.
【解説】
プロパティ：transparentを使って、正方形の左右から三角形を抜いていくイメージです。
transparentは、透明にするプロパティです。
これで左右を、borderのpxと同じ大きさだけ透明にします。
(三角形なのでpxの大きさは同じにするのがコツです。)
あとはwidthを0にすると、下向き三角形ができました。
(widthを設定しないと、画面いっぱいに広がってしまうので0に設定しておきます。)
※ちなみに上向きの三角形を作りたい場合は、border-topをborder-bottomに変更します。
左向き・右向きなども同様の方法で作ることができます。
ジグザグ線の作り方
ジグザグ線と言われても、なんのこっちゃと思う人が多いかもしれませんが、この部分のことです。
他に言い方思い浮かばなかったので(笑)
これの作り方コードは、こちらです。
See the Pen
oNjMryg by (@nxkvdovl)
on CodePen.
【解説】
これは、先ほどの三角形でも使用したtransparentを使っています。
イメージとしては、長方形の箱を二つ並べて、ジグザグになるように不要な箇所を透明にしています。原理さえ分かれば、あとはコピー＆ペーストで対応できるので比較的簡単だと思います。
入力フォームの作り方
最後は、フォームに関する説明です。これは、実はHTMLだけで作成が可能です。
コードはこちらです。
See the Pen
ブログ記事用(削除禁止) by Takumi (@nxkvdovl)
on CodePen.
入力フォーム作成には、<input>タグを使います。
コードのようにinput type=”text”とすることで、テキストを入力することが可能です。
placeholderを入れると、「何を入力すれば良いのか」ヒントが表示できます。
<input>タグを増やしていけば、項目を追加することができるというわけです。コメントなど複数行が必要な場合は、<textarea>タグを使います。
“cols”で横幅を、”rows”で行数を指定できます。
まとめ
今回のポイント説明は以上です。
もうちょっと実力があれば、他の箇所も説明したかったのですが、それはまたの機会に。
もっと分かりやすく説明できるようになれば、書いていきたいと思います。
これからもプログラミングに関する内容を発信できるように、私も勉強を頑張ります！
最後に、各ポイントをまとめておきます。
①【角を丸くする方法】
⇒border-radiusを使う。50%にすれば円形になる。②【カッコの作り方】
⇒疑似要素before,afterとcontentの仮想ボックスがキーワード。③【三角形の作り方】
⇒正方形から、transparentを使って左右を削るイメージ。④【ジグザグ線の作り方】
⇒transparentを使って、長方形から不要な部分を消していく。⑤【入力フォームの作り方】
⇒<input>タグと<textarea>タグを覚えておく。
コメント