flexbox

WEB制作

• background-image, box-shadow, CSS, flex-direction, flexbox,

実践！HTMLとCSS！コンテンツ作成の効率化と左右逆レイアウト

今回は以前作成したコンテンツである左に画像、右にテキストに配置したレイアウトを簡単に右に画像、左にテキストとレイアウトを変えていく方法を初心者向けに解説していきま […]

続きを読む

WEB制作

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

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

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

続きを読む

WEB制作

• @media, center, CSS, flex: 1;, flexbox,

実践！HTMLとCSS！コンテンツの横並びとレスポンシブ対応

アイコン入りのコンテンツを横並びにして、レシポンシブ対応する方法を今回は初心者向けに解説していきます。 ウェブサイトを制作する為には、少なからずとも効率化は必要と […]

続きを読む

WEB制作

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

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

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

続きを読む

CSS

• align-items, baseline, center, CSS, CSSコーディング,

初心者の為のCSSコーディング。横並びFlexBoxの縦位置調整

今回はFlexBoxで横並びされた要素の縦軸の位置調整を、初心者向けに解説します。 以下のように要素を横並びにしたソースコードを準備しました。 See the P […]

続きを読む

CSS

• align-items, CSS, CSSコーディング, flexbox, Flexアイテム,

初心者のCSSコーディング。FlexBoxの仕組みを知ろう。

FlexBoxで初めてCSSコーディングをしたけど、後々『なぜ指定した内容が反映されないのか』という壁に当たる場面があります。 これについてはFlexBoxの仕組 […]

続きを読む

CSS

• center, CSS, CSSコーディング, flex-end, flex-start,

初心者の為のFlexBox。横方向の位置調整する５つの方法。

今回はFlexBoxで横並びにした要素の位置調整を初心者向けに解説していきます。 更にこの位置調整には沢山のプロパティが存在する為、今回は横方向（横軸）に対する位 […]

続きを読む

CSS

• CSS, CSSコーディング, flex-direction, flex-wrap, flexbox,

FlexBoxの基本。ブロックの並びを変えてみる。

今回はCSSでレイアウトを行う上で、基本となる『FlexBox』について初心者向けに解説していきます。 今回のポイントはブロックの並びです。 『横並び』『縦並び』 […]

続きを読む

CSS

• CSS3, display, flexbox, float, float回り込み,

HTML5とCSS3を使ってのレイアウトと歴史。flexboxとは？

今回はHTMLやCSSでレイアウトを行う際の要素やプロパティを、歴史を追いながら解説していきます。 サイト制作初期ではHTMLでtableタグを駆使して『Tabl […]

続きを読む