動画– tag –
-
04 イラストレーター曼荼羅模様 効果の変形ツール
Illustratorツールバー 01 回転ツール 02リフレクトツール 03 拡大縮小ツール 上記のツールを繰り返し使うことで、曼荼羅模様を作成してきました。今回は効果＞パスの変形 を使って作成してみましょう。 完成形の確認 ブラシツールと変形ツールを使って作成します。 -
ホームページ中級講座 Table要素を使って表組作成
Table要素を使って表組み作成 ホームページ内で表組みを作成する際は、HTMLの<table>要素を使用します。かつては「テーブルレイアウト」と呼ばれる手法でWebページ全体のレイアウトに使用されていましたが、現在では表組み（データ表）の作成以外には使われません。また、レスポンシブ対応が必要な現代のWebデザインでは、スマートフォ... -
コードが爆速で入力できる。 Emmet!プラグインの使い方
模写コーディングを行う際は、少しでも速く、効率良く入力を練習する必要があります。 何度か紹介してきたプラグイン「Emmet!」を再度解説した動画です。確認してみましょう。 EmmetでHTMLのタグを入力してみようっっw Emment でHTMLのタグ（要素）を入力する場合は、要素名を入力してTabキーを押します。 div のあと TABキー で開始と終了タ... -
ホームページ中級講座 HTML編 フォトギャラリーを作る
今回は、Webデザインでよく使われるフォトギャラリーを作成します。写真とキャプションの組み合わせをカード形式で表示するデザインを、HTMLとCSSを使って実現していきます。 どんなフォトギャラリーを作るんですか？ 今回は、写真とキャプションの組み合わせを使ったフォトギャリーを作っていきます！HTMLの<figure>という要素を活用... -
09 ホームページ中級講座 footerを下部に固定
ページ一番下に常に配置するfooter要素の設定 前回の「08 ホームページ中級講座」のfloatを使った回り込みに続き、今回はページの一番下に常にfooter要素を固定する方法を学びます。下記を参照ください 現代のWebサイトの特徴と課題 近年、スマートフォンサイトの普及により、縦に長いLP（ランディングページ）のデザインが主流となっていま... -
08 ホームページ中級講座 floatを使った周り込み
CSSの周り込みプロパティ「float」を使った例 前回「07 ホームページ中級講座」の続きとなります。 ここで使用するHTMLファイルとCSSファイルは下記のページを参照ください。 前回「07 ホームページ中級講座」に引き続き、今回はCSSのプロパティ「float」を使用した例を学習します。floatは、画像やテキストの周り込みを制御するためのプロパ... -
07ホームページ中級講座 CSSで作成するロゴとグラデーションを使ったナビゲーション
HTMLコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ネットワークサービス 株式会社</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="content"> <header> <h1>NewWorkService</h1> <nav> <ul> <li><a href="#">Home<... -
06 ホームページ中級講座 便利なEmmet!
Emmetとは？ Emmetは、HTMLやCSSのコーディングを効率化するためのツールです。コードのテンプレートを簡単に生成できる「ショートカット機能」があり、ほとんどのモダンなエディタ（VS Code、Sublime Text、Atomなど）に対応しています。Emmetを使うことで、数秒で複雑なHTML構造を楽に生成できます。 !から始める基本操作 まず、HTMLの基本... -
05 ホームページ中級講座 様々なセレクタ::隣接セレクタ
前回の04ホームページ中級講座 display:flex のおさらいの続きになります。 HTMLコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="content"> <header> <h1>Flex Box</h1> <... -
04 ホームページ中級講座 display:flex のおさらい
下記の講座で、ナビゲーションについてのコード練習を行ってきました。 01 ホームページ中級講座 ナビゲーションの作成(HTML) 02ホームページ中級講座 ナビゲーションの作成(CSS) 今回は改めて、CSSのdisplayプロパティのflexについて、復習もかねて深く学習していきましょう 練習するためのHTMLファイルの準備 ファイルを作成し、以下のコー... -
03ホームページ中級講座 Googleフォントを指定
今回は、Google Webフォント設定を行います。設定するファイルは、「02ホームページ中級講座 ナビゲーションの作成(CSS)」で作成したコードを使います。 Google のWebフォントを指定する ブラウザのデフォルトフォントについて ブラウザのフォントは、特に指定がない場合、OSやブラウザのデフォルトフォントで表示されます。例えば： Windows... -
02ホームページ中級講座 ナビゲーションの作成(CSS)
HTMLマークアップファイルの確認 今回は、下記のページで作成したHTMLを使います。 https://fukuokamiyako.com/post-1470/ デフォルトのスタイルシート HTMLをブラウザでプレビューする際、各ブラウザにはそれぞれデフォルトのスタイルシートが設定されています。検証ツールのCSSセクションを見ると、「ユーザーエージェントスタイルシート」... -
01 ホームページ中級講座 ナビゲーションの作成(HTML)
今回は、HTMLを文章から正しくマークアップしてから、CSSで横並びのナビゲーションを作成していきます。まずは正しくマークアップできるか確認してみましょう。 下記の文章から、HTMLをマークアップしてみましょう エコロジーと環境問題 ECOLOGY【エコロジー】 Home Service Map エコロジーへの取り組み Computer Technology Groupsでは早く... -
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