ホームページ中級講座– CSSの特にレイアウトであるflexboxを学びます。 –
-
Part4：CSSで見た目を整えよう ポートフォリオコーディング
Part3ではHTMLでポートフォリオの基本構造を作成しました。今回はそのHTMLにCSSを加えて、デザインカンプに近づけていきます。CSSによるスタイルの調整は、情報の伝わりやすさ、視認性、操作性を向上させる大切なステップです。使用しているCSSファイルの構成をもとに、重要なポイントを丁寧に解説していきます。 サンプルコード HTML+CSS ... -
Part3：HTMLで基本の構造を作ろうポートフォリオコーディング+Bootstrap
デザインカンプの作成が終わったら、いよいよコーディングを始めましょう。最初のステップでは、デザインにとらわれすぎず、内容に合わせた正しいHTMLマークアップを意識することが大切です。以下に、完成形となるポートフォリオのサンプルサイトを掲載していますので、最終的なイメージとして参考にしてください。 ポートフォリオサンプルサ... -
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」を使った具体的なアップロード手... -
Visual Studio Codeのおすすめプラグインをインストールしてみる
Visual Studio Code（VSC）は、軽量で高機能なプログラムを記述するための、コードエディタとして広く利用されています。便利な拡張機能（プラグイン）を活用することで、開発効率を向上させ、スピーディで快適な開発環境を構築することができます。VSCのおすすめプラグインをいくつか紹介します。 まずは、拡張機能（プラグイン）のインスト... -
Visual Studio Codeのインストールとセットアップ
Visual Studio Codeは、マイクロソフトが開発した無料のオープンソースのテキストエディターです。多くのプログラミング言語に対応し、Windows、macOS、Linuxで利用できます。 Visual Studio Codeには、シンタックスハイライト、コード補完、デバッグ機能、Git統合、拡張機能など、プログラミング作業に必要な多数の機能が含まれています。ま... -
ホームページ中級講座 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では早く...
1