おっすおっす。
misopotaです。
今回は、HTMLとCSSの模写コーディングについて。
プログラミング言語と比べて比較的簡単と言われています。
しかし、最初の模写コーディングの段階で挫折してしまうという人も多いのではないでしょうか。
かくいう私も、部分模写をしている時にどうしても見本のサイトのようにできないことが多々あります。
そこで、今回は模写コーディングでつまづきやすいポイントと解決策をご紹介していきます。
画像を設定したけど余白が出てしまう…
私も模写コーディング中に苦戦したところです。
調べてみたところ、余白が設定されていない要素に対してブラウザが勝手に余白をつけてしまうとのこと。
つまり、何もしていないのに画像などに余白がついてしまうというわけです。
このようなことを防ぐためには、CSSに記述する最初の段階で以下のプロパティを設定しておきましょう。
*{
padding:0;
margin:0;
}
上の記述を書いておけば、サイト全体に余白がつかなくなります。
模写コーディング中に謎の余白に悩んでいる方は、ぜひ試してみてください。
参考サイト↓
ヘッダーの要素の横並びってどうやるの？
模写コーディングってだいたいヘッダーから入りますよね。
見本のサイトにもよりますが、ヘッダーの中にnav要素とタイトルロゴが入っているケースもあるでしょう。
そういった場合、どうやって横並びにするのか悩みますよね。
一番手っ取り早い方法が、親要素にdisplay:flexを設定すること。
親要素にこのプロパティを設定すれば、一発で横並びにできます。
※ただし、古いブラウザでは対応していないというデメリットもあるので要注意。
より詳しいことに関しては、こちらのサイトが丁寧に解説してくれています。
横並びの仕方がわからないという方は、こちらも参考にしてみてください。
画像がダウンロードできない場合はどうすればいい？
見本サイトによっては、画像がダウンロードできない仕様になっていたり、背景画像として設定されていてダウンロードできないというケースもあるでしょう。
そういった場合は、GoogleChromeの検証ツールを使うのがオススメです。
右クリックで一番下にある「検証」というツールをクリックすると、記述されたHTMLやCSSをチェックできます。
この時に、画像をクリックすると「…/imge/xxxx.png」という文字列を見つけた場合は、その部分をドラッグして新しいブラウザを開いてダウンロードします。
これで画像ダウンロードが完了です。
画像の幅と高さってどうやれば調べられるの？
こちらも検証ツールを使えば調べられます。
検証ツールを開いて、画像をクリックすると「○（幅）×○（高さ）」が表示されるはずです。
CSSで設定するのもいいですが、私の場合は面倒くさいのでHTMLファイルにそのまま書いて模写コーディングしています。
HTMLで画像の幅と高さを設定するときの記述は、以下の通りです。
img src="image/sumple.png" width="300" height="150"
これで、画像のサイズを変えられます。
あくまで自己流のやり方なので、参考程度にとどめてもらえれば幸いです。
まとめ
今回は、模写コーディングでよく分からないところと解決策をご紹介していきました。
最初の段階はとにかく分からないことだらけで、挫折してしまうと人もいるでしょう。
ただ、個人的には分からない部分は調べて、その上で見本のサイトにある程度近づけているならOKじゃないかなと思います。
最初は部分模写で大丈夫なので、模写コーディングでつまづいて挫折しそう…という方は今回のブログを参考にしていただければ幸いです。
では、また次のブログでお会いしましょう。
