-
Visual Studio Codeのおすすめプラグインをインストールしてみる
Visual Studio Code（VSC）は、軽量で高機能なプログラムを記述するための、コードエディタとして広く利用されています。便利な拡張機能（プラグイン）を活用することで、開発効率を向上させ、スピーディで快適な開発環境を構築することができます。VSCの... -
Visual Studio Codeのインストールとセットアップ
Visual Studio Codeは、マイクロソフトが開発した無料のオープンソースのテキストエディターです。多くのプログラミング言語に対応し、Windows、macOS、Linuxで利用できます。 Visual Studio Codeには、シンタックスハイライト、コード補完、デバッグ機能... -
コードが爆速で入力できる。 Emmet!プラグインの使い方
模写コーディングを行う際は、少しでも速く、効率良く入力を練習する必要があります。 何度か紹介してきたプラグイン「Emmet!」を再度解説した動画です。確認してみましょう。 【EmmetでHTMLのタグを入力してみようっっw】 Emment でHTMLのタグ（要素）を... -
11 ホームページ基礎講座 box-shadow
【今回使うHTML/CSSファイルの準備】 今回は11のフォルダを作成し、その中にindex.htmlのHTMLファイルと外部スタイルシート「style.css」ファイルを作成します。index.htmlファイルを開き下記のコードをコピーするか、模写コーディングを行います。 <!D... -
10 ホームページ基礎講座 外部スタイルシートとグラデーションCSS
今回は10のフォルダを作成し、その中にindex.htmlファイルを作成します。そのファイルを開いてHTMLコードをコピーして貼り付けておきましょう。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>エコロジーと環境... -
09 ホームページ基礎講座 HTML編 header footer
【header要素 とfooter要素の追加 】 今回のマークアップはarticle要素と、section要素の他に、Webサイトの上部ヘッダーに設定するheader要素。下部フッターに設定するfooter要素を設置していきます。 header要素 header要素は、HTML5から追加された新しい... -
08 ホームページ基礎講座 CSSのwidthとmargin
前回０７ホームページの基礎で作成したHTMLのマークアップファイルを使って、CSSを書いていきます。 今回のCSSは、線（borderプロパティ）を中心としたデザインを設定しながら、線とその要素内にある文字列との余白をあけるpaddingプロパティを設定する際... -
07 ホームページ基礎講座 HTML 箇条書き ul > li ol > li
07ホームページ基礎講座では、Webサイトの中で使う箇条書き要素について、HTMLのマークアップ練習を行います。箇条書き要素は、Webサイトでは多くの場所で目次として扱われ、グローバルナビゲーションと呼ばれる重要な場所で使われたりします。 【HTMLマー... -
06 ホームページ基礎講座 CSSで横幅のwidthと線指定
前回の０５はじめてのホームページでは、section要素などを指定する練習を行いました。 今回は、その指定したsection要素にCSSの横幅指定のプロパティwidthや、線を指定するborderプロパティを使用してCSSのデザイン設定を行います。 06のフォルダを作成し... -
05 はじめてのホームページ HTMLとCSS
前回の０４はじめてのホームページでは、cssのプロパティを使って、要素に背景色などの色指定などを行いました。今回は、htmlにあるマークアップの中でもグループを分ける作業を行います。 セクショニングコンテンツの設定を行なったhtmlファイルが下記に...
12