webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

ウェブデザインを勉強中

2016-06-11から1日間の記事一覧

課題:06-10

問10 button を作る。<p><button class="redbtn"><a href="#"> red </a></button></p> button の見映えを変更する。border-radius imgをfloatでレイアウトする。margin の値をうまくとって余白が均等になるようにする。 jQueryでは、どのようにセレクターを使うかで悩んだ。取っ掛かりでは、属性セレクタを使うことに…

button のデザインを変える

button要素の見映えを変える 初期設定のまま buttonのheightは32pxに設定してあります。ここでborder-radius: 16px 。 右下にフレーのシャドウがついています。 box-shadow: none; と記述しても消えません。 border-style: none; と記述してみました。消えま…

display: flex; 現時点でまとめる。

カラム落ちを前提にするならば、float 見出しのとおり、カラム落ちさせるならば、floatを使う。 そうでないときは、display: flexが便利。 ナビゲーションなど。 まず並べる display div id="flexBox" に、display: flex; 「横」に並べるには、flex-directio…

表示について考えるための記録

justify-content:

やりたいことは、 flexBoxの幅を指定しないで、 flex-wrap: wrap;にして、 ボディーのセンターに配置する。 ボディー幅を変えても、画像がボディーの中央にいる。 justify-contentの値の初期値は「flex-start」 これを、「flex-end」にしてみると… body の右…

flexBox 用語の定義

目的を叶えるには、justify-content を使うらしい。 順番も入れ替えられるみたいです。

flex-wrap: wrap;

display: flex; の続きです。そのままでは、とにかく横一列にしか並ばないので、なんとかします。 2列以上にしたいときは、下に、「flex-wrap: wrap;」と追加すればよい。そうすれば、親要素の幅に合わせて改行してくれる。とても便利! 以下、画像の横幅を…