-
CSSの便利な関数まとめ！デザインやレイアウトを自在に操る
CSSには、デザインやレイアウトを柔軟に調整できる 「関数」 が数多く用意されています。calc() を使えば 異なる単位を組み合わせた計算 が可能になり、clamp() を使えば フォントサイズをレスポンシブに調整 できます。また、conic-gradient() で 円グラデーション を作成したり、rotate() で 要素を回転 させるなど、アニメーションやビジ... -
リセットCSSってなんですか？必要なの？モダンリセット最新版！
Webサイトを作っていると、ブラウザ間でスタイルの見た目がずれることがあります。このずれを解決するために用いられるのが「リセットCSS」です。今回は、リセットCSSの解説やタイプ別の特徴、おすすめの使い方。さらに最新を取り入れた「2024年モダンリセットCSS」をご紹介します。 リセットCSSとは？ リセットCSSは、各ブラウザがデフォル... -
知らずに損してる？CSS記述のよくあるミス30選と対処法
CSSを使ったWebデザインでは、初心者から中級者まで陥りやすい多くの記述ミスがあります。これらのミスは、デザインの崩れやメンテナンスの難化を引き起こすことがあり、無意識のうちに時間と労力を浪費する原因にもなります。そんな"ありがちな30のCSSミス"を具体的なコード例と改善策を解説します。基礎を固めたい方や効率的なスタイリング... -
もう迷わないHTML/CSSのクラス名の付け方完全ガイド！
Web制作において、HTML/CSSのクラス名をどう付けるべきか悩む方は少なくありません。HTML/CSSが初めての方にとっては、クラス名をどう付けるかが難しく感じられることが多いです。そこで、基本的なルールを解説し、具体例とサンプルコードを紹介しています。 クラス名が重要な理由 HTML/CSSのクラス名は、Webサイトやアプリケーションの構造... -
使い方を知っておくと便利なフレームワークBootstrap。基礎知識と使い方
WEBサイトの作成には、HTML・CSS・JavaScript・PHPなど、さまざまな言語を組み合わせる必要があります。特に、スマートフォン対応のレスポンシブWebデザインを実装する際は、CSSの量が増え、メディアクエリの追加が多くなりがちです。その結果、コードが複雑になり、管理が難しくなることも。そんなときに役立つのが、BootstrapのようなCSSフ... -
今更聞けない。Webサイトのアップロード方法。FTPって何？
「Webサイトをアップロードする」と聞くと、初心者の方は少し難しそうに感じるかもしれません。でも実は、適切なツールと手順を知っていれば簡単にできます。その中でもよく使われる方法が FTP（File Transfer Protocol） を使ったアップロード・ダウンロードです。人気のFTPクライアントソフト「FileZilla」を使った具体的なアップロード手... -
HTMLを適当に書いてませんか？マークアップはとても大事です！
HTMLを扱うとき、「とりあえず見た目さえ整えばいい」という思いで書かれているコードに出会うことがあります。しかし、マークアップを適当に書いてしまうと、SEOやアクセシビリティの面で大きな問題が発生することがあります。適当なマークアップがもたらす影響も考えて記述する必要があります。 HTMLのマークアップとは？ HTML（Hypertext ... -
意外と読めない・・・HTML/CSS/JavaScript/PHP/WordPressのコードの読み方
授業で生徒さんから「このHTML要素やCSSプロパティってどう読むんですか？」と質問されることがよくあります。特に、意外と特殊な読み方をするものや、日本語では馴染みのない発音をするものも少なくありません。そのため、授業中に間違った読み方をしてしまい、「先生、それ違うのでは？」と指摘されてしまったことも正直あります（少し恥ず... -
Visual Studio Codeのおすすめプラグインをインストールしてみる
Visual Studio Code（VSC）は、軽量で高機能なプログラムを記述するための、コードエディタとして広く利用されています。便利な拡張機能（プラグイン）を活用することで、開発効率を向上させ、スピーディで快適な開発環境を構築することができます。VSCのおすすめプラグインをいくつか紹介します。 まずは、拡張機能（プラグイン）のインスト... -
Visual Studio Codeのインストールとセットアップ
Visual Studio Codeは、マイクロソフトが開発した無料のオープンソースのテキストエディターです。多くのプログラミング言語に対応し、Windows、macOS、Linuxで利用できます。 Visual Studio Codeには、シンタックスハイライト、コード補完、デバッグ機能、Git統合、拡張機能など、プログラミング作業に必要な多数の機能が含まれています。ま... -
コードが爆速で入力できる。 Emmet!プラグインの使い方
模写コーディングを行う際は、少しでも速く、効率良く入力を練習する必要があります。 何度か紹介してきたプラグイン「Emmet!」を再度解説した動画です。確認してみましょう。 EmmetでHTMLのタグを入力してみようっっw Emment でHTMLのタグ（要素）を入力する場合は、要素名を入力してTabキーを押します。 div のあと TABキー で開始と終了タ... -
11 ホームページ基礎講座 box-shadow
今回使うHTML/CSSファイルの準備 下記のコードをコピーもしくは模写して練習を開始しましょう。いくつか追加要素である、aria-labelledbyとidがあります。これは、ウェブアクセシビリティやHTML構造を分かりやすくするための機能です。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="descript... -
ホームページ基礎講座 外部スタイルシートとグラデーションCSS
今回からいよいよ、CSSを外部に分けて書く、「外部スタイルシート」を使います。外部スタイルシートを設定する場合、外部ファイル（例: styles.css）を作成し、それをHTMLファイルにリンクします。同じディレクトリ内にstyles.cssというファイルを作成します。 HTMLコード <!DOCTYPE html> <html lang="ja"> <head> <meta charse... -
ホームページ基礎講座 誰もが迷うarticle要素の使いどころ
Webページを作成する際、マークアップは見た目を整えるだけでなく、ページの意味や構造を明確にする重要な作業です。その中でも、header, main, footer, article, section, aside,nav,timeといったセマンティックな要素は、検索エンジンやアクセシビリティツールが内容を正確に理解するための鍵となります。今回は、これらの要素の役割や、日... -
08 ホームページ基礎講座 CSSのwidthとmargin
今回はwidthを指定した際のmarginを使った中央の設定と、widthと同時に記述する際のborderとpaddingを入れるとwidthが大きくなることをしっかりと確認していきます。 HTML/CSSを入力しよう <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal... -
07 ホームページ基礎講座 HTML 箇条書き ul > li ol > li
今回は、Webサイトの中で使う箇条書き要素について、HTMLのマークアップとCSSの練習を行います。箇条書き要素は、Webサイトでは多くの場所で目次として扱われ、グローバルナビゲーションと呼ばれる重要な場所で使われたりします。 HTMLコードを入力しよう <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <t... -
06 ホームページ基礎講座 CSSで横幅のwidthと線指定
今回は、その指定したsection要素にCSSの横幅指定のプロパティwidthや、線を指定するborderプロパティを使用してCSSのデザイン設定を行います。 HTMLとCSSコードを入力してみよう 幅指定や余白指定のCSSプロパティの練習です。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" conten... -
はじめてのホームページ 意味合いを持った要素 セマンティクス要素の設定
今回は、HTML5のセマンティクスを活用した学習になります。これらのコードを正しく使うことで、文書構造をわかりやすく整理し、ユーザーと検索エンジンの両方にとって利便性が高くなります。ここでは、大事な、header要素、footer要素、main要素、section要素、article要素 の設定方法を行なっています。 HTMLコードを入力 下記のコードをコ... -
04 はじめてのホームページ HTMLとclassの使い方
今回はHTMLコードでマークアップされたファイルに、CSSを使って背景色の設定や、線を用いた枠の設置、行内での中央揃えなどを行います。ただし、同じ要素であるp要素に別々の色や配置を指定する場合必要になってくるのがclassです。ここでは、class属性を使って個別指定ができるように行います。 HTMLファイルの作成 下記のHTMLとCSSコードを... -
03 はじめてのホームページ 画像をHTMLで配置とCSS
画像をHTMLで配置する方法 3回目の講座では、画像の配置について学びます。HTMLでは、画像は埋め込むのではなく、リンクとして表示されます。そのため、画像ファイルをHTMLファイルと同じフォルダに保存し、HTML内でそのファイルを読み込んで使用します。 例えば、画像が多いページでは、1つのHTMLファイルに対して10個以上の画像を使うこと... -
はじめてのホームページ HTMLとCSS
01のはじめてのホームページHTMLとCSS編では、エディタに文字にマークアップ言語であるHTMLを設定しました。タイトルにはタイトル要素のh1を、文章には段落要素の<p>をマークアップしています。今回は、デザイン担当のCSSを設定します。 フォルダ・ファイルを作成 お使いのエディタを開き、練習フォルダに直下に、index.htmlというファ... -
はじめてのホームページ基礎講座(HTMLとCSS)
初心者の方むけのホームページ作成講座 インターネットが生活の一部となった今、ホームページは情報を発信したり、自分やビジネスをアピールしたりするための強力なツールです。でも、「技術的に難しそう」「どこから始めればいいかわからない」と感じている方も多いのではないでしょうか？この講座では、初心者の方でも無理なく進められるよ...
1