超・超実践 フタハナで学ぶWeb制作 twei
この記事は、定期ゲ・竹 Advent Calendar 2020 22日目の記事です。
adventar.org
こんにちは、25氏です。
また25氏です。ご無沙汰しております。
なんか15日にも記事を投下したような気もしますが、気のせいかな～。
気の所為ですね。ええ。
つうてたけど18日に記事出してたわ
内容は去年書いた記事の続き、発展型となっています。
具体的にはなんとなくHTMLが読めて書けて、CSSの書き方も形だけなら……ぐらいは欲しいかもしれません。
なので、HTMLもCSSもな～んにも分からん！という方は、まずそちらからよろしくお願いします。
まあ読んで分かるかというと微妙な感じなんですけど……
shapa.hateblo.jp
はじめに
そのまえに一つだけいいですか
フタハナ運営へ
プロフ文を20000文字までにしてくれると嬉しかったです
はなたばアンリアル製作委員会より
以上です。
まえがき
note.com
じき次のハナが来て見れなくなるんですけどEno.100です
マジか……
素のマジか……が出てしまいました。25氏です。
結構端折り気味走り気味の解説だったのですが、参考になったようで何よりです。
というかメッチャよくできてるんだよな。こういう素材の味残して良さげにするの苦手なので……
もちろん25氏も負けてはいられません。 というかここ1年でメチャクチャ成長しました。
存在しないマナーサイトとか、存在しない建設会社とか、存在しないアニメとか作ってたわけですし……
まあそれに関しては別の話ということで。
私信：最近Webデザイン技能検定3級を取りました。やった～
ということで、成長した25氏がお送りするフタハナプロフ改造リファレンスをお送りします。
これを読んで実践すれば、ひと味違うプロフィールが作れる！！
ただし……
- 素人の技術によるものであること
- 2020年12月現在におけるHTML5とCSS3を基盤としたもの
- W3C勧告の定める記述には沿わない可能性があること
- フタハナ側が今後プロフィールHTMLのサポートしなくなる可能性があること
- これらの技術はフタハナ外では使い物にならない技術である可能性があること
これらにご注意くださいね。
注意書きもご理解して頂いたところで、早速やっていきましょう。
フタハナプロフ 完全攻略編
[初級編] 画像や縁取りを使って、ビジュアルに凝る
とはいえまずは初級編から。
画像タグと仲良くなろう
画像の添付タグは使ったことはありますでしょうか。
<img src="https://bit.ly/3p35MB1" width="120px" alt="鳥居">
こういうやつです。
普通のタグは始点と終点があるのですが、imgタグはこれひとつで完結するタグです。
その代わりに属性が3つも付いているわけですけれども。
とはいえ、1つずつバラしていけば簡単な概念です。
- src属性(src="")は画像URLを貼る場所
- width属性(width="")は画像の横幅を設定する場所
- alt属性(alt="")は画像の説明を書く場所
要は、『画像URL』と『横幅』と『画像の説明』がタグの中に収まっている、それだけですね。
そして、 これをhtmlとして出力すると……
画像が出ました。画像が出るタグなので、そりゃあもう当然のことなのけれども。
でも、これでもうあなたは画像をプロフに添付することができます。ビジュアル付きのプロフが作れます。
borderプロパティと仲良くなろう
じゃあ今度はcssの方から何かやってみましょう。
とはいえ説明よりも見てもらった方が早いので、まずはこちらの画像をご覧ください。
そう、フレームですね。borderプロパティでは要素の境界をデコレーションすることができます。
border: 2px solid #EEEEEE;
borderプロパティも情報量が多いですが、は3つだけ覚えれば大丈夫です。
左から『線の太さ』と『線の種類』と『線の色』。
線の太さはpxなどの単位で指定することができます。
線の種類は様々ありますが、solid(一本線)とdashed(破線)だけ覚えておけば大丈夫です。
線の色はカラーコードやRGBのほか、カラーネームで指定することができます。
え？でも所詮四角で囲むだけだろって？
実はこのborderプロパティ、かなり自由度が高いです。
border-top: 2px solid #EEEEEE; border-right: 2px solid #EEEEEE; border-bottom: 2px solid #EEEEEE; border-left: 2px solid #EEEEEE;
たとえば、上右下左と別個に設定することもできたり……
border-radiusプロパティを付けてあげれば、角が丸くなるし……
他にも色々ありますが、その辺はそういうリファレンスのサイトに丸投げします。
ボックスデザインで調べてみると、色々出てくるのでオススメです。丸コピで動くのもあるので……
画像とborderで色々ワチャワチャするだけで、あっという間に……シャレオツに！
ここまでの内容は、くりぐ氏がコピペするだけで映えるやつをまとめてるので、知ってる人も多いかもしれません。
なのでここからは、ちょっと専門的な……『既に設定されているCSSを書き換える』というのをやっていきます。
破壊(ﾊﾁｪﾃｰｼｮﾝ)の準備は万全か？
[中級編] 背景設定を変えて、オレ様好みのテーマにしちゃう
ところで、フタハナのサイトデザインってなんかこう……全体的に暗いですよね。
やっぱ明るいキャラは背景も明るくしたいじゃないですか。ダークテーマとかオタクっぽいじゃないですか。
なので、変えていきます。どうやって？ backgroundオプションで！！！
とはいえこのオプションもまた、大変に自由度が高いのでかいつまんで説明します。
フタハナのCSSには既にこのように設定がなされています。
ご存知あれですね。全ての背景である灰色のボツボツ背景と、プロフの下地になっている黒いジットリ背景です。
あれらは画像をタイル状に設置することで成されているみたいなので、これを破壊(ﾊﾁｪﾃｰｼｮﾝ)していきましょう。
body{ background-image: url("../images/body_tile.jpeg"); } #container{ background: url("http://futahana.rash.jp/Futahana/images/Getacount/bg.png"); }
bodyに設定されているのが灰色のボツボツ背景で、#containerに設定されているのが黒いジットリ背景です。
これらは、プロフィール側で設定することで上書きすることができます。そう、破壊(ﾊﾁｪﾃｰｼｮﾝ)ですね。
background: url("image.png") #3d4d82;
・画像を背景にするなら、url("image.png")に画像のURLを入れる
※画像を背景にしない場合は、url("")と空欄にしておくといいかもしれません
・単色の背景なら、カラーコードやRGBを入れる
・両方(または複数)ならば、間に半角スペースを入れる
これだけです。そうすると～～～～～～～？？？？
ほら変わった！ このようにしてテーマカラーを変えていきます。
これでもう陰気で怖いダークモードからおさらばです。
あっと、背景色を変える時は、colorプロパティで文字色を変えることをお忘れなく。
ちなみに、画像を並べたいときはrepeatって入れたり、画像で背景を完全に覆いたいときcoverって入れたりするんですけど、それはここを読んでくださいね。
既存のリファレンスは最高
[中級編] セレクタを使いこなして、気になるアイツを改造しちゃう
さて。背景を変えたなら、変えたい部分がまだありますよね。
例えば……あの、お花ラインの画像とか……プロフィールの情報の部分とか……！！！！！！
いじりたいですよね。破壊(ﾊﾁｪ)したいですよね。
そこで『セレクタ』という概念をご存知でしょうか。
cssプロパティを付けるときに指定する、bodyや、.classや、#idですね。
具体的にはここに全て書いてありますが、今回もまた、ハナで使うモノだけかいつまんで説明します。
それではやっていきます。
・特定の画像だけ選択する
#container > img{ display: none; }
これは、#containerの中にあるimgタグを消すCSSです。 いきなり消すとか言っちゃって怖いですね。
既存のセレクタの後ろに ＞ と足して、後ろへ更に追加でセレクタを入れることで、一つ下の階層にある要素を選んで適用することができます。
それで、#containerの下にあるimgタグとは…………！？
そう、お花ラインの画像のことですね。 なんということでしょう。
適用してみると、本当に消えています。恐ろしいオプションですね。
この調子でどんどん消していきましょう。
・プロフィールの特定の部分だけ選択する
.horizontal_box:nth-child(2){ display: none; }
そしてこれは2番目の.horizontal_boxクラスを消すCSSです。
既存のセレクタに:nth-child(n)と足すことで、『n番目の子要素』という絞り込みを足すことができます。便利～！
.horizontal_boxクラスって！？ へへへ、その説明は後述いたしますとも。
なのでnには何番目かを入れればいいのですが、:nth-child(n)というセレクタは困ったことに他の要素も数えてしまうため
それも含めて勘定しないといけません。
さて、これで選ばれた1番目の.horizontal_boxとは……！！！！？？？？
そして.horizontal_boxとは一体…………！！！？？！！？？
アアアアーーーーーーッッッッッッ！！！！！！ プロフィール画像がなくなってしまいました。
やろうと思えば何でも消せてしまうので、くれぐれもご利用は計画的に……
間違ってもバトルログを消し去ったりしちゃダメですよ ここからじゃないと参照できないですからね。
と、ここまでできることを覚えたあなたはもう十分なフタハナプロフマイスターです。
もう25氏から技術的に教えることは何もありません。あとは経験を積むがよろし……
……え、まだ足りない？ 戦闘ログってどうやって弄ってるのって？
しょうかないな～～～～～～～～～いっこだけですよ！！
その代わり、説明自体はかなり"知ってる人向け"で話すので、分からない所があったら調べるんですよ！
[応用編] 不思議な位置のバトルログの謎
はなアンでも特に異質な、不思議な位置にあるバトルログ。
いやだって、普通に考えてこの位置にバトルログはいかんやろ。
でも、やってることは先程の.horizontal_boxを操作することと同じです。
消す代わりに位置を動かす……position: absoluteを使ってるのですがね！
.horizontal_box:nth-child(4){ position: absolute; top:660px; left: 2px; width: 366px; height: 340px; margin-left: 10px; padding: 1em; z-index: 500; text-align: center; font-size: 0; border-radius: 5px; background-color: rgba(244, 244, 244,0.8); box-shadow: 0 3px 5px rgba(0,0,0,0.3); }
~完~
一応分からない人向けの説明をするんですけれど、positionというCSSプロパティがありまして……
通常は世界の常に倣って配置されるのですが、absoluteとfixedとstickyはその限りではありません。
これらはtopとbottomとleftとrightからなる絶対指定によって配置することができるのです。
そうして変な位置にわざわざ移動させて、あたかもホームページのいち要素が如く擬態させていたわけですね。
詳しくはここを読んでくださいね。
……え、NEWSはどうやって置いたって？ なんか::beforeとcontetでいい感じに……
おわりに
ほぼ全ての技術を託しました
マジです。だいたいマジです。
本当はjQueryについても説明したかったんですけど、投稿予定より5時間ほど遅刻してるので割愛しています。
というか理解が浅くて説明できないし。
今年のハロハナでだいたいやることやって燃え尽きてしまったので、以降はのんびり遊ぶと思うんですけど、
Web遊びは楽しいので多分いるとは思います。変なプロフを見かけたらよろしくね。
あと、プロフまわりで相談があれば気軽に聞くし一緒に考えるから、聞いてね。
あなたのキャラクター表現の助けになれば幸いです！！！！！ありがとうございました！！！！！！！！！
25sec
はなアン、メチャクチャな工数が掛かってるので、もし良かったらおひねりとかくれるとうれしいです。
25氏だけじゃなく、マチヒロドンとかにもよろしく。
