HTML&CSS

マークダウンの勧め

マークアップ言語にはHTML言語も含まれるわけですが、そのほかにも様々な記述方法があります。そしてその中の一つにマークダウンという記述方法があります。GitHubの中でもDocumentとして活用されています。 HTML化するほどのものではないが、備忘録や技術マニュアルなどマークダウンの方がよりシンプルで軽量です。 気軽に覚えられますので、様々に活用してみましょう。 MarkDownで知っておくこと マークダウンで記述した文書の拡張子は「.md」とすることができます。 マークダウン記述した文書を閲覧するにはブラウザに拡張機能を入れて閲覧します。 例えばChromeの場合、「Markdown Preview Plus」を拡張機能で導入します。 この拡張機能は使い方がちょっとわかりにくいです。導入したらすぐに見られるというわけではありません。次の手順で設定が必要です。 Chromeに次のアドレスを入れます。「chrome://extensions/」 表示されたページで「Markdown Preview Plus」の項目を探します。 詳細を開きます。 「ファイルの URL へのアクセスを許可する」にチェックを入れます。 ここからは任意です。 「Markdown Preview Plus」のアイコンがブラウザ上部に表示されていますので選択します。 出てきたメニューから「Options」を  >>続きを読む

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

flex-wrapの動画 floatの代わりにdisplay:flexを使用するとレイアウトが簡単になります。けれども、場合によっては思わぬ挙動となり困る場合が出てきます。それは例えば幅の問題です。Flexアイテムに指定した幅はしばしば無視されてしまうことがあります。 次の例はフロートを使用した固定レイアウトの例です。フロートレイアウトをFlexBoxでレイアウトした時に起こる現象です。 サンプル 単純に「display:flex」を使用するとwidthの値は無視されて横1列に並びます。今回は画像のwidthを100%としてフルードイメージにしていますので縮小されて横並びになります。 サンプル flex-wrap:wrapを使用すると画像はフロートレイアウトのように2行3列の配置になります。 サンプル Web動画記事一覧

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

全称セレクターは簡単なサンプル作成時にmarginやpaddingを初期化する時くらいしかお目にかからないのですが、実はもっと使い方があります。 CSSの仕様書には次のように記述されています。 全称セレクタ * (名前空間接頭辞なし) が 単体セレクターシーケンス 中のコンポーネントたった1つではなく、また直後に 擬似要素 が存在しない場合、その * を省略し全称セレクタの存在を暗示させてもよい。 つまり「*.warning 」と 「.warning」 は同じことであり、「*#myid」 と 「#myid」 も同じことを表します。通常のクラスセレクタやIDセレクタの記述は全称セレクタを省略して記述していることになります。 注意すべき点として仕様書では次のような注意点の記述があります。 Note: 混乱を避けるため * は省略しないことが望ましいだろう。混乱とはたとえば div :first-child と div:first-child の違いを考えると分かりやすい。この場合は div *:first-child と記したほうが理解しやすいだろう。 擬似クラスで「div :first-child」と記述する場合は混乱を避けるために「div *:first-child」と記述すべきです。 困ったことに、「HTML5&CSS3標準デザイン講座」 翔泳社発行の本では擬似クラスの  >>続きを読む

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

フロートの基本動画 フロートについて HTML&CSSのコーディングで初心者泣かせなのがフロートを使ったレイアウトです。その理由は正しいfloatプロパティの原理原則を勉強してない事と、clearプロパティの正しい使い方を理解してないからです。 また、clearプロパティよりももっと簡単に使えるoverflowで解決する方法については、その仕組みがどこにもちゃんと解説されてないため、おまじない的な使い方という印象が拭いきれずに躊躇するためではないでしょうか。 今回はなぜoverflowを使うとフロート解除ができるのかその理由を解説しますが、まずfloatとclearの原理を簡単に復習しておきます。 floatの仕組み floatプロパティは値を「left」にすると左に配置され、「right」にすると右に配置されると単純に理解していると使いこなせません。正しい動きを理解しておきましょう。 floatの仕組みはCSSの仕様書の視覚整形モデル9.5 浮動のところに書いてあります。 また、フロートの仕組みを正しく理解するには包含ブロックの考え方を知っておく必要があります。まずは、包含ブロックについて調べておきましょう。 包含ブロックについての説明はこちら 視覚整形モデルで記述されているfloatプロパティは次のような仕様です。 浮動体の配置:’float’プ  >>続きを読む

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

このカテゴリでは構文と値についての記述されています。 構文 トークン まずはトークンの決まりごとについて。 プログラム言語に置いてトークンとは、コードの最小単位の語句のことで、ここでは字句レベルで、CSSスタイルシートはトークンのシーケンスで構成されると定義されています。 その後、具体的なトークンと定義が記述されています。 例えば、記号のところでバックスラッシュが使われているものは、バックスラッシュはエスケープです。バックスラッシュ以降の記号そのものをその記号として表します。つまりバックスラッシュは無いものとして見れば良いです。 コメント(COMMENT)は正規表現で書かれています。要は/**/を使いなさいということです。 #は#の後になんらか識別名を入れて記述することができるとなっています。これはつまりID名を表す時に使います。 #はHASHとなっており、シャープではないことに気づくはずです。id名をシャープと呼ぶ人が多いですが、ハッシュです。 ATKEYWORDは@識別名で記述可能ということですね。 数字はそのまま数字を記述すればよく、パーセンテージは数字の後に%をつけます。 キーワード キーワードの記述はダブルクオテーションで囲まずに、そのままキーワードを記述します。 width: auto;が正しく、 width: “auto”;は間違いです。 ベン  >>続きを読む

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

CSSを本気で勉強するとしたら、仕様書をまず読みましょう。 今回の記事はCSSの仕様書に沿って重要な点をチェックしていきたいと思います。 もしあなたが入門書を勉強したり、ネットで情報を探しながらなんとなくCSSを覚えているとしたら、それはそもそも学習の仕方を間違えています。まずは仕様書を読むことが大事です。そうすることでCSSの原理原則を知ることができます。 仕様書は非常にわかりにくいですが、それを一つずつ紐解いて行くことが学習になるからです。   CSSの仕様書(Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification)はこちらから CSSの仕様書の日本語バージョンはこちらから 今回の記事は「Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification 日本語訳」を見ながら進めていきます。 尚、もう少しわかりやすく解説してくれるサイトはMDNのサイトです。仕様書だけでは理解できない時などに役に立ちます。 「Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification 日本語訳」の左側のカラムに目次が用意されています。目次はCSSのそれぞれのカテゴリ別に分類され  >>続きを読む

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

セパレートタイプのボーダーの考え方 tableのボーダーは通常のボックスモデルの考え方ではありませんので注意してください。 まず、tableタグにボーダーを設定するとテーブル全体の外枠だけボーダーが引かれます。その際にwidth指定すると通常のボックスモデルのようにwidthの外にborderが引かれるわけではありません。 tableのボーダーはborderを含めた値がwidthになります。 さらに面倒なのはtdやthなどのセル部分です。これらにボーダーを引いた場合は、今度は通常のボックスモデルのようにwidthの外側にborderが付きます。 本来、テーブルはレイアウトをするためのものではありませんのでこのような細かいことは気にしなくても良いのですが、思わぬところで落とし穴にハマりますので注意してください。 この辺の仕組みはCSSの仕様書を見るとどの部分がtable widthなのか、またどの部分がcell widthか図解されていますので一度参考にすると良いでしょう。 次のサンプルはセパレートタイプのボーダーを付けた簡単なサンプルです。 このサンプルのポイントは右側のセル部分にフロートしたdivを横並びにしていることです。td部分のwidth指定は無いので、その他のborderやth部分のサイズ指定が適切でないと横並びのdivはカラム落ちしてしまいます。 サンプル HTMLコー  >>続きを読む

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

Bootstrapでは12等分のカラムでグリッドを作成するGrid systemが用意されています。また、レスポンシブレイアウトにも柔軟に対応できる仕組みのため、複雑なレイアウトを簡単にコーディングすることができます。 Bootstrap4ではこのグリッドシステムの仕組みにFlexが採用されており、Bootstrap3と比較して変更が出ています。 Flexの仕組みを理解していればクラスの使い方も納得がいくものです。単純にクラスをコピペで使うのではなくCSSで何を行なっているのかしっかり理解しておくと良いでしょう。 Bootstrap3のグリッドシステムの使い方は「Bootstrapの使い方(2)〜グリッドシステム」を参考にしてください。 Bootstrap3では、カラムを作成する「.col-**-*」はCSSで「float: left」の指定とwidthでパーセンテージの幅設定で構成されていました。つまりfloatによるレイアウトでした。 簡単な例は次のようになります。これだけで2カラムのレイアウトができます。 Bootstrap4ではfloatのレイアウトに変わってFlexによるレイアウトが採用されています。 そのため、上記のような記述では横並びになってくれません。 Bootstrap3からBootstrap4で変更されたグリッドシステム関連のCSS それぞれのバージョンのCSS  >>続きを読む

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

テーブルの記述はHTMLもCSSも面倒な設定や思う通りに行かない場合があったり、思わぬ落とし穴に悩むこともあります。 今回はテーブルについてしっかりと学習していきます。 HTMLでのテーブル関連タグの使い方 テーブル作成に最低限必要な基本的なタグは「table」、「tr」、「td」の3つのタグです。これさえあれば最低限のテーブルはできます。 なお、現在tableタグのborder属性の扱いですが、その表がレイアウト目的ではないことを示しています。 つまり、データを見せるための表には必ずborder属性を入れ、その値を1か空にしておく必要があります。 これを入れて置かないとレイアウト目的のテーブルの扱いになります。 2行3列のテーブルの例 表示すると以下のようになります。 あか き あお 赤 黄 青 はい、これで終わりといきたいところですが、表は権威あるデータを表示したりとかで、その内容をちゃんと説明しなさいと結構うるさい仕様書になっています。それから基本的に表をレイアウトの骨組みにはしてはいけません。 テーブル関連タグのコンテンツモデル まずはコンテンツモデルの確認からです。 タグ名 table カテゴリ フロー・コンテンツ コンテンツモデル 以下の順番で配置 1.caption要素を1つ(任意) 2.colgroup要素を0個以上 3.thead要素を1つ(任意) 4.tbody  >>続きを読む

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

2017年6月にDreamweaver CC 2017にいよいよGitの機能が標準で搭載されました。さっそく使ってみることにします。 今回の記事はすでにGitの使用経験がありSorceTreeなどから乗り換えたいとお考えの方対象です。 全くGit初心者の方は「Git入門(1)〜Gitの導入とおおまかな仕組み」を参考にしてください。 AdobeのDreamweaver での Git の使用のページも併せて参考にしてください。 DreamweaverとGitの連携 Dreamweaverを最新版にアップデートしただけでは、すでにインストールしているGitとDreamweaverは連携されていません。 マニュアルでは Git クライアントをダウンロードして導入するように書かれていますが、すでにGitを導入している場合はDreamweaverの環境設定でGitのパスを指定します。 Dreamweaverの環境設定を開いて、左にある「カテゴリ」から「Git」を選択して「構成」の「Git実行ファイルへのパス」にGitのパスを記述します。 Gitを導入したのはいつだったかも覚えてない。ましてインストール先などわからない場合はターミナルのコマンドで調べましょう。 Gitのインストール先を調べるコマンドは「which git」です。 環境設定が終わったら必ず一度Dreamweaverを再起動してお  >>続きを読む