お勉強部屋

ホームページに初チャレンジです。専用ソフトも不要、HP作成等の事前知識なしで簡単にホームページができる「Jimdo」を使って、このホームページを作成しました。基本的なページはあっという間に完成、それだけでもよかったのですが、好奇心旺盛の性分が災いしてカスタマイズにはまってしまいました。(只今、試行錯誤中)

まだまだ、勉強中の身の上、HTML、CSSの備忘録を兼ねてページを作成しました。

ヘッダーの編集

H1~H3:見出し大・中・小

H4~H6:HTML編集、ヘッダー部分を編集で使用できる


「ヘッダー部分を編集」で、このようなソースを入れると「大見出しの背景が青」に変わります。

間に、他のスタイル指定を追加することでいろんなことができます。

 

<style type="text/css">

h1 {

background-color:#66CCFF;

padding-left:10px;

}

 

</style>

「H4 見出し」を指定し、背景画像をつけました。

HTML

項目の一部に背景色をつける

1.装飾のためのコードを書き入れる

<div>、装飾をする範囲の最後に</div>を書き入れます。いずれも、すべて半角英小文字で指定します。 この「<div>」は、区切りを意味するDivision(ディヴィジョン)の頭文字をとったものです。コード的には何の意味も持ちません。装飾をするために用いられる記述です。

 

2.色を付ける指定をする

<div style="background: #ddf4ff; padding: 20px;">

<p>お客様のご要請により実施される任意監査につきましても、高品質なサービスをご提供しております。</p>

</div>

項目の一部に枠線をつける

2.枠線を付ける指定を行う

<div style="border: 2px solid #3399cc; margin: 5px; padding: 10px;">

<p>当税理士事務所では、単に監査を実施するだけでなく、監査人としての立場に反しない範囲で、お客様が把握されにくい業務上の改善点について、できる限りアドバイスさせていただきたいと思っております。</p>

</div>

枠をつける

HTML編集でつぎのようなソースを貼りつけると周りに枠がつきます。強調したいときに便利!(例示:紫色の角丸枠)※点線、二重線も大丈夫です。

★ここにテキストが入ります。

 <div style="border:1px solid #93F;padding:10px;border-radius:10px;">★</div>

文章に枠をつけると強調できて便利です。

<a href="javascript:window.print();" rel="nofollow">印刷用</a>

ネットショップ向けカレンダージェネレーター:http://netshop.japanesecalendar.net/

<a href="http://copipe-de-waku.jimdo.com/" target="_blank">コピペで使える簡単スタイル!「コピペ枠わく」</a>

文章の頭にアイコンをつける

「ヘッダー部分を編集」でアイコン設定をしてから使う。

.newmark {                        /* 「Newmark」のアイコンを設定 */

display:block;  

background-image: url('http://u.jimdo.com/www40/o/s19e3e4d7a064cfa2/img/ib8676b650fea26a7/1428929926/std/image.png');

background-repeat: no-repeat;

padding-left:45px;

height:25px;

}

文章を更新しました。

文字サイズや色を変更する

【変更方法】

1)HTMLが編集できる画面(HTMLソースエディタ)に切り替えます。

2)下記のHTMLソースを“コピペ”して使ってください。

【文字のサイズを変える】

font-size(フォントサイズ)の右の数字でサイズ指定する。

<span style="font-size: 18px;">サイズを変えたい文字</span>

【文字の色を変更する】

パターン1:カラーネームで指定する。

colorの右にカラーネームを記入し、色指定します。

 <span style="color:black;">色を変えたい文字</span>

 

パターン2:RGBの16進法で指定する。

RGBの16進数値(color右の#と6桁の英数がコード)で、色を指定する。

<span style="color:#000000;">色を変えたい文字</span>

文字のサイズと色をかえる

font-size:14px;color:#0000;という風に2つ繋げて記述します。

 

<span style="font-size:14px;color:#FF0099;">ここに色とサイズを変えたい文字・文章を入力</span>

参考にさせてもらったサイトの紹介

フォームメーラー:多彩な用途(お問い合わせ・お申し込み・応募・注文・アンケート)に対応した、SSL・スマートフォン対応のメールフォームを簡単に作れるクラウド型メールフォームサービス   http://www.form-mailer.jp/