HTML&CSS

HTML&CSS

CSS flex〜チートシート(動画あり)

flexBoxの主軸と交差軸についての動画 FlexBoxのプロパティと値をまとめたものです。 FlexBoxもfloatに代わってコンポーネントなどのレイアウトの中心的な存在になってきたと思われます。 ネット上にも団...
HTML&CSS

マークダウンの勧め

マークアップ言語にはHTML言語も含まれるわけですが、そのほかにも様々な記述方法があります。そしてその中の一つにマークダウンという記述方法があります。GitHubの中でもDocumentとして活用されています。 HTML化するほどのもので...
HTML&CSS

FlexBoxの使い方(7)〜 flex-wrapについて(動画あり)

flex-wrapの動画 floatの代わりにdisplay:flexを使用するとレイアウトが簡単になります。けれども、場合によっては思わぬ挙動となり困る場合が出てきます。それは例えば幅の問題です。Flexアイテムに指定し...
HTML&CSS

全称セレクターと擬似クラス

全称セレクターは簡単なサンプル作成時にmarginやpaddingを初期化する時くらいしかお目にかからないのですが、実はもっと使い方があります。 CSSの仕様書には次のように記述されています。 全称セレクタ * (名前空間接頭辞なし...
HTML&CSS

floatの仕組みとoverflowでfloat解除できる理由

フロートの基本動画 フロートについて HTML&CSSのコーディングで初心者泣かせなのがフロートを使ったレイアウトです。その理由は正しいfloatプロパティの原理原則を勉強してない事と、clearプロパティの正しい使い方...
HTML&CSS

CSS詳説(2)構文と基本データ型について

このカテゴリでは構文と値についての記述されています。 構文 トークン まずはトークンの決まりごとについて。 プログラム言語に置いてトークンとは、コードの最小単位の語句のことで、ここでは字句レベルで、CSSスタイルシートはトークンのシ...
HTML&CSS

CSS詳説(1)仕様書を見よう

CSSを本気で勉強するとしたら、仕様書をまず読みましょう。 今回の記事はCSSの仕様書に沿って重要な点をチェックしていきたいと思います。 もしあなたが入門書を勉強したり、ネットで情報を探しながらなんとなくCSSを覚えているとした...
HTML&CSS

Tableの使い方詳説〜HTML & CSS(2)tableやtdのborderとwidthの関係

セパレートタイプのボーダーの考え方 tableのボーダーは通常のボックスモデルの考え方ではありませんので注意してください。 まず、tableタグにボーダーを設定するとテーブル全体の外枠だけボーダーが引かれます。その際にwidth指定する...
HTML&CSS

Bootstrap4でのGrid system変更点〜Flexがポイント

Bootstrapでは12等分のカラムでグリッドを作成するGrid systemが用意されています。また、レスポンシブレイアウトにも柔軟に対応できる仕組みのため、複雑なレイアウトを簡単にコーディングすることができます。 Bootstrap...
HTML&CSS

Tableの使い方詳説〜HTML & CSS(1)

テーブルの記述はHTMLもCSSも面倒な設定や思う通りに行かない場合があったり、思わぬ落とし穴に悩むこともあります。 今回はテーブルについてしっかりと学習していきます。 HTMLでのテーブル関連タグの使い方 テーブル作成に最低限必要な...
スポンサーリンク
タイトルとURLをコピーしました