横並びにして、回り込みをさせないようにしたい！！ 結論 overflow: auto;を使う！！ イメージこんな感じ アイコンの下の部分にはテキストが回りこないようにしたい まずは失敗例から 失敗例 See the Pen 回り込みをさせない(悪い例) by tamago (@tamago324)…

marginは周りのボックスとの距離 marginの相殺 これのせいでややこしくなるらしい。今はよくわかっていない。 上下のmarginは重なることもある(条件が揃わないと重ならない) CSSのmarginとは？paddingとは？余白の指定方法まとめの4.marginの相殺にも書いて…

いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)のChapter6のSection2と3のまとめ ul：順序なしリスト ol：順序ありリスト リストにはデフォルトでCSSが設定されている。(デフォルトCSS) list-style-typeで・や番号がつく marginとpadding…

パンくずリストを作るにはリストを使う HTMLでの記述でのポイント olを使う CSSでの記述でのポイント インラインボックスにする：横並びになる 各要素の後ろに”»”をつける：階層になる 最後の要素だけ"»"はつけない "»"は好きなものに変えられる .breadcrumb…

text-decorationプロパティを使う a { text-decoration: none; } a:hover { text-decoration: underline; } カーソルが重なったときだけ、下線を引くようにしている！ 色を変えるとかもするといいのかもね！ See the Pen MVJLGW by tamago (@tamago324) on C…

これに関してはあまり理解できていないと思う。(2018/3/19) floatとoverflowの2つのプロパティを使って、実装する Emmentでは以下のようになる .float-clear>.float-box,p .float-clear { overflow: hidden; } .float-box { float: left; } <div class="float-clear"> <div class="float-box"> <img src="google.com" alt=""> </div> <p>回り込み回り</p></div>…

imgタグをaタグで囲むだけ a>img <a href="http://google.com"> <img src="google.jpg" alt="Googleへ"> </a> 画像の下のテキストも含めてリンクとする 画像だけだと、それがリンクなのかがわからないため、テキストを表示するとよい aタグの中にテキストを表示することで、画像とテキストがリンクになる a>div>img<p <a href="http://google.com"> <div> <img src="google.jpg" alt="Googleへ"> </div> <p>Googleへ行く</p> </a>…

imgタグを使うことで画像を表示できる <img src="画像のパス" alt="画像が表示できなかった場合に表示するテキスト" width="横幅" height="高さ"> 例) <img src="images/asakusa.jpg" alt="浅草の風景" width="900", height="600"> width属性とheight属性 画面サイズによって画像のサイズを変えることが多いため、widthとheightは指定しないらしい？ 画像の表示サイズはできるだけ指定するようにしましょう。画像サイズを指定することで、画像…

::afterみたいなものを擬似要素という。 疑似要素 (Pseudo-elements) - CSS | MDN ::after: 選択した要素の後ろに装飾を行う ::before: 選択した要素の前に装飾を行う contentプロパティを使って、装飾する内容を設定する 例）メインとサブにそれぞれ装飾を…

属性や属性の値によって、要素を選択できるセレクタ。タイプセレクタやclassセレクタでは指定しにくい要素の場合に使う。 以下の4つの要素を指定できる。 属性が値のとき 属性が追加されているとき 属性が値で始まるとき 属性が値で終わるとき

下線を消すにはtext-decorationプロパティを使う。 例）aタグの下線を消す a { text-decoration: none; } また、リンクのデフォルトでは下線は表示されているが、一般的にはマウスカーソルが当たったら下線を表示するようになっているらしい。 ツイキャスの…

例えば、「カーソルが当たっているときにテキストの色を変える」とか a:hover { color: green; } aタグ全てにスタイルを設定する場合(擬似クラスを設定していなくても適用したいスタイル) a { color: blue; } 擬似クラス 擬似クラス：a:hoverのhoverの部分の…

サブタイトルのためのタグはないため、作るときにはh1の中にspanとbrを使って実装する span br サンプル HTML <h1>東雲めぐの配信最高！！<br> <span class="subtitle">〜毎朝、早起きして癒やしてもらおう〜</span> </h1> h1内にタイトルとサブタイトルを記述し、span内にサブタイトルを記述する CSS h1…

colorプロパティを使う。 値の指定の仕方 16進数(6桁の数値)で指定する R(赤)、G(緑)、B(青)をそれぞれ16進数で2桁ずつで表現する。 #赤緑青で指定する body { color: #808080; } カラーキーワードで指定する redやblueやblackなどのキーワードで指定するこ…

以下の2つのプロパティを使って、実現する padding-leftプロパティ text-indentプロパティ padding-leftプロパティ その要素をどの程度ずらすか設定できる padding-left: 1em;は「1文字右にずらす」という意味。左側のpaddingを1文字分あけるという意味でも…

text-alignプロパティを使う。 text-align: left;：左揃え text-align: right;：右揃え text-align: center;：中央揃え text-align: justify;：均等配置 均等配置 値にjustifyを設定する 指定したセレクタのテキストを均等に表示するようにしてくれる。長い…

font-familyプロパティを使う 複数指定する場合、,で区切る フォント名に空白や日本語が入っている場合、"で囲む 書いてある順番でフォントがあるか確認していく。あれば、そのフォントで表示する フォントの種類を設定するには以下の２つがある 端末にイン…

行間を開けるにはline-heightプロパティを使う。上下にスペースができる body { line-height: 1.8; } 行間は「フォントサイズ * 指定した値」となる。 line-height: 1.8;では、フォントサイズの1.8倍の行間になる 値としては1.5〜1.8がいいらしい。見出しな…

フォントサイズを設定するときにはfont-sizeプロパティを使う。 フォントサイズの単位でemと%を使うときは注意 フォントサイズは親要素のフォントサイズを1em(100%)として扱うため入れ子になっていると表示の制御が難しくなる また、主要なブラウザの標準的…

ヘッダーやフッターを共通化したい！！ jQueryのload()を使うといいらしい 早速やってみる フォルダ構成は以下の通り . ├── mock │ ├── header.html │ └── top.html └── static └── css └── main.css header.html(読み込まれる側) <nav> <ul> <li><a href="#">ホーム</a></li> <li><a href="#">マイページ</a></li> <li><a href='#'>ログ</a></li></ul></nav>…

CSSみたいな静的ファイルをbottleで扱うときには、ルーティングを設定してあげる static_fileをインポートして、処理を記述する 以下のようなファイル構成だった場合 . ├── bottle.py ├── server.py ├── static │ └── css │ └── main.css └── views └── top.…