[HTML / CSS] flexで画像や説明文を横並びさせる
Flexboxを使って、画像と説明文のセットを横一列に並べるレイアウトの作り方を説明する。 完成形 下記のようなイメージを作る。 HTMLの用意 まずはHTMLを用意する。 「offers」というクラスの中に、「offe...
Flexboxを使って、画像と説明文のセットを横一列に並べるレイアウトの作り方を説明する。 完成形 下記のようなイメージを作る。 HTMLの用意 まずはHTMLを用意する。 「offers」というクラスの中に、「offe...
ウェブサイト作成の際の備忘録。 イメージとしては、下記のようなレイアウトを作成する時。 HTML 下記のように用意。 すると縦のように並ぶ。 CSS 上記の「cozyspace-img」クラスと「cozyspace-me...
ヘッダーを固定させるための備忘録。 最初にヘッダーを作ると、固定されていないので、スクロールした時にヘッダーが消えてしまう。 これをスクロールしても上部に固定させるようにする。 position: fixed;とz-in...
HTMLサイトの見出しの下線デザインで、CSSを使ってタイトルより短い下線を表示させる方法を説明する。 このABOUTの下のボーダーラインを作成する。 HTMLの用意 HTMLはシンプルに<H1>と<p...
ここではHTMLサイト作成時に、ロゴを左に、メニューを右に横並びに配置する基本的なヘッダーの作り方を解説。 コピペで使えるheaderのHTMLとCSSを提供しているウェブサイトもいくつか紹介する。 HTMLでロゴとメニ...
メイン画像を貼り付けようとした時にどうしても余白ができてしまった時の対応をメモ。 起こったこと メイン画像を貼った時に、画面いっぱいに表示させようと思ったのだが、どうしても周りにスペースができてしまった。 解決法は? m...