HTML&CSS

レスポンシブ画像の作成とアートディレクション

今回はレスポンシブ画像の表示方法についてです。 HTML5からimgタグで複数の画像を選択できる2つの新しい属性ができました。 それは「srcset」 と 「sizes」属性です。 サンプル 具体的なコード [crayo  >>続きを読む

「width:100%」と「max-width:100%」の違い

今回は「width:100%」と「max-width:100%」の違いについて焦点を当ててみます。 「width:100%」について 次のサンプルを見てください。 全体を囲むdiv要素に「width: 100%」を指定し  >>続きを読む

ブレイクポイントは「em」で指定〜スマホサイト作成

メディアクエリの設定でブレイクポイントの単位を「px」で指定することが多いと思いますが、「px」で指定するとSafariで思わぬ不具合に遭遇します。 これは2016年頃に広がったネタですが、いまだにSafariでは同様の  >>続きを読む

CSS〜インライン要素に使えるbox-decoration-breakプロパティについて

インライン要素に対してCSSで装飾することは珍しいかもしれません。 box-decoration-breakプロパティとは、要素の断片が複数の行、段、ページに渡る場合に描画する方法を指定します。 具体的にはインライン要素  >>続きを読む

CSS shape-outsideプロパティを使ってみよう

画像に対してfloatをかけて、テキストを流し込みをする場合、通常の写真なら特に問題はないのですが、画像の形を丸くした場合テキストもその円形に沿わせたくなります。 下図参照 このようにするには「shape-outside  >>続きを読む

CSSで立体的に回転するカードの作り方

div要素などで作成されたカード型のグリッドをマウスホバーで回転させる仕組みです。 回転はy軸を基準に回転して表面と裏面を入れ替えるもので、この仕組みをCSSで実現します。 完成サンプル GitHubソース カードの作成  >>続きを読む

CSS〜 object-fitでアスペクト比を保持しながら画像を拡大縮小

HTMLのimgタグで挿入した画像を拡大縮小をするには、img要素に対して「width:100%」とすればアスペクト比を保ちながら拡大縮小を行うことができます。このような仕組みの画像のことをフルードイメージと言います。   >>続きを読む

CSSでクリッピングマスクを使う方法

CSSでマスキングするにはクリピングマスクを使うことができます。 指定した要素にCSSで図形を描いて重ねることで、その図形以外の部分が非表示になります。 E { clip-path: shape } shapeはcirc  >>続きを読む

headerのコーディング例〜CSS

シンプルなヘッダー領域のコーディング例です。古典的な手法からFlexBoxを活用した方法の例です。 古典的な方法 要素を水平方向に中央揃えする方法は簡単に行えます。 例えばdisplay:blockの要素なら、幅を決めて  >>続きを読む

グリッドレイアウトの基本〜display:gridの使い方

Grid layoutについて これまでのfloatレイアウトで複雑なレイアウトを作成する場合には、divタグを多用するなどトリッキーな作業が必要でした。CSS3ではFlexレイアウトが開発され、フレキシブルなレイアウト  >>続きを読む

FlexBoxプロパティ〜まとめ

FlexBoxのプロパティと値をまとめたものです。 FlexBoxもfloatに代わってコンポーネントなどのレイアウトの中心的な存在になってきたと思われます。 ネット上にも団子の串刺しのようなイラストが乱立しているようで  >>続きを読む

マークダウンの勧め

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

FlexBoxの使い方(7)〜 flex-wrapについて

floatの代わりにdisplay:flexを使用するとレイアウトが簡単になります。けれども、場合によっては思わぬ挙動となり困る場合が出てきます。それは例えば幅の問題です。Flexアイテムに指定した幅はしばしば無視されて  >>続きを読む

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

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

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

HTML&CSSのコーディングで初心者泣かせなのがフロートを使ったレイアウトです。その理由は正しいfloatプロパティの原理原則を勉強してない事と、clearプロパティの正しい使い方を理解してないからです。 また  >>続きを読む

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

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

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

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

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

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

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

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

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

テーブルの記述はHTMLもCSSも面倒な設定や思う通りに行かない場合があったり、思わぬ落とし穴に悩むこともあります。 今回はテーブルについてしっかりと学習していきます。 HTMLでのテーブル関連タグの使い方 テーブル作成  >>続きを読む

Dreamweaver CC 2017.5で新しく加わったGit機能を使う方法

2017年6月にDreamweaver CC 2017にいよいよGitの機能が標準で搭載されました。さっそく使ってみることにします。 今回の記事はすでにGitの使用経験がありSorceTreeなどから乗り換えたいとお考え  >>続きを読む

CSSで表現するブレンドモード〜CSS3

ブレンドモードは2つの画像や画像と塗りをブレンドして表現するものです。 Photoshopなどで頻繁に活用される手法ですが、CSSでも使用することができます。 background-blend-modeプロパティ 注)I  >>続きを読む

CSS3でフィルター効果をつける

フィルター効果は本来SVGのグラフィック効果として実装されました。しかし、フィルター効果はCSSからも利用することができます。 CSSでフィルター効果をつけるのは非常に簡単な上にその効果も大きくPhotoshopなどでの  >>続きを読む

[HTML5.1] tfootの使い方が変わっています。

テーブルの構造化を行うタグ「tfoot」の使い方がHTML5.1で変更になりました。 「tfoot」は「thead」「tbody」の後に使用する事となっています。 HTML4.01時代は「thead」「tfoot」「tb  >>続きを読む

HTML5.1勧告でh1の使い方に変更〜アウトラインの作成

2016年11月にHTML5.1の勧告ではセクショニング・コンテンツ内であっても適切なランクの「heading」を使用する事とされています。 HTML5から「h1」の使い方が大きく変更されていました。 セクショニングタグ  >>続きを読む

Sublime Text3でSassとCompassを使えるようにする

SassとCompassの導入がすでに行われており、Sublime Text3でscssファイルを保存すると自動でコンパイルするための方法です。 そうするとKoalaなどを使用する必用もなく手軽にSassが使えます。 S  >>続きを読む

FlexBoxの使い方(6)〜flexプロパティの練習

flexプロパティの練習用サンプルを作成しました。 flex-grow、flex-shrink,flex-basisの値を入れてレイアウトを確認するものです。 値は数字の0以上の整数を入れてください。 数値入力後に「CS  >>続きを読む

FlexBoxの使い方(5)〜flexプロパティについて

flexプロパティについて解説します。 display:flexを指定したときflexコンテナはblockの性格を持ち、親要素の幅いっぱいに広がります。flexコンテナでflexアイテムをきれいに囲むためにはflexアイ  >>続きを読む

FlexBoxの使い方(4)〜display:inline-flexについて

display:inline-flexの使いどころについて解説します。 display:inline-flexについて 「inline-flex」はインラインレベルの flexコンテナボックスを生成するとCSS Flex  >>続きを読む

FlexBoxの使い方(3)〜flexアイテムの順番を入れ替え

flexアイテムの順番の入れ替えについて解説します。 flexBoxレイアウトの初期状態 flexBoxレイアウトをorderプロパティで並べ順を変えた状態 通常のflexBoxレイアウト orderで並び変えたflex  >>続きを読む