margin

WEB制作

• :hover, <div>タグ, <h2>タグ, <section>タグ, <span>タグ,

実践！HTMLとCSS！ボタン付きリンクと画像入りコンテンツの制作

今回は上の写真にあるような画像とリンクボタンのついたコンテンツの作成方法を初心者向けに解説していきます。 単に画像を入れると言っても、ブラウザの大きさや画面の大き […]

続きを読む

WEB制作

• :hover, background-color, border-radius, Class属性, color,

実践！HTML5とCSS3でアイコン入りのコンテンツを作る

今回はサイトの見出しでよく目にする、アイコン付きのコンテンツの作り方について初心者向けに解説していきます。 ウェブデザインを行う上では、王道のレイアウトでは無いで […]

続きを読む

WEB制作

• <h1>要素, <header>要素, align-items, align-items: center;, background-image,

実践！HTMLとCSS！サイトの顔！ヒーローイメージを作る

ヒーローイメージとは、ウェブサイトのヘッダー部分に表示される画像を示します。 すなわち、サイト訪問者が一番最初に目にするデザインとなります。 この様にヒーローイメ […]

続きを読む

CSS

• CSS, CSSコーディング, margin, padding, リセットCSS,

CSSコーディング。謎の余白ができた時の２つの対処法

CSSでブロックや画像をレイアウトする時に思ってもいない場所に余白ができた経験はないでしょうか。 そこで今回は初心者向けにこの余白を無くす方法について解説していき […]

続きを読む

CSS

• CSS, CSSを学ぶ。, fixed, margin, padding,

CSSを学ぶ。『position:fixed;』を使ってナビゲーションバーを固定する。

以前横並びのナビゲーションバーを作成しました。 そこで今回はこの『ナビゲーションバーを上部で固定する方法』について、初心者向けに解説していきます。 前準備 それで […]

続きを読む

CSS

• CSS, CSSを学ぶ。, height, margin, position,

CSSを学ぶ。positionプロパティを使って画像に文字を重ねる。

positionプロパティを使って、要素の重ね合わせをを解説していきます。 例として今回は画像の上にテキストを重ねて表示してみます。 初心者向けの解説ですので、分 […]

続きを読む