寝屋川市社会福祉協議会 HOME寝屋川市社会福祉協議会

くりっくねっと☆覚書

箇条書きと段落番号

箇条書き  ul

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

段落番号  ol

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

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

リンクに付いて

普通のリンク

あああああああああああ


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

くりっくねっと☆


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

ウィンドウ(タブ)を開きます。


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

ウィンドウ(タブ)を開きます。


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

ウィンドウ(タブ)を開きます。


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

お問合せのページへ


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


テーブルは2列で

表は、シンプルに2列で

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

キャプションをうまく使おう。
見出しセル ←一番上の見出しセルに必要なら、幅を指定するクラスを入れる。データセル
見出しセル データセル
見出しセル データセル
見出しセル データセル
見出しセル データセル

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

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

5列
見出しセル データセル  データセル  データセル  データセル  データセル  データセル
見出しセル データセル  データセル  データセル  データセル  データセル  データセル
見出しセル データセル  データセル  データセル  データセル  データセル  データセル
見出しセル データセル  データセル  データセル  データセル  データセル  データセル
見出しセル データセル  データセル  データセル  データセル  データセル  データセル

tableクラスtbl_sp を追加 

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

5列
見出しセル データセル  データセル  データセル  データセル  データセル  データセル
見出しセル データセル  データセル  データセル  データセル  データセル  データセル
見出しセル データセル  データセル  データセル  データセル  データセル  データセル
見出しセル データセル  データセル  データセル  データセル  データセル  データセル
見出しセル データセル  データセル  データセル  データセル  データセル  データセル

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

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

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

サンプルサンプルサンプル

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

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

サンプル

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

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

サンプルあああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

見出し2(conのタイトル)

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

見出し3です。

見出し4です。

見出し5です。
見出し6です。

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

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

写真 imgのクラスで右寄せ 左寄せ

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


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


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

太字について、

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

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

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

HP作成メモ

関連リンク集

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

ページのトップへ戻る