中級– tag –
-
コードが爆速で入力できる。 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...
1