youtube– tag –
-
知らずに損してる？CSS記述のよくあるミス30選と対処法
CSSを使ったWebデザインでは、初心者から中級者まで陥りやすい多くの記述ミスがあります。これらのミスは、デザインの崩れやメンテナンスの難化を引き起こすことがあり... -
ウェブデザイン技能検定 学科 令和５年度 １回目（3級）
「令和5年度第1回ウェブデザイン技能検定3級」の学科試験を徹底解説！本試験は、HTMLやCSS、デザイン基礎などを問う国家資格です。過去問を分析し、効率的な学習方法や... -
Photoshopでアイキャッチ画像の作成。中央を意識した6分割バナー -応用-
中央に正方形を意識した分割バナーの作成 今回は、Photoshopを使って知っておくと超便利「よくある分割バナー」の作成方法の応用を行います。OGPのことも考えたバナー... -
WordPress[初心者向け] ダッシュボードの設定と使い方 -1-
このセクションでは、WordPressの管理画面、つまりダッシュボードについて詳しく解説し、基本的な設定方法をご紹介しております。ローカル環境で、Wordpressを起動しま... -
ホームページ中級講座 Table要素を使って表組作成
Table要素を使って表組み作成 ホームページ内で表組みを作成する際は、HTMLの<table>要素を使用します。かつては「テーブルレイアウト」と呼ばれる手法でWebページ全... -
コードが爆速で入力できる。 Emmet!プラグインの使い方
模写コーディングを行う際は、少しでも速く、効率良く入力を練習する必要があります。 何度か紹介してきたプラグイン「Emmet!」を再度解説した動画です。確認してみまし... -
ホームページ中級講座 HTML編 フォトギャラリーを作る
今回は、Webデザインでよく使われるフォトギャラリーを作成します。写真とキャプションの組み合わせをカード形式で表示するデザインを、HTMLとCSSを使って実現していき... -
09 ホームページ中級講座 footerを下部に固定
ページ一番下に常に配置するfooter要素の設定 前回の「08 ホームページ中級講座」のfloatを使った回り込みに続き、今回はページの一番下に常にfooter要素を固定する方法... -
08 ホームページ中級講座 floatを使った周り込み
CSSの周り込みプロパティ「float」を使った例 前回「07 ホームページ中級講座」の続きとなります。 ここで使用するHTMLファイルとCSSファイルは下記のページを参照くだ... -
07ホームページ中級講座 CSSで作成するロゴとグラデーションを使ったナビゲーション
HTMLコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ネットワークサービス 株式会社</title> <link rel="style... -
06 ホームページ中級講座 便利なEmmet!
Emmetとは？ Emmetは、HTMLやCSSのコーディングを効率化するためのツールです。コードのテンプレートを簡単に生成できる「ショートカット機能」があり、ほとんどのモダ... -
05 ホームページ中級講座 様々なセレクタ::隣接セレクタ
前回の04ホームページ中級講座 display:flex のおさらいの続きになります。 HTMLコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> ... -
04 ホームページ中級講座 display:flex のおさらい
下記の講座で、ナビゲーションについてのコード練習を行ってきました。 01 ホームページ中級講座 ナビゲーションの作成(HTML) 02ホームページ中級講座 ナビゲーションの... -
03ホームページ中級講座 Googleフォントを指定
今回は、Google Webフォント設定を行います。設定するファイルは、「02ホームページ中級講座 ナビゲーションの作成(CSS)」で作成したコードを使います。 Google のWebフ... -
02ホームページ中級講座 ナビゲーションの作成(CSS)
HTMLマークアップファイルの確認 今回は、下記のページで作成したHTMLを使います。 https://fukuokamiyako.com/post-1470/ デフォルトのスタイルシート HTMLをブラウザ... -
01 ホームページ中級講座 ナビゲーションの作成(HTML)
今回は、HTMLを文章から正しくマークアップしてから、CSSで横並びのナビゲーションを作成していきます。まずは正しくマークアップできるか確認してみましょう。 下記の... -
11 ホームページ基礎講座 box-shadow
今回使うHTML/CSSファイルの準備 下記のコードをコピーもしくは模写して練習を開始しましょう。いくつか追加要素である、aria-labelledbyとidがあります。これは、ウェ... -
ホームページ基礎講座 外部スタイルシートとグラデーションCSS
今回からいよいよ、CSSを外部に分けて書く、「外部スタイルシート」を使います。外部スタイルシートを設定する場合、外部ファイル（例: styles.css）を作成し、それをHT... -
ホームページ基礎講座 誰もが迷うarticle要素の使いどころ
Webページを作成する際、マークアップは見た目を整えるだけでなく、ページの意味や構造を明確にする重要な作業です。その中でも、header, main, footer, article, secti... -
08 ホームページ基礎講座 CSSのwidthとmargin
今回はwidthを指定した際のmarginを使った中央の設定と、widthと同時に記述する際のborderとpaddingを入れるとwidthが大きくなることをしっかりと確認していきます。 HT... -
07 ホームページ基礎講座 HTML 箇条書き ul > li ol > li
今回は、Webサイトの中で使う箇条書き要素について、HTMLのマークアップとCSSの練習を行います。箇条書き要素は、Webサイトでは多くの場所で目次として扱われ、グローバ... -
06 ホームページ基礎講座 CSSで横幅のwidthと線指定
今回は、その指定したsection要素にCSSの横幅指定のプロパティwidthや、線を指定するborderプロパティを使用してCSSのデザイン設定を行います。 HTMLとCSSコードを入力... -
はじめてのホームページ 意味合いを持った要素 セマンティクス要素の設定
今回は、HTML5のセマンティクスを活用した学習になります。これらのコードを正しく使うことで、文書構造をわかりやすく整理し、ユーザーと検索エンジンの両方にとって利... -
04 はじめてのホームページ HTMLとclassの使い方
今回はHTMLコードでマークアップされたファイルに、CSSを使って背景色の設定や、線を用いた枠の設置、行内での中央揃えなどを行います。ただし、同じ要素であるp要素に... -
03 はじめてのホームページ 画像をHTMLで配置とCSS
画像をHTMLで配置する方法 3回目の講座では、画像の配置について学びます。HTMLでは、画像は埋め込むのではなく、リンクとして表示されます。そのため、画像ファイルをH... -
はじめてのホームページ HTMLとCSS
01のはじめてのホームページHTMLとCSS編では、エディタに文字にマークアップ言語であるHTMLを設定しました。タイトルにはタイトル要素のh1を、文章には段落要素の<p&... -
はじめてのホームページ基礎講座(HTMLとCSS)
初心者の方むけのホームページ作成講座 インターネットが生活の一部となった今、ホームページは情報を発信したり、自分やビジネスをアピールしたりするための強力なツー... -
実技06 ウェブデザイン技能検定 3級
ウェブデザイン技能検定 3級は学科と実技で構成されているため、両方とも合格しないといけない検定です。 実技は、学科に比べて実技は、操作が間違えなければ点数が取... -
実技05 ウェブデザイン技能検定 3級
ウェブデザイン技能検定 3級 実技のための解説を行っています。 前回に引き続き「作業5」になります。作業１から作業４までを確認する方は下記からチェックしてくださ... -
実技04 ウェブデザイン技能検定 3級
ウェブデザイン技能検定 3級 実技のための解説を行っています。 前回に引き続き「作業４」になります。作業１から作業３を確認する方は下記からチェックしてください... -
実技03 ウェブデザイン技能検定 3級
ウェブデザイン技能検定 3級 実技のための解説を行っています。前回に引き続き「作業３」になります。作業１と作業２を確認する方は下記からチェックしてください。 h... -
実技02 ウェブデザイン技能検定 3級
ウェブデザイン技能検定 3級 実技のための解説を行っています。 前回に引き続き「作業２」になります。作業１を確認する方は下記からチェックしてください。 実技01 ... -
実技01 ウェブデザイン技能検定 3級
ウェブデザイン技能検定 3級 実技のための解説を行っています。 Web業界唯一の国家検定 ウェブデザイン技能士をめざすウェブデザイン技能検定は、初めての方でも比較...
1