WEBデザイン Flexbox 8 (並び順と中央寄せ)
「flex-direction」は並び方を横に並ばせるか縦にならばせるかを指定する。「flex-direction:row;」だと横並び（左から右へ）「flex-direction:column;」だと縦並び（上から下へ）例１ rowを指定...
WEBデザイン
WEBデザイン WEBデザイン Flexbox 7 (グリッドレイアウトVer2)
フレックスボックスを使ったタイル状のインデックスページ、改訂版幅を変えて段組みを簡単に変更できます。また、order の設定でタイルブロックの配置を自由に変えられるので、レイアウト変更が簡単にできてよいですね。これ、２カラム・３カラムのデザ...
WEBデザイン Flexbox 6 (グリッドレイアウト)
Flexboxレイアウトで、３カラムデザインなのだけど、タイル状配置を利用したレイアウトを考えてみた。（こういうタイル状レイアウトを「グリッドレイアウト」っていうらしい） TITLE TEST1 Lorem ipsum dolor sit ...
WEBデザイン Flexboxに挑戦 5 (２カラム／３カラム)
２カラム・３カラムのレイアウトを作ってみる。（※初めてやったので参考程度にお願いします。）２カラム TITLE カテゴリ カテゴリ カテゴリ カテゴリ カテゴリ カテゴリ 本文 ひとまず何はともあれ、そうした幸福・仕合せのための偽りは、尊敬...
WEBデザイン Flexboxに挑戦 4 (縦方向の中央寄せ)
フレックスボックスは左右・中央寄せがとても簡単これ、理解したらとても便利だと思いました。ん？中央寄せなんて「text-align:center;」で済む話では？と思うかも知れませんが、縦方向の中央寄せは難しいですよね。縦位置の中央寄せは「v...
WEBデザイン Flexboxに挑戦 3 (grow／shrink／basisとは)
フレックスボックスの、子アイテムのスタイルでは、ショートハンドとして、このような書き方が推奨されているとか。flex:＜因数1＞ ＜因数2＞ ＜因数3＞;これは何を意味しているかというと因数1 ⇒ flex-grow:＜数値＞;因数2 ⇒ ...
WEBデザイン フレックスボックスに挑戦 2 (改行問題)
フレックスボックスは、中に数が定まっていない複数のアイテムが詰め込まれるような状況が得意ということですかね。（うまくレイアウトを調整して埋めてくれるような感じ） #main .smpl1{ width:300px; border:2px s...
WEBデザイン フレックスボックスに挑戦(Flexboxとは？)
★フレックスボックスとは？フレックスボックスを使うと、従来のFLOATなどを使ったレイアウトより、少しだけ自由度が高い配置ができる。※フレックスボックスを使うと、FloatをかけてあとでClearするための空の領域を作ったりする必要がない。...
WEBデザイン 【CSS】回り込み(float)解除の３つの方法
今更ですが、float解除の３つの方法、覚書flaotを使って回り込みをした場合、floatを解除してやらないと、思わぬところでレイアウトが崩れる場合がありますね。(親要素の中にある子要素にfloatプロパティが設定されていると、内容をもた...
WEBデザイン 無料イラスト・素材
最近描いたもの著作権を主張するほどのモノは描いてないので、使いたい方はご自由にどうぞ～Strandberg Boden OS 7ESP E-II ARROW-7IBANEZ 8弦ギタークラシックギター（を弾く人）ソーラーパネルと照明を使った...
WEBデザイン 無料イラスト素材
自分で作ったロゴ素材など大したものはありませんが、使いたい方はご自由にどうぞ～WiFiマーク小切手タタミ八畳日記帳テレビテレビ（クエスチョン）テレビ（NO MORE NHK）ダンボールinダンボールニュースペーパー（新聞）迎春（あけおめこと...
WEBデザイン テーブルの空白のセルに斜線を引く方法【覚書】
テーブルを使って表を作った時に、縦軸と横軸に見出し・項目を並べた時、左上の角のマスがひとつ空欄になってしまいますね。よくそこには斜線を引いておいたりしますね。手書きや表計算ソフトなら、それでいいのですが、WEB上の表記ではそれが実現できる機...