寝屋川市社会福祉協議会

iframe レスポンシブ

youtube

※youtubeより動画サンプルで使用しています。

Google地図

動画やyoutube、共有の埋め込みタグをdivで囲む
iframeをクラスd_iframeで囲む

現HPで使用中サンプル【h2】

見出し3 【h3】

見出し4 【h4】

見出し5 【h5】

見出し6 【h6】

段落　p
サンプル文章です。サンプル文章です。サンプル文章です。サンプル文章です。サンプル文章です。 サンプル文章です。サンプル文章です。サンプル文章です。サンプル文章です。サンプル文章です。

トップページも整理整頓中です。
トップページ(サンプル)

CGI ページ作成

ケントさんのフリーCGIの利用

ホームページ作成は、通常htmlファイルを作成してFTPソフトでアップロードして完了となりますが、これは、ブログのようにブラウザで更新ができます。CGIというプログラムを使います。 設置するときには、多少労力がいりますが、設置後は、ブラウザや、SNS更新のように、ブラウザがあれば、モバイルやタブレットで更新ができるので、便利な点も多いです。

• ボランティアグループのページ（作成しています）
• ケントさんのサンプル　「Cafe log」
• Kent Web ケントさんのトップページ
• ※cgiプログラムを利用するには、表示オッケーのレンタルサーバーが必要です。
• ※フォルダの階層・名前付けなどサーバーによっては制約があり、注意が必要です。（社協も独自の制約があります。）

折りたたみ記事　開閉する動き

ページに一つならエリア1使用。複数使うときは、inputとlabelタブの中を1,2,3と変更してください。

エリア1

エリア2

エリア3

テーブルのレスポンシブ対応

パソコンで2列（3列）スマホでは1列（基本）

テーブルのタグのクラスに「tbl_sp」と指定してください。

テーブルやセルの線を消す

テーブルやセルのタグのクラスに「border0」と指定してください。
2つ以上のクラスは、半角スペースで複数指定できます。

パソコンもスマホも2列（3列）（レスポンシブ対応特になしの場合）

テーブルのタグのクラス無し。

箇条書きと段落番号

箇条書き　　ul

羅列するときに便利です。折り返しても文頭が揃います。応用が聞きやすく、ナビゲーションにも使われます。（中級）

• 1つめの項目
• 2つめの項目
• 3つめの項目ああああああああああああああああああああああああああああああああああああああああああああああああああああ
• 4つめの項目ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
• 5つめの項目

段落番号　　ol

手順や、流れなど番号を表示したいときに。

1. 1つめの項目
2. 2つめの項目あああああああああああああああああああああああああああああああああああああああ
3. 3つめの項目
4. 4つめの項目ああああああああああああああああああああああああああああああああああああああああああああああああ
5. 5つめの項目

リンクについて

普通のリンク：ページへのリンクする

あああああああああああ

ページ内IDへのリンク：ブックマークへのリンク

PDF一覧ページのボランティア通信（pdf.html#sec03）へ

社協以外の他サイトへのリンク

くりっくねっと☆

pdfファイルへのリンク(自動でアイコンが表示)

pdfファイルを新しいウィンドウ（タブ）を開きます。

ワードファイルへのリンク(自動でアイコンが表示)

ワードファイルを新しいウィンドウ（タブ）を開きます。

エクセルファイルへのリンク(自動でアイコンが表示)

エクセルファイルを新しいウィンドウ（タブ）を開きます。

他ページへボタンリンクにする。段落にクラスbtn

お問合せのページへ

他サイトへのリンクがわかるボタンリンクにする。段落にクラスbtn_link

くりっくねっと☆

テーブルは2列で

表は、シンプルに2列で

今後は、シンプルな2列の表をうまく利用しよう。現在の5～6列の表は、今後の課題です。

列数が多いとスマホの時にづらい。

パソコン画面でウインドウ幅を狭めてみてください。

tableクラスtbl_sp を追加　

パソコン画面でウインドウ幅を狭めてみてください。(640px以下）

写真は、中央揃えで1～2枚で

写真のはいる段落pのクラス

段落中央揃えで1枚写真をいれる 写真は、最大でも1000px表示です。無駄に大きすぎないように用意してください。1000px以下なら実寸サイズで表示されます。

中央揃え 2枚中位写真　pのクラスimg_con_mini

写真 imgのクラスで右寄せ　左寄せ（中級者向け）

写真をフロートで右寄せや左寄せができます。ただ、文字の量や、前後のコンテンツによって、レスポンシブやスタイルが増えますので、上記のシンプルな形で、写真を入れてください。
あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

見出し2（conのタイトル）

タイトルや、見出しは文字の大きさではなく、見出しを使ってください。

見出し3です。

見出し4です。

見出し5です。

見出し6です。

※本文の中では、見出し3～6を順に使ってください。

段落はp　文字と写真は、段落に入れましょう。

段落は通常は左揃えに。中央揃え・右揃えはクラスをつける

規定は、左揃えです。
あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

段落pにt_centerクラスをつけると中央揃えになります。
あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

段落pにt_rightクラスをつけると右揃えになります。
あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

太字について、

論理的強調1　太字には、　<strong>タグ。
論理的強調2　で太字で斜体に　<em>タグがあります。
赤字　クラスred
青字　クラスblue
オレンジ　クラスorange

本文も半角英数字を使おう

本文で表示する、数字や英文字も半角で使用してください。

HP作成メモ

関連リンク集

• レジストリをさわらず、フォルダで管理できるPDF編集ソフト
• グーグルのモバイルフレンドリーで確認
• 初心者向けHTML入門：書き方の基本とタグの使い方
• 無料素材集　いらすとや
• ホームページ検証サイト
• Markup Validation Service

大事にしていること・注意点

• 2019年7月プチリニューアルをしました。なるべくシンプルにして、JavaScriptを少なく、以前使っていたファンシーボックスやdlタグなども中止。種類を増やさず応用のきくように気をつけています。勉強中で完璧ではありません。
• レスポンシブ対応していますが、最低限のことで、見やすくみえればいいと、レイアウトを考えています。
• 2022年プチリニューアルを計画中です。レスポンシブ対応ですが、今回はモバイルファーストで書き直しで合わせて、ソースのお掃除をします。

2022・スタイルシート変更点

• base.css :
  reset　全頁のヘッダーとフッター　グローバルナビゲーション
• index.css :
  インデックスページの本文領域とサイトマップ領域
• sub.css :
  インデックス以外の各ページ、よく使う書式やクラス
• one.css :
  単独ページ、一時的に作る独立したページ