CSS

マークアップ

アイコンを使いたいのならFont Awesomeがオススメ!使い方も解説[初心者向け]

「アイコンを使いたいけど、どうやって手に入れたらいいんだろう」 「拡大するとアイコンの画像がぼやけてしまう」 あなたには、こんな悩みがありませんか? その悩み、Font Awesomeを使えば解決します! この記事...
マークアップ

Google Fontsの使い方を初心者向けに解説!

「フォントって、いろいろあってよくわからない」 「端末によって表示が変わるのをなんとかしたい」 そんなあなたにオススメしたいのが、Google Fontsです。 この記事では「Google Fontsって何?」という方の...
マークアップ

Bulma

Bulmaとは、CSSのフレームワーク(開発を楽に行えるように用意された枠組み・機能群)の一つです。特徴は、JavaScriptが組み込まれていないので軽いという点です。標準でFlexboxに対応しています。
マークアップ

変数[CSS]

以前JavaScriptの変数について取り上げました。 CSSにも変数があります。使い方をご紹介しましょう。
マークアップ

Grid Layout

Grid Layout Module(以下Grid Layout)はCSSの新しい仕様です。ページ全体のレイアウトや格子状のレイアウトを記述するのに適しています(gridは「格子」の意)。基本的な使い方をご紹介しましょう。
マークアップ

CSSで要素を中央寄せにする方法

要素を中央寄せにする方法をいくつか見ていきましょう。
マークアップ

Flexbox

Flexbox(Flexible Box Layout Module)は、CSSのレイアウト手法の一つです。細かいところを自動で調整してくれたり、簡単にレイアウトを作成できるので、よく使用されます。基本的な使い方をご紹介しましょう。 ...
マークアップ

Emmet

Emmetは、HTMLやCSSを簡単に記述できるツールです。私が使っているテキストエディタ——Visual Studio Code——では、標準で使用できます。その省略記法をいくつか紹介しましょう。
マークアップ

ブロック要素とインライン要素

HTMLの要素には、主にブロック要素とインライン要素があります。 ブロック要素は、コンテンツをまとめるブロック(かたまり)です。親要素の幅いっぱいに広がるボックスをイメージすると良いでしょう。横並びにできません。高さや余白の指定がで...
マークアップ

擬似要素

CSSの擬似要素とは、HTMLの要素を擬似的に作り出し、それにスタイルを当てる仕組みです。記述には、擬似クラスと区別するためにコロン(:)を2つ付けます。 例 p::before { content: "sample&...
タイトルとURLをコピーしました