HTML&CSS

マークダウンの勧め

マークアップ言語には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  >>続きを読む

FlexBoxの使い方(2)〜整列の方法とfloatレイアウトとの違い

FlexBoxを使った整列の方法とfloatとの違いを解説します。 floatレイアウトとFlexBoxレイアウトの違い flexレイアウトの例・・・・自動で高さが揃う floatレイアウトの例・・・・高さを揃えることが  >>続きを読む

FlexBoxの使い方(1)〜display:flexについて

通常フローしたブロック要素を横並びにするにはこれまでfloatプロパティを使用していましたが、その挙動は難しくて入門者を困らせる関門でした。CSS3で定義されたFlexBoxの仕組みを使うと簡単に横並びのレイアウトが出来  >>続きを読む

可変レイアウト(Fluid Layout)作成のポイント

DogRoboの一日は朝食で始まる。 ロボットの朝食なんてオイル臭い丸薬のようなものと思うだろうが、実際はトーストと目玉焼きにカフェオレとシャレている。特にカフェオレにはこだわりがある。牛乳とマンデリンコーヒーの割合は7  >>続きを読む

ボーダーに画像を使う方法〜CSS3

画像が使えないボーダーなんてジャムを入れない紅茶のようなものだ。 ボーダーに画像を適用するには border-image-sourceプロパティで画像を読み込んで、border-image-sliceで幅を指定すればよい  >>続きを読む

マルチカラムレイアウト 段組の作成〜CSS3

一般的にWebで読みやすい行の長さは、約30文字から45文字前後くらいといわれています。具体的な文字数の根拠は不明ですが、あまり長すぎる行は読みにくい傾向になります。 *「ブログデザインを考える:1行の字数とWEB幅」に  >>続きを読む

Koalaの使い方〜Sass

KoalaはSassをGUI環境で使うことができるコンパイラです。デザイナーさんはコマンド操作よりも、こちらの方が使いやすいかもしれません。 ここではKoalaの使い方を学習します。 Koalaのインストール(Windo  >>続きを読む

SVG〜フィルターを使ってスライムのような効果

SVGのフィルター効果を使ってスライムのような効果を付けてみましょう。 応用するとモバイルのハンバーガーボタンの変わりにもなります。 元ネタはCSS-TRICKSのサイトです。 サンプル *このサンプルはSafari9.  >>続きを読む

SVGとアニメーション2〜pathを描くようなアニメーション

CSS3を使用したアニメーションの例です。 ハートのパスを描いて最後に赤く塗りつぶすものです。仕組みがわかれば簡単に応用できて、見栄えのするパーツを作成できますのでマスターしておきましょう。 サンプル SVGコード ハー  >>続きを読む

SVGとアニメーション1〜pathに沿って移動するアニメーション

今回ははSVGのpathに沿ってDOM要素をアニメーションさせる方法です。 SVGのpathに沿ってアニメーションさせる CodeGridの記事が元ネタです。(有料ですがフロントエンドの方にはお勧めのサイトです。) シン  >>続きを読む

SVG〜Illustratorで作成

SVGの基本的な描き方は「SVG入門」で書きましたが、四角や丸などを描くならまだしもちょっとしたイラストを描くだけでもコードで描写するのは現実的ではありません。 今回はIllustratorであらかじめイラストを作成して  >>続きを読む

SVG入門

SVGとは SVG(Scalable Vector Graphics)とはベクター形式で描画することができる画像形式です。一般的な画像はラスタ形式のもので拡大すると画像が劣化しますが、SVGはベクター形式ですから劣化しな  >>続きを読む