Flex-boxやGridレイアウトなど、Webサイトのレイアウトを表すHTML/CSSに関する記事です。
WEB制作 全般 GridやFlexレイアウトで使えるorderプロパティ
HTMLでレイアウトを構成するとき、display: grid ・ display: flex は頻繁に利用されていると思いますが、それらで利用できるorder...
WEB制作 全般 columnsプロパティに関するcssプロパティ
columnsプロパティに関係してくるcssプロパティの話です。前記事は「columnsで作る段組みレイアウト」まずは、段組みレイアウトにおいて全幅表示させたい...
WEB制作 全般 columnsプロパティで作る新しい段組みレイアウト
最近のWEBサイトレイアウトは、gridあるいはflexで設計するのが一般的ですがもう少しするとそれも古い話となるのかも知れません。.demo { paddin...
WEB制作 全般 z-indexに頼らない。HTML要素の重なり方を再確認する
css記事のアクセス数を眺めているとstickyやz-indexなどの重なり系トラブルに関する記事が多いので、その辺りに関する基本をまとめておこうかと思います。...
WEB制作 全般 position: absolute で位置を指定しない場合
要素の配置情報を指定するpositionプロパティに「absolute」があります。通常の使い方では、absoluteを指定された要素は「position: s...
WEB制作 全般 grid-auto-flowで配置方法を指定する【gridレイアウト】
gridレイアウトでは基本的に、grid-template-columns・grid-template-rowsで指定したグリッド枠に沿って左詰めで順番にグリッ...
WEB制作 全般 Gridレイアウトの余白・間隔のとり方
.demo{display:grid;width:100%;max-width:600px;padding:8px;border:4px dashed #aaa...
WEB制作 全般 grid-template-areasとgrid-areaを使ったレイアウト配置
「グリッドアイテムの配置」でgrid-column・ grid-row でグリッド線を指定するアイテム配置方法をお伝えしましたが、今回はエリアに名前をつけて配置...
WEB制作 全般 Gridレイアウトのアイテム配置
.demo{ display: grid; text-align:center;}.grid1{ grid-template-columns:repeat(3,...
WEB制作 全般 gridレイアウト 基本の作り方
WEBサイトのレイアウトでは最新方法であるgridレイアウト。flexが列または行、一方向に配置していくレイアウトであるのに対して、girdレイアウトは列、行の両方を意識した二次元レイアウトが可能になった配置方法です。具体的なGridレイアウトについて解説していきます。
WEB制作 全般 position:stickyが効かない原因とエラー解消方法
最初は通常のレイアウト配置(static)、スクロールすると指定の絶対位置に固定され(fixed)、次のsticky要素が来ると相対位置に固定(absolute...
WEB制作 全般 vertical-alignが効かない人は多分勘違いしている
知らなくても大丈夫(個人比)なプロパティですが、モヤモヤしている人は多いと思うので、今回はvertical-alignの解説です。私がcss独学を初めた当時、あ...