【 HTML CSS 入門 】Atom エディタ のインストール手順
ここでは、HTMLやCSSを編集するのに便利なツール「 Atom エディタ」の紹介とインストール手順などを説明していきます。 もくじ 1. Atomとは 2. Atomのインストール 2-1. 設定手順(Mac) 2-2. 設定手順(Windows) 3. まとめ 1. Atomとは Atom エディタ とは、htmlやcssフ […]
CATEGORY
HTML-CSS
【 CSS 入門 】CSSの基本とよく使うプロパティ
1. CSSとは 2. CSSの基本構造 3. 主なCSSプロパティ 4. まとめ CSSとは 前回の記事(【HTML CSS 入門】HTMLの基本とよく使うタグ)では、HTMLを使って「これは見出し」、「これは文章」、「これは画像」、「これはリンク」など定義していきました。 しかし、普段見ているWebページはもっと色や配置が整っていて、綺麗な見た目になっ […]
【HTML CSS 入門】HTMLの基本とよく使うタグ
ここでは、HTML 入門 として、HTMLの基本の説明と、よく使うタグについて説明していきます。 もくじ 以下は本記事のもくじです。 1. HTMLとは 2. HTMLの基本構造 3. 主なHTMLタグ 4. まとめ では、説明に移っていきます。 1. HTMLとは まずはじめに、HTMLとは何かを説明します。 HTMLとはHy […]
HTML CSS 擬似要素 と 擬似クラス を併用する【::before ::after :hover 】
HTMLやCSSでよく見かける 擬似要素(例. ::before ::after) と 擬似クラス(例. :hover ) が併用可能か調べてみました。 結論 :擬似クラス::擬似要素は動作する 例. :hover::afterは動作する ::擬似要素:擬似クラスは動作しない 例. ::after:hoverは動作しない もくじ 以下は本記事のもくじです。 […]
CSSによる 角丸 の枠や背景 の作り方【HTML CSS3 border-radius 円 】
今回は、CSSのプロパティ「border-radius」を使った、角丸の枠や背景(四角形の4角を丸くする)の作り方について紹介します。 border-radiusは、CSS3という規格で登場し、pxや%を使って四角形の４つの角を丸くする事ができ、円も作る事もできます。 もくじ 以下は本記事のもくじです。 1. border-radius 1-1. 概要 1-2. 基本的 […]
HTML CSS 目次の作り方【ページ内リンク 階層構造】
今回は、HTMLで目次を作る方法を紹介します。 ホームページやブログなどで目次やページ内リンクをつけていると、訪問者に優しい記事になります。 また製作者側としても、目次と見出し・本文の構成を確認することで全体の整合性を確認しやすくなります。 もくじ 以下は本記事のもくじです。 1. 目次を作る 1-1. 簡単な目次を作る 1-2. ページ内リンクを設定する […]
CSSによる グラデーション の作成方法【CSS3 ジェネレーター ツール HTML】
ホームページやブログなどでボタンや背景に「 グラデーション 」を使いたいことは多いと思います。 今回はCSSだけでグラデーションを生成する便利なツール「Ultimate CSS Gradient Generator」を紹介します。 このツールを利用すると複雑なグラデーションを記述したCSSも簡単に自動生成してくれます。CSSなので重い画像のように表示速度が遅くなる恐れもありません。 […]