◆CSS編◆
- 領域の横サイズ： px
- 領域の縦サイズ： px
|
スタイルシート（css）はJavaScript（JS）をここで使用しているものをご紹介します。 誰が作成しても同じパターンになるパターン（定型）もありますが、思いつきで作成したものもあります。 記述や流れの美しさに欠けていると思っているものも、多々存在しています。 |
◆CSS編◆CSSを作成する際に、HTMLで定義されている要素のうち、大きく分けて２種類あることを知っておくと、反映されない場合の解決につながるかもしれません。「ブロックレベル要素（Block-Level Elements）」と「インライン要素（Inline Elements）」という２種類です。 ざっくりと説明すると、 「ブロックレベル要素（Block-Level Elements）」はブロック−つまり一つの塊を構成し、改行を入れることができます。 ＜P＞や＜DIV＞がそれにあたります。 「インライン要素（Inline Elements）」はブロックの中で使用する要素で、一般的には改行が入りません。 ＜B＞や＜SPAN＞がそれにあたります。 例外的には、「置換インライン要素」や「特殊要素」と呼ばれるものがあり、「特殊要素」などは、配する場所によってどちらにもなります。 実は、これら要素には記述する順番というか優先順位もあります。
●正しい書き方の例：ブロックレベル要素の中にインライン要素を配置
＜P＞Pは＜B＞パラグラフ＜/B＞です。＜/P＞ ●書く順番が間違っている例：インライン要素の中にブロックレベル要素を配置 ＜B＞＜P＞Pはパラグラフです。＜/P＞＜/B＞ いろいろと知ると面倒に感じる人がいるかもしれませんが、全部を知らずとも、自分がよく使う要素については知っておくと良いかもしれません。 |
01．ヘッドライン文字の両側にライン |
《表示例》 バナーグループの表題で使用
サイトご紹介します |
《CSS側》
/******************** ** 見出し文字をラインで挟む（１） ********************/ // 見出し文字の＜H１＞〜＜H６＞（HとはHeadingの頭文字）ですが、文字の両側にラインを配置します。 //「クラス名」の箇所には自分で好きな クラス名をつけます。《HTML》
|
02．ヘッドライン文字の両側にライン |
|
《表示例》 ＜hr＞を斜線や波線、ギザギザにする 斜線  ←これが画像。右クリックで保存
ギザギザ線  ←これが画像。右クリックで保存
波線  ←これが画像。右クリックで保存
|
《CSS側》
/******************** ** 横罫線を飾る ********************/ // ＜HR＞はHorizontalRuleの略で水平の罫線。 // widthで横の長さ、sizeで太さというか縦の高さを指定。無表記でデフォルト横幅100%。 // 装飾には《表示例》にある画像が必要です。自分で作成してみるのも面白いのでは。 // 画像なので自作すれば色つけも可能 //「クラス名」の箇所には自分で好きな クラス名をつけます。《HTML》 |
03．ヘッドライン文字の上下にライン、文字の先頭に縦線 |
《表示例》 いろいろなページで使っています。テキスト |
《CSS側》
/******************** ** 見出し文字をラインで挟む（２） ********************/ // 見出し文字の＜H１＞〜＜H６＞（HとはHeadingの頭文字）ですが、 // 文字の上下にライン、文字の先頭には縦線を配置します。 //「クラス名」の箇所には自分で好きな クラス名をつけます。《HTML》
|
04．ヘッドライン文字の下に2種類の下線を配置する |
《表示例》いろいろな場所で使っています。
（用語の定義） |
《CSS側》
/******************** ** 見出し文字に2種類の下線を配する ********************/ // 見出し文字の＜H１＞〜＜H６＞（HとはHeadingの頭文字）ですが、 // widthで横の長さ、sizeで太さというか縦の高さを指定。無表記でデフォルト横幅100%。 //「クラス名」の箇所には自分で好きなクラス名をつけます。《HTML》
|
05．DIVのなかでコラムを自動生成させる |
|
《表示例》
いろはにほへとちりぬるを、わかよたれそつねならむ。うゐのおくやまけふこえて、あさきゆめみしゑひもせすん。
色は匂へど散りぬるを、我が世誰そ常ならむ。有為の奥山今日越えて、浅き夢見し酔ひもせす、ん。 いろはにほへとちりぬるを、わかよたれそつねならむ。うゐのおくやまけふこえて、あさきゆめみしゑひもせすん。 色は匂へど散りぬるを、我が世誰そ常ならむ。有為の奥山今日越えて、浅き夢見し酔ひもせす、ん。 |
《CSS側》
/******************** ** DIVの中でコラムを自動生成させる ********************/ // ＜DIV＞だけではコラムは1つだけです。＜table＞タグでコラムを作成しても // 文章量の増減で文字を移動させなければなりません。 // コラム数を指定するだけで、自動的に文字が寄ってくれるので // 作業が楽になることと、タグの記述が少なくて済みます。 //「クラス名」の箇所には自分で好きな クラス名をつけます。《HTML》
|
06．角を丸くする（１） |
|
《表示例》 |
《CSS側》
/************** ** 角を丸くする（1） **************/ //テキストエリアに余白を設けるのも普通にpaddingで指定するだけ。 //「クラス名」の箇所には自分で好きな クラス名をつけます。《HTML》 |
07．角を丸くする（２） |
|
《表示例》 |
《CSS側》
/******************** ** 指定した角を丸くする（２） ********************/ //四角いエリアの一部の角を丸くするCSSです。 //背景色も普通に記述することができるので楽ちん //角指定の方法が3種類ありますが、4つの角を個別に指定することが出来ます //テキストエリアに余白を設けるのも普通にpaddingで指定するだけ。 //「クラス名」の箇所には自分で好きな クラス名をつけます。《HTML》 |
08．マーカーのような下線を付ける |
|
《表示例》 以前は、マーカーに見えるような画像を作成して、文字の背景に充てていましたが、 マーカーのかすれた感じも画像で出そうと頑張ってもうまくいかず、画像作成のほうが 面倒になっていました。その後、グラデーションを学んでからは、画像なしでもマーカーのような下線が つけられるし、色も簡単に変更出来るし、妙に時間のかかる作業が少なくなりました。 【サンプル01】普通に文字の背景色でマーカーを引く 【サンプル02】文字の高さより高く指定してマーカーを引く 【サンプル03】グラデーションでマーカーを引く |
《CSS側》
/******************** ** マーカーのような下線を付ける ********************/ //「クラス名」の箇所には自分で好きな クラス名をつけます。《HTML》
テキスト続くテキスト・・・
|
09．olのリストliに自動的に（）などの括弧を付ける |
《表示例》
( ) ：parentheses, round brackets：丸括弧（長い間これがブラケットだと思っていました。） [ ] ：brackets, square brackets：角括弧 { } ：braces, curly brackets：波括弧（長い間これを大括弧と呼んでいました。） < > ：chevrons, angle brackets：山括弧（これに呼び名があるとは思わず使っていました。） |
《CSS側》
/******************** ** olのリストliに自動的に括弧をつける ********************/ //「クラス名」の箇所には自分で好きな クラス名をつけます。《HTML》
|
10．左寄せと右寄せを混在させて１行にする |
|
《表示例》 改行してるパターンは割とよく見かけますが、1行にすると収まりがよくきれいに見えます。 ●題名
2017.08.10
|
《CSS側》
/******************** ** float="left"とfloat="right"をつかって1行にする ********************/ //「クラス名」の箇所には自分で好きな クラス名をつけます。《HTML》
|
11．jQueryを使わずに普通のCSSでトグル動作 | |
|
《表示例》 jQueryを使ってトグル動作を実現しているサイトはよく見ます。 ラベルとチェックボックスを使ってトグルの動作をさせたのが以下。 ラベルが項目テキストで、隠れているチェックボックスのon/offでリストが表示される仕組みです。 チェックボックスは、マークしたり、マークを外したりが出来るので、この部分をオン／オフ動作に利用。 因みにinputBoxのtypeにあるRadioはクリックすると開きっぱなしになって戻りません。 サンプルは＜table＞内に置いています。幅を定めない場合は横幅いっぱいで動作します。 |
|
《CSS側》
/******************** ** CheckBoxでトグル ********************/ //「クラス名」の箇所には自分で好きな クラス名をつけます。《HTML》 |