カテゴリー
閉じる
カテゴリー
Top >> ウェブデザイン(HTML/CSS)

Jimdoウェブデザイン
複数の段落を枠線で囲む

Jimdoで複数の段落を枠線で囲みたいとき、ワンクリックで実装できるメニューがありませんので、HTML/CSSを編集する必要があります。

段落が1つだけ、あるいは簡単な一文だけを枠線で囲む方法については、Jimdoウェブデザイン:文章を枠線で囲むをご覧ください。

段落が複数になる場合は、<div></div>タグを使って簡単に処理できます。

手順

  1. コンテンツ「文章」で文章を入力したら、メニュー「HTMLを編集」を開きます。
  2. Jimdo コンテンツ「文章」 HTMLを編集 「HTMLを編集」画面
  3. 最初の行に下記コードを、
  4. <div style="border: solid 1px black; padding: 16px;">
  5. 最後の行に下記コードをペーストします。
  6. </div>
    「HTMLを編集」でdivコード(CSS)を挿入
  7. OKを押して、保存する。
  8. 複数の段落を囲う枠線が完成

ペーストしたコードの解説

style=" "は、デザインを指定するエリアです。ここにどのようなデザインにするか具体的に記述します(CSS)。

border: solid 1px black;について、borderは枠線、solidはその枠線の種類を、1pxはその枠線の太さを、blackはその枠線の色を指定しています。

solid は単線の指定で、次のように変更することもできます。

  • solid:単線
  • double:二重線
  • dashed:ハイフン線
  • dotted:点線
  • outset:立体
  • inset:窪み

枠線の色はカラーネームのほか、カラーコード(16進数)で指定することもできます。

カラーネーム カラーコード
Blue #0000FF
Red #FF0000
Yellow #FFFF00
Green #008000
Brown #A52A2A
Grey #808080
White #FFFFFF
Black #000000

そして、枠線を太くしたければpxの数字を大きく、細くしたければpxの数字を小さくします。

padding: 16px;について、paddingは枠線からコンテンツまでの距離を指定します。ここでのコンテンツとは文章のことで、枠線と文章の間に16pxの余白を持たせています。

もっと余白を広くもたせたければpxの数字を大きく、狭くしたければpxの数字を小さくします。

ここでは上下左右の余白を一括で指定していますが、それぞれ別の値を指定することもできます。詳しくは、padding/marginの指定方法(準備中)をご覧ください。

枠線内の文章を中央寄せにする

枠線で囲んだ段落のうち、特定の文章を中央寄せにするには、その文章をドラッグしてメニューから「中央寄せ」を選べばOKです。

メニューから「中央寄せ」を選択 例:タイトルを中央寄せにする
オフィスペンぎん
作者:オフィスペンぎん(オフペン)
日英中翻訳者/メディアディベロッパー/ライター。ペンギンの教室の他、タブストックにてソロギター向け編曲や採譜。依頼、相談、メッセージはフォームまたはTwitterから。
記事のシェア
役に立った、参考になった、おもしろかった・・もしそう思ったら、シェアしていただけると嬉しいです♪

同じカテゴリーの記事(ウェブデザイン HTML/CSS)

ペンギンの教室
カテゴリー
人気の記事
固有名詞/専門用語 日英辞書

化学、会計、観光、アニメ、漫画などの分野の用語を収録。

固有名詞・専門用語の日英・英日辞書
ペンギンの教室について
ペンギンの教室の作者:オフィスペンぎん

ペンギンの教室は、日ごろ感じる疑問や覚えなければいけないことを、記事や復習問題、クイズ、ゲームを通じて、わかりやすく学べるサイトです。

運営者:オフィスペンぎん

相談/連絡:フォームまたはTwitter

教習所の口コミ投稿サイトレビュープラスを立ち上げました。ぜひ経験談や感想をお寄せください!