特殊タグを使用したデザインの紹介 作：SunGenuin(佐藤)
・マシュマロ
・掲示板タグ内での動作確認
・LINE
・参照機能の利用
タグの詳細については「誤字報告」をONにすると御覧いただけます。
特殊タグを使用したデザインの紹介その1
絶対にズレないマシュマロ
boxタグを重ねることで枠の太さを表現
上記のマシュマロを表現するためにどのようなタグを使用しているか紹介します。
使用しているもっとも重要な特殊タグは「box」です。
boxは本当に便利なタグで、いろんなものを表現するのに利用できます。
※タグとして機能しないように、下記で紹介しているものには《》とbox の間に半角スペースを入れていますが、実際に使用する際は半角スペースを削除してください。
《 box : w100%,bg#a9a9a9,p1》
「w100%」＝「画面幅いっぱいまで表示」
「bg#a9a9a9」＝「bgは「bgcolor」の略。box内部の背景色を設定することができる」
「p1」＝「p = paddingとはbox内部の余白のこと。p横の数字を大きくした分だけ余白が大きくなる」
例：
内側に余白があることがわかります
他にも「bo」というbox内部のタグがあります。
「bo#fe8196」＝「boは「bordercolor」の略。boxの外枠色を設定することができる」
例：
padding「2」
外枠色をピンクに設定したボックス
薄いですが外枠があることがわかります
外枠を太くしたい場合は、
《 box : w100%,p0.5,bo#fe8196,bg#fe8196》
《 box : w100%,p0.2,bg#ffffff》
《 / box》
《 / box》
このように、背景色(bg)と外枠(bo)が同色、かつpaddingで任意の余白を作ったベースのboxに、
背景色(bg)が別色のboxを重ねると、外枠を太く見せることができます。
boxタグを利用すれば、PCとスマホで表示がズレてしまうといった不安点も気にせずに済みます。
また、下記のように他のタグと同時にしようした場合どうなるのかも紹介します。
例えば掲示板を表現するために「boxbgcolor」タグを利用して背景色を変える場合があると思います。その際にtableタグなどでマシュマロや他のコンテンツを表現しようとすると、背景色などの設定に悩むかも知れません。
なぜなら「boxbgcolor」タグ内に「boxbgcolor」タグを使用することができないからです。
色の設定に悩むこともなければ、
PCでもスマホでも横ズレせずに
閲覧端末の画面サイズに合わせて自動でサイズ調整されます
また、
tableタグなどを併用するよりもいじるタグを押さえることが可能です
マシュマロを例にとってboxタグの使用を紹介しましたが、
下記はboxタグを利用して掲示板を表現する方法の紹介です。
まずbox内部の設定は
・w100%
・bg#dcdcdc
・p1
あとはいつも通り、
1：掲示板タグを追加 ID:AU312wPEJ
テスト
2：掲示板タグを追加 ID:AU312wPEJ
>>1 レスも機能していますね
3：掲示板タグを追加 ID:AU312wPEJ
「boxbgcolor」タグを利用して掲示板の背景色を設定する場合、同じタグ内でもう1度boxbgcolorを使用することはできません。
しかしこれはbox内なので、boxbgcolorを使用することが可能になります。
4：掲示板タグを追加 ID:AU312wPEJ
たとえば
5：掲示板タグを追加 ID:AU312wPEJ
もちろん今まで通り、
| こうして | テーブルタグも |
| 利用することが | 可能です |
6：掲示板タグを追加 ID:AU312wPEJ
7：掲示板タグを追加 ID:AU312wPEJ
boxでマシュマロを表現しているので、ref(参照機能)と併用してもマシュマロのレイアウトが崩れることはありません。
8：掲示板タグを追加 ID:AU312wPEJ
Twitterの画面もboxとtableタグを利用して作ってみました
ここにプロフィールを書く
0 フォロー中 | 0 フォロワー |
| ツイート | ツイートと返信 | メディア | いいね |
9：掲示板タグを追加 ID:AU312wPEJ
有志の方が追加してくれているフォントを利用することで、Twitter風のデザインにかなり近づけられる
使用したフォントはこちら↓
https://syosetu.org/font_maker/?mode=font_detail&font_id=58
boxごとコピペすることで2ツイート目がすぐ作れます
山田太郎 @testtesttest |
ここにツイートの内容
| こ | り | い | き |
10：掲示板タグを追加 ID:AU312wPEJ
特定の文字にだけサイズや背景色を付けたい場合もあるかと思います
その時は「text」タグが便利です
textタグはboxタグ同様、内部を設定することができます
《 text : s1.5,bg#ffffff》確認《 / text》
確認
「s」＝「sはサイズの略」
「bg」＝「bgは「bgcolor」(背景色)の略」
このほかに、
「r」＝「rはおそらく「rotate」の略。文字を傾けることができる」
《 text : r30,s1.5,bg#ffffff》確認《 / text》
確認
11：掲示板タグを追加 ID:AU312wPEJ
LINE風のデザインも
スタンプもどきも作ってみました
| ここにテキストが入ります |
| ここにテキストが入ります |
12：掲示板タグを追加 ID:AU312wPEJ
>>11 LINE風やTwitter風のデザインなどはご自由に使ってください
もちろん改造もOKです
13：掲示板タグを追加 ID:AU312wPEJ
何か気になる点があればコメントください
14：掲示板タグを追加 ID:AU312wPEJ
特殊タグいっぱいの小説、もっと流行れ──……！！！！
マシュマロが表現できることがわかります
refからマシュマロを見れるようにすると、
なんだかURLをクリックしているような感覚になりますね
コピペ等はご自由にどうぞ
※LINE内のスタンプ等はあくまでサンプルです