vertical-alignで位置を調整しよう

文中に配置した要素の、垂直方向の配置を調整できるvertical-alignについて baselineの位置に

単位無しでline-heightを指定しよう【CSSを書いていこう】

単位ありと単位なしでline-heightの設定にどのような違いがあるか、学んでいきます。 単位ありの指定 前

line-heightで行の高さを調整しよう

行の高さを調整することができるline-heightの仕組みについて学んでいきます。 line-height

フォントの指定の仕方をコードを書いて確認したのちに、フォントが決定される仕組みについて

フォントの指定の仕方をコードを書いて確認したのちに、フォントが決定される仕組みについて フォント決定の仕組み

テキストにスタイルを設定のやり方【CSSを書いていこう】

テキストに関するスタイルでよく使うものについて見ていきます。 color 前回まででデベロッパーツールについて

デベロッパーツールを使ってみよう【CSSを書いていこう】

CSSで設定した内容をデベロッパーツールで確認する方法について見ていきます。 デベロッパーツールの操作方法 前

MDNを参照してCSSの仕様を調べてみよう【CSSを書いていこう】

MDNを参照して、CSSの仕様を調べる方法について確認していきます。 MDN 前回まででCSSのスタイルの継承

CSSの由来でもある、スタイル継承の仕組みについて【CSSを書いていこう】

CSSの由来でもある、スタイル継承の仕組みについて見ていきます。 スタイルの継承 前回まででCSSの文法につい

CSSの文法とコメントの書き方について【CSSを書いていこう】

CSSの文法とコメントの書き方について確認していきます。 CSSの書き方 前回まででCSSのスタイルを適用する

CSSのスタイルを適用するさまざまな方法について学んでいきます【CSSを書いていこう】

CSSのスタイルを適用するさまざまな方法について学んでいきます。 styleタグ 前回まででCSSを書く前のH

CSSを書く前のHTMLの書き方について【CSSを書いていこう】

CSSを書いていく前にまずはHTMLをかきあげておきましょう。 CSSを書く前に 旋回まででCSSの概要につい

HTMLの見た目を整えるCSSの概要【CSSを書いていこう】

HTMLの見た目を整えるCSSの概要について確認していきます。 CSSの概要 前回まででHTMLについての概要

入力した値を送信する方法を見てみよう【HTMLを書いていこう】

入力した値をプログラムに送信するために使えるformタグについて学んでいきます。 概要 前回は送信ボタンの作り

『送信』するためのボタンを作ってみよう【HTMLを書いていこう】

ボタンを作る方法を見たのちに、入力部品を無効化する方法を見ていきます。 button 前回はいろいろな入力部品

HTML5で使える入力部品を使おう【HTMLを書いていこう】

最新のブラウザだけで使うことができる入力部品について見ていきます。 color 前回まででラジオボタンの作り方

ラジオボタンを作ってみよう【HTMLを書いていこう】

選択肢から一つだけ選ぶことができるラジオボタンの作り方について見ていきます。 radio 旋回まででチェックボ

チェックボックスを作ってみよう【HTMLを書いていこう】

複数の選択肢を選ぶことができるチェックボックスの作り方について見ていきます。 checkbox 前回まででドロ

複数の項目から選択できるドロップダウンリストを作ろう【HTMLを書いていこう】

複数の項目から選択できるドロップダウンリストを作る方法について見ていきます。 select 前回まででフォーム

フォーム部品にラベルをつけてみよう【HTMLを書いていこう】

フォーム部品にラベルをつける方法を学んでいきます。 label 前回まででフォーム部品について学んできました。

フォーム部品について学んでいこう【HTMLを書いていこう】

ユーザーからの入力を受け取るためのinputタグ、textareaタグについて学んでいきます。 概要 前回まで

MDNでHTMLの仕様を確認しよう【HTMLを書いていこう】

MDNのサイトで、HTMLの仕様を確認する方法について見ていきます。 MDN 前回は特定範囲のスタイリングにつ

特定の範囲をスタイリングするタグの使い方【HTMLを書いていこう】

特定の範囲をスタイリングのためのdivタグとspanタグについて見ていきます。 div 前回まででメディアサイ

メディアサイトの記事一覧を作ってみよう【HTMLを書いていこう】

article､timeタグの使い方について見ていきます。 article 前回は文書の構造についてのお話をし

文書の構造をマークアップしてみよう【HTMLを書いていこう】

header､footer､nav､aside､main､sectionといった、コンテンツのまとまりを表現す

様々なタグを使って文書の構造を見やすくしよう【HTMLを書いていこう】

文書の構造がわかりやすくなる様々なタグの使い方について 意味のあるまとまりに使えるタグ 前回はページ内へリンク

ページ内へのリンクを作る方法について【HTMLを書いていこう】

aタグを使ってベージ内へのリンクを作る方法について見ていきます。 id属性とページ内リンクの指定方法 前回まで

別ファイルへのリンクを作ろう【HTMLを書いていこう】

aタグを使って別ファイルにリンクする方法について見ていきます。 別ファイルへのリンク 前回まででリンクの貼り方

【HTMLを書いていこう】リンクの貼り方を解説

aタグを使って外部サイトへリンクを貼る方法について見ていきます。 a 前回まででテーブルの作り方についてみてき

【HTMLを書いていこう】tableタグで表を作ってみよう

tableタグを使って表のマークアップをしてみます。 table 前回までで表を表現する方法を見てきました。

【HTMLを書いていこう】マークアップ言語で表を作って行く方法について

HTMLで表を表現する方法について 表の表現方法 前回はリストの作り方について見てきました。 詳しくは『【HT

【HTMLを書いていこう】順番付きリスト、箇条書きリスト、説明リストの作り方

olタグを使って順番付きリストを作成する方法を確認したのちに、ul要素を使って箇条書きリストを作っていき、dl

【HTMLを書いていこう】箇条書きや順序付けなどリストの作り方を学ぼう

TMLで表現できる3種類のリストについて 箇条書きリスト 前回は実体参照などを学んできました。 詳しくは『【H

【HTMLを書いていこう】実体参照とpreタグを使ってみよう

HTML内で特殊な記号を表記したいときに使える実体参照について確認したのちに、preタグの使い方について見てい

【HTMLを書いていこう】強調や引用、横線、改行を書くためのタグについて

文章の意味をより正確に表現するために使えるタグについて詳しく見ていきます。 strong 前回まででHTMLの

【HTMLを書いていこう】bodyタグの中に入るimgタグやh1タグ、pタグについて

imgタグに使うことができるさまざまな属性について見たのち、h2とpを使ったマークアップをしていきましょう。

【HTMLを書いていこう】ホームページの情報を内包するheadタグ

文書に関する情報を記載するためのタグについて見ていきます。 文字コードの設定 前回は全角文字にに気をつけようと

【HTMLを書いていこう】全角文字に気をつけよう。コメントの使い方。

間違いやすいポイントである全角文字について見たあとに、コメントの使い方について見ていきます。 全角文字に関する

【HTMLを書いていこう】文書全体を囲うタグを見ていこう

HTML5の文書宣言について触れたのちに、文書全体を囲うタグについて見ていきます。 文書宣言 前回はimgタグ

【HTMLを書いてみよう】imgタグで画像を配置の仕方について

imgタグで画像を配置したあとに、タグにつける属性について学んでいきます。 img 前回まででタグの使い方につ

【HTMLを書いてみよう】ホムページ制作で必要なタグについて

文章の見出しにつけるタグと段落につけるタグについて見たのちに、HTMLの用語について図で確認していきます。 H

【学習の準備を整えよう】ホームページ制作に必要なエディタとブラウザ

使用するブラウザとエディタ、画像素材の確認をしたのちに、プロジェクトフォルダを設定していきます。 使用ブラウザ

【HTMLを学ぼう】HTMLでよく使われているhタグとpタグについて

ウェブページを作る言語であるHTMLの概要について確認していきます。 HTMLの概要 前回までで一通りの流れを

フッターのスタイリングをしてサイトを調整し完成させます。

フッターのスタイルを整えてプロフィールサイトを完成させていきます。 footerのスタイリング 前回までで行間

【line-heightの使い方】行間を調整しをしていきます

細かい余白を調整したのちに、line-heightプロパティを使って行間の調整をしていきます。 余白の調整 前

【セレクタの適用範囲を限定しよう】子要素の一番最初の要素にだけスタイルを適用する

『>』を使ってセレクタの適用範囲を限定していく方法について見ていきます。 sectionのスタイリング

【align-itemsを使おう】要素を縦方向で中央揃えしていく方法

Flexbox内の要素を縦方向で中央揃えにするために、align-itemsを使っていきます。 align-i

【リストのスタイリング】CSSでリストを横並びにする簡単な方法を徹底解説

リストの余白を整えつつ、Flexboxで要素を横並びにしていきます。 リストのスタイリング 前回は見出しの整え

【見出しのスタイリングを整える】CSSで太さや大きさ、余白などを指定します。

見出しに設定されているスタイルを確認し、CSSで上書きをしていきます。 要素の検証 前回はアイコンのスタイリン

【アイコン画像のスタイリングをしよう】角を取り丸める方法について

半角空白を使ってセレクタの適用範囲を限定し、領域の角を丸めるためのborder-radiusプロパティと、枠に

【Flexboxを使う】CSSで要素を横並びにする方法と親要素と子要素の関係について

header内の要素を横並びにするために、Flexboxを使う方法を見ていきます。 親要素と子要素 前回は領域

【divタグを使う】領域を指定してデザインをより自由にする

レイアウトのために使えるdivタグを使いながらスタイリングを進めていきます。 div 前回までで余白の設定方法

【marginで外側の余白を設定】余白の設定方法について

marginプロパティを使ってheader領域の余白を設定していきます。 marginの設定 前回まででCSS

【CSSのボックスモデルを確認しよう】デベロッパーツールを見ながらヘッダー領域のスタイリング

ボックスモデルを確認しながらheader領域のスタイリングを進めていきます。 background-color

【フォントを設定していこう】CSSで文字の色と文字の書体を設定する方法

文書全体に対して、文字色とフォントの設定をしていきます。 color font-family color 前回

【色の表現方法を学んでいこう】キーワード、rgb()、カラーコードについて

CSSで色を表現する記法について見ていきます 色キーワード 前回まででCSSの準備と確認の仕方についていてきま

【デベロッパーツールを使ってみよう】読み込まれたCSSの確認

Chromeのデベロッパーツールを使って読み込まれたCSSについて確認していきます。 デベロッパーツールの起動

【CSSを書いてみよう】要素のスタイリングのやり方について

特定の要素に文字色を設定するためのCSSを書いてみます。 styleタグ 前回まででHTMLのしようについて見

HTMLの仕様を確認してみよう

MDNのサイトでHTMLの仕様を確認する方法について見ていきます。 MDN 前回リンクを貼りましたが、 img

外部サイトへのリンクを設定しよう

aタグでリンクを設定する方法について見ていきます a 前回はulタグについて見てきました。 『ulタグでリスト

ulタグでリストを表現してみよう

リストを表現するためのタグについて見ていきます。 ol 前回はsectionタグの使い方について学んで来ました

sectionタグの使い方について

意味のあるまとまりを示すために使えるsectionタグで適切にマークアップしていきます。 section 前回

コメントタグを使ってみよう

フッターを書き込んだあとに、文書内にコメントを書くための方法について見ていきます。 フッターの記述 前回bod

文書の本文をbodyタグを使って書き込んでいこう

bodyタグ内に本文として、今回盛り込みたい内容を書き込んでいきます。 body 前回まででheadを書いてい

文書に関する情報を設定しよう

headタグ内で文書情報に関する設定を行っていきます。 文字コード 前回は文章全体のタグを見てきました。 前回

文書全体につけるタグを見ていこう

文書全体につけることになっている各種タグについて見ていきます。 タグ DOCTYPE 前回まででエラーの処理に

全角文字に気をつけよう

よくある間違いとして全角文字が混入した場合の動作について見ていきます。 全角文字に関する注意 前回まででimg

imgタグで画像を表示しよう

imgタグを使って画像を表示していきます。また適切な属性も設定していきます。 imgタグ 前回まででタグのマー

タグでマークアップしてみよう

さらにテキストを追加し、適切なタグでマークアップしていきます。 タグ 前回はエディタに書いたテキストをブラウザ

【VS Codeの使い方】作業用フォルダを使っていく方法について

VS Codeを使って作業用のフォルダを作っていく方法についていていきます。 フォルダの設定 前回までで写真を

【VS Codeの使い方】ブラウザに書いたコードを表示させる方法について

情報を書いてそれをブラウザで表示させる ファイルの編集 前回まででファイルを探して開き,その中にindex.h

【ファイルを作ろう】VSCodeで画像を準備する手順について

開発ツールの確認 まず準備するものとしてブラウザは Chrome 、そしてエディタは VS Code を使って

HTMLで基本的なタグとサイトの構成を学んで行きましょう

HTMLと完成版の確認 HTML サイトを作りながら HTML という言語について学んでいきましょう。 今回の

【画像解説あり】パソコンの設定でファイルの拡張子を表示させてファイルを扱いやすくする

ファイルの拡張子を表示させる方法について見ていきます。 前回まででChromeのダウンロード、VSCodeのイ

プログラミング用フォントを導入しよう

プログラミング用フォントをなぜ入れるのか？ フォントの変更の意義 プログラミング用フォントを設定していきますこ

Visual Studio Codeで行っておくとよい設定方法について解説

Visual Studio Codeで行っておくとよいいくつかの設定項目について見ていきます。 Visual

VS Codeエディタのインストール方法

無料のテキストエディタであるVisual Studio Codeの導入方法について Visual Studio

Chromeブラウザを導入しよう

Chromeブラウザを導入していきます。 Chromeブラウザの導入 Chromeブラウザの起動、終了 Chr

プロフィール

私について WEBデザインをしています。 もともと趣味でプログラミングなどでサイトを作ったりしていました。 本

お休み

サイトのリニューアル

いつもご愛顧いただきありがとうございます。 この度サイトのリニューアルを致しました。 今回のリニューアルは、ご