カテゴリー
キーワード
スポンサーリンク

CSS

WEBデザイン

WordPressの改行問題 最終結論 【なんだコレで良かったんだ】

WordPressには自動改行問題というのがありました、これに関しては、使いたくなければ機能を停止してしまえばOKですね。⇒ WordPressの改行問題の解決方法しかし、自動改行はしてほしくないけれど、機能を切ってしまうと今度は改行したい...
WEBデザイン

Flexbox と Gridレイアウトの使い分け

12341234ABCDEFGHIFlexbox と グリッドレイアウトの特徴(違い)はFlexboxは一列に並んでいく(折り返すにしても)Gridレイアウトは縦横のマス目状に配置するものという感じでしょうか。やってみた印象としては、きっち...
WEBデザイン

Gridに挑戦 ライン指定型

Gridレイアウトの指定の仕方は二種類、エリア名で指定する方法と、ライン番号で指定する方法がある。 エリア型のほうが分かりやすそうなので、それでやってみた。 前回Gridレイアウトのエリア名による指定の仕方を試したので、今回はライン番号で指...
WEBデザイン

ベンダープレフィックスを自動で入れてくれるサービス

Flexboxやグリッドレイアウトなど、比較的新しい機能を使おうとすると、古いブラウザでレイアウトが崩れてしまう事がよくあります。そのため、WEBデザインが完成したあと、できるだけ多くのブラウザで表示を確認、ということが必要になります。そし...
WEBデザイン

gridレイアウトに挑戦 ー エリア名指定型

Flexboxがある程度分かったので、次はGridレイアウトに挑戦FlexboxとGridレイアウトの違いと使い分けは後回しにするとして。とりあえずGridレイアウトを作ってみた。Gridレイアウトの指定の仕方は二種類、エリア名で指定する方...
WEBデザイン

box-sizing:border-box; は子要素に継承されない

今更なのですが、ボックスサイジングの話(おさらい)ボックスサイジングとは?デフォルトでは、box-sizingの値はcontent-boxになっています。content-boxだとどうなるか?ボーダー(枠線)の太さが、コンテンツの幅や高さに...
WEBデザイン

Flexboxの縦並びを使って2カラムデザイン

下記のように2カラムのデザインを考える時testtesttest通常は、左右2つの領域に区切ってからtesttestさらに右の領域の中に新たに上下に区切るように領域を作る、という風にするわけですが。testtesttestこれを、Flexb...
WEBデザイン

HTML5におけるタグの入れ子覚え書き

HTML5ではインライン要素・ブロック要素という概念がなくなった。なくなっただけではなく、代わりに、何をどのタグの中に入れられるのかを定義する別の方法(コンテンツモデル)が規定された。(※「コンテンツモデル」とは、「その要素内にどんなカテゴ...
WEBデザイン

<style>を記事内に書くのは間違いではなくなった(HTML5.2)

昨年末、HTML5.2が正式勧告となり、これまでNGとされてきた<BODY>タグ内のスタイル指定が、OKになってたんですね、知りませんでした。今後は、ブログの記事の中に↓のように書いても<style><!-- selecter{ prope...
WEBデザイン

WEBフォントはやはり重かった・・・

ちょっとフォントの設定でレイアウトが崩れる問題で悩んでいたこともあり※「serif」「sans-serif」「monospace」「cursive」「fantasy」は「総称ファミリ名」(generic font family)と呼ばれ、ブ...
WEBデザイン

OLのリストで、カッコ付きの番号にする方法【覚書】

括弧付きで数字を頭に振った箇条書きの文章を挿入したいことがよくあります。こんな感じにしたい。(1)ひとまず何はともあれ、そうした幸福・仕合せのための偽りは、尊敬を自己についにもたらすために言ってくれるなら。(2)それで場合によっては、全く受...
WEBデザイン

<PRE>要素は危険らしい・・・?

前に、「<pre>の中にはブロック要素を入れてはいけない」と言う記事を書きました。とりあえず、反省して以降の記事の書き方は、必ず記事のサブタイトルは見出しタグ(H1~H6)、記事本文には<P>または<PRE>要素で括るようにしました。 そし...