CSS

Code CSS JavaScript

【jQuery&CSS初心者】レスポンシブなハンバーガメニューを実装する方法

jQuery、CSS初心者のためのレスポンシブな「ハンバーガーメニュー」を実装する方法を解説していきます。イラストと実際のソースコードを掲載しながら解説していますので、初心者の方でも簡単に理解できます。

Code CSS

【HTML/CSS初心者】サイドバーにスライドメニューを作成する方法を解説

vこんにちは、イケゾーです。 今回は、WEBページに必須「スライドメニュー」の作成方法を解説していきます。 スライドメニューとは、マウスオーバーすると、背景色や文字色が変わって、横方向にメニューがスライドして表示されるものです。 (こちらは「サイバー大学」様のサイトを模写したものです)   このように動きのある技術って、難しいイメージありますよね。特に初心者からすると、ちょっと構えてしまいますよね。裏側で何やってんだろと思ってしまいますが、仕組みを理解すれば簡単なのです。コードだけでなく、考え方 ...

Code CSS

【HTML/CSS初心者の模写】tableテーブルで表の作成とデザインする基本方法を解説|Norton編

こんにちは、イケゾーです。 今回は、セキュリティでおなじみ「Norton」のサイト模写の解説をしていきます。(2020/10時点) 今回作るテーブル   この記事を読むと tableテーブルで表を作成する方法が分かります 初心者向けに丁寧な解説をしています。「簡単すぎる」と感じたところは飛ばしながら読んでいってください。そのままコピーして頂いても同じように実装できますので、ぜひ手を動かしてみてください。では、やっていきましょう。   【HTML/CSS初心者の模写】tableテーブルで ...

Code CSS HTML

【HTML/CSS初心者の模写】ヒーロー画像の上に文字を重ねて表示する方法を解説|Norton

こんにちは、イケゾーです。 今回は、セキュリティでおなじみ「Norton」のサイト模写の解説をしていきます。(2020/10時点) WEBサイトを表示した時に表示される大きな画像のことを「ヒーロー」と読びます。 ヒーローでは、画像のみを表示する場合もありますが、文字を画像の上に配置して表示する場合もあります。Nortonのヒーローでは、「カートに入れる」というボタンも配置していますね。このようなコーディングができるような方法を解説します。   ヒーローとは   この記事を読むと 画像の ...

Code CSS HTML

初心者向け【WEBサイト模写のやり方】HTMLとCSSのテンプレートを作る方法を解説

こんにちは、イケゾーです。   HTMLやCSSの参考書を一通りやった後の最初の壁「次何やればいいんだろ」ありますよね。 たいていの方は、模写をされるかと思います。おすすめのサイトや、好きなサイトをいくつか模写に挑戦しますよね。 僕も力試しで挑戦しました。ただ、最初ってHTMLとCSSに何を書いたらいいんだっけ。と時間を無駄にしてしまいました。   そこで、何度も使いまわせるテンプレートを用意したらどうかと考え、作ってみました。内容は基本的なものですが、整理して保管しておくと、毎回模写 ...

© 2021 IkezoooBlog