WEBデザイン Flexbox 7 (グリッドレイアウトVer2)
フレックスボックスを使ったタイル状のインデックスページ、改訂版幅を変えて段組みを簡単に変更できます。また、order の設定でタイルブロックの配置を自由に変えられるので、レイアウト変更が簡単にできてよいですね。これ、２カラム・３カラムのデザ...
WEBデザイン 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プロパティが設定されていると、内容をもた...
日記・雑記 夏の過ぎゆく寂しさよ
お盆を過ぎれば後は残暑お盆を過ぎればあとは残暑 夏のイベントはお盆前に集中して お盆の後はイベンゆトがないので寂しい本当に、時が過ぎ去るのはあっという間で猛暑もお盆前の台風までで一段落、本当に暑かったのは二週間弱か、あとは涼しくなる一方だ。...
エンターテイメント・アート オスカル！はなきんリサーチ
実は最近、密かに、毎週楽しみにしている番組(笑)第一・第二・第三金曜深夜放送テレビ朝日｜オスカル！はなきんリサーチ 公式サイト剛力彩芽、藤田ニコル、本田望結がMCを務める、情報リサーチ番組が誕生！毎回、世代やジャンルを問わず、ある特定の層に...
医療・ヘルス・ダイエット 閃光輝く暗い点 歯車？ 閃輝暗点
ラーメン屋で飯を食いながらスマホを見ていたら、文字が読みにくく感じた。どうも、視野の中心に盲点ができてしまったような・・・スマホの文字は小さいので、分かりやすい。隣の文字は読めるので文章が読めないわけではないが、ちょうどフォーカスされている...