HTMLとCSSの基本 タグ辞典③ フォーム関連のタグ
フォーム関連タグ HTMLフォームには、ユーザーからデータを入力して送信するためのさまざまなタグが用意されています。以下は、フォームに関連する主要なタグと、特に重要な <input> タグの各タイプの詳細です。 <form> 概要: フォー...
2024-11
HTMLとCSSの基本 
HTMLとCSSの基本 タグ辞典② サイト構造を表すセマンティックタグ
サイト構造を表すセマンティックタグ HTML5では、ページ内の役割を表すための「セマンティックタグ」が導入され、Webページの構造を明確にするために使われます。これにより、コードが読みやすくなるだけでなく、検索エンジンや支援技術（スクリーン...
HTMLとCSSの基本 タグ辞典① 基本のタグ
タグの基本を理解しよう！ タグはこんな感じで書きます。 <h1>こんにちは世界</h1> 仕組みを図解すると以下のとおりです。 「h1」の部分がタグの種類です。h1の他に「p」「img」「a」などがあります。 タグで囲むことにより「ここは”...
未分類 PHP工房のメールフォームを実装する
PHP工房さんのメールフォームを実装しよう WEBサイト制作を行うほとんどのケースでメールフォームが必要になってきます。 しかし、メールフォームはサーバー側の言語を使わないと実装ができません。 「メールフォーム」はメールを行うだけの簡単なも...
WEBデザイン企画 ヒアリングシートで情報を集めよう
ヒアリングシートを使う サイトを作成するときにまずはヒアリングシートを作成する必要があります。 以下に所要なヒアリング項目をまとめましたので参考にしてください。 1. 基本情報 クライアント名：企業名、担当者の氏名、役職、連絡先など 業種・...
WEB制作基礎知識 イラストレーターでSVG画像を作ろう！
SVG画像を作ろう！ スマホ対応が必須となった現在の状況では綺麗に表示できるSVGを利用することが非常に有用です。 今回はイラストレーターによるSVG画像の作成方法についてまとめたいと思います。 今回はイラストレーターでこのような画像を作っ...
CSSレイアウトテクニック 画像にテキストをちょい被せ
画像の横にちょこっと文字を重ねます position:absolute;でやりたくなるところですが、position:relative;で最小限の移動に収めるとレスポンシブ等にも柔軟に対応できるようになります。 デモはこちら まずは普通に横...
WEB制作基礎知識 Basic認証をかける ※中級者向け
サイトの閲覧に簡易のパスワードをかけよう webサイトにパスワードの閲覧制限をかけたい場合はサーバーの設定ファイルを追加し、パスワードをかけます。 macの場合「.htaccess」という名称のファイルは非表示になってしまうため注意が必要で...
CSSレイアウトテクニック 見出しの装飾をする
見出しの下にちょこっと線をつけましょう デモはこちら こんな感じでレイアウトしているサイトをよくみるはず。やってみましょう。 HTML <h2>問い合わせ</h2> CSS 擬似要素を利用して追加します。 h2 { text-align: ...
CSSレイアウトテクニック 背景色を交互にする
背景を交互にしましょう デモはこちら 背景を交互にするには背景をつけるdivと幅をつけるdivを二重にすることで実現できます。 HTML <div class="bg-gray"> <div class="container"> <h2>ダ...
WEB制作基礎知識 スムーススクロールと上に戻るボタンを実装する
スムーススクロールと上に戻るボタンを実装しましょう！ スムーススクロールとはページ内リンクを押した際に、すーっと移動するものです。 まずはページ内リンクを設定しておきましょう。 該当エリアに「ID」を振っておき、そこへaタグでリンクさせます...
CSSレイアウトテクニック ヒーローイメージによくあるレイアウトを作る【flexbox版】
概要 コードを編集し、以下のようなレイアウトを作成してください。 背景のグラデーションと文字装飾はすでに適用されているため、位置の指定を行なってください。 今回はflexboxを使用してください。 ポジションの場合は以下です。 ヒント 文字...