1. ホーム /
  2. 中級者 - Webマスターへの道 /
  3. CSS3

中級者 - CSS3の技術情報

CSSは、HTMLで定義されたウェブコンテンツに装飾を付ける技術です。

スマホやタブレットなどいろいろなデバイスに対応する（レスポンシブデザイン）ことが必須になっていることで、ますます専門性・重要性が高まっています。

いま、CSSはレベル3まで策定・勧告されています。そのCSS3について情報を発信します。

自分で情報を探しながらやっても、なかなかスムーズに答えにたどりつかない人向けです。

経験が足りないだけで、遅かったり、失敗しても自信をなくさなくていいです。いまは大きくなるために、技術を知って試す時期なので。

むしろたくさん悩んで、フリーズして、失敗してください。気がついたら最適な答えを出す力が自然と身についているでしょう。

一番かんたんなスムーズスクロールの実装

HTML, CSS, JavaScript image

リンクをクリックしてサイト内をジャンプするとき、キュルキュルーって動きながら移動するのを見ます。

スムーズスクロールといいます。CSSの1行追加でできるようになりました。

いま一番かんたんな実装方法です。

続きを読む

かんたんCSS HTML抜きで要素を追加する(::before, ::after)

css3 image

::before, ::afterはCSSの疑似要素で一番使います。CSSで新たに要素を追加します。HTMLに書くまでもない要素を作るときに使います。

それについて、かんたんに誰でも分かるようにサンプルコードを使いながら解説します。

（ここでしか使えないcontentプロパティも説明します。）

続きを読む

かんたんCSS 言語別にスタイルを適用する（:lang疑似クラス）

css3 image

マルチ言語サイトで、同じスタイルをそれぞれ用意するのではなく、同じものを使いたいときがあります。でも、CSSに文字列を書いてある場合どうしたらいいのでしょうか？

CSSでは、サイトの言語別に分けてスタイルを適用させる方法があります。サンプルコードを使って、かんたんに誰でも分かるように解説します。

続きを読む

かんたんCSS3 flex 左(上)・中央・右(下)に寄せて余白を操作する

css3 image

CSS3のフレックスは、コンポーネントの配置を変える便利な機能です。

アイテムのサイズや余白サイズが自動で配分されるので、アイテムサイズと余白の操作はとても重要です。

今回はアイテムの余白を操作します。いま、ほぼすべてのブラウザで対応しているので心配ありません。わかりやすく手順を追って解説します。

続きを読む

かんたんCSS3 flex アイテムの拡大・縮小・サイズを操作する

css3 image

CSS3のフレックスは、コンポーネントの配置を変える便利な機能です。

アイテムのサイズや余白サイズが自動で配分されるので、アイテムサイズと余白の操作はとても重要です。

今回はアイテムサイズの操作方法です。いま、ほぼすべてのブラウザで対応しているので心配ありません。わかりやすく手順を追って説明します。

続きを読む

かんたんCSS3 order フレックスアイテムの並びの順序を変える

css3 image

CSS3では、フレックスで配置を変える方法がたった数行でできるようになりました。

そのほかにもいろいろなことができます。今回は、フレックスで配置されたアイテムの表示順を変える方法です。

2018/12現在、ほぼすべてのブラウザで対応しているので心配ありません。わかりやすく手順を追って解説します。

続きを読む

サイトにはこんな記事があります

最近更新された記事

人気の記事