些末巻

さまつまき スマホで見るとレイアウト終わるのでできればPCで読んでください

超実践 フタハナで学ぶWeb制作初歩

- はじめに -

この記事は、定期ゲ・鶏 Advent Calendar 2019 16日目の記事です。

 

f:id:shapa:20191211100153p:plain

日付も間違える始末

アンケートによってフタハナの記事を書くことになりました。25氏です。
諸挨拶などは25日にやるので、今回は前哨戦という感じで様々を省略しお送りします。

 

初歩的かつ分かりにくい内容とフランクな物言いが多分に含まれるので、苦しくなったらフタハナ運営やりす氏の記事へゴーしてくださいね。

 

それではやってきます。

  

 


 

 

 

- 綺麗なプロフィールが書きたい? -

いやァ~~~~改めまして、ハロウィンフタハナはお疲れさまでした。
個人的にはラルチェちゃんタラハシさんのプロフィールは良かったですね。

特にタラハシさんのプロフィールは圧巻で……そういう話ではない?
いいんだよ!これで!!そういう記事だろ!!!

 

さて、「俺もこんなプロフィール書きてえよォ~~~!」と思った方はいますでしょうか。
今回はそういう人向けの記事となります。

 

ただし……

  • 素人の技術によるものであること
  • あくまで初歩の初歩にしか触れないこと
  • 林檎社製品とその環境には一切触れないこと
  • 2019年12月現在におけるHTML5とCSS3を基盤としたもの
  • W3C勧告の定める記述には沿わない可能性があること
  • フタハナ側が今後プロフィールHTMLのサポートしなくなる可能性があること

これらにご注意くださいね。

 

 

- さっそくやってみよう 前準備編 -

いや急に教えてもいいんだけどさ、今フタハナのプロフィール編集できねえじゃん?
なので、代わりにHTMLを書くための色々を用意していきます。

 

~用意するもの~

用意しましたか? 何がなんだか分からない? 確かに。
じゃあ一つずつ説明していくので、一緒に用意していきましょう。

 

 

Webコーディング(というかコーディング全般)は根気との勝負です。
絶対に完成させる、完成品でドヤ顔をする、お前を倒すなど、確固たる意思を持ってプレイしましょう。

それはそれとしてCTRL+S(保存)F5(ページ更新)のショートカットを覚えておくと捗ります。

 

  • プロフィールを書くための設定

ないと書けないので……
設定はあればあるほどいいですが、ページレイアウトの兼ね合いもあるので文章化は適度にしておきましょう。

適度って何文字?知るか!!

 

  • サイトデザインのコンセプト

同上です。描きたい構図やキャラなくして絵は描けないじゃないですか。それと同じ。

思いつかない?確かに。 そういう時はキャラリストデザインの集積所とかを参考にするといいと言われています。

ぼんやり定まったらペイントソフトでラフを描いておくと見える化できていい感じですね。やりましょう。

 

  • 自力で調べる行動力と好奇心

この記事では最低限のことしか説明しないです。

なので、分からないことがあったらガンガンGoogle先生に頼ってください。
先駆者みたいな人たちが技術系ブログを建てていっぱい説明しているので……

いまはいい時代なので『画像を横からスッとする CSSとかで検索しても欲しい情報が出ます。
いい時代ですね。活用していきましょう。

 

これがない状態でこの記事を見ているなんてことは多分ないので、あるはずです。

とはいえ、大体のWebサイトはChromeFirefoxで動作テストをしてるので、そのどちらかがあるとよいです。

Internet Explorerとか使ってる人は……さすがにいないよね?

 

さて、一番むずかしい部分です。
メモ帳でHTMLを書く時代は終わりました。ちゃんとしたエディタを導入しましょう。

とはいえドリサブライムAtomがオススメだよォ~~~と言っても伝わらないし入れるのは大変です。
いやメッチャ便利なので本当はこの辺を入れてほしい所なんですけど。調べてみてね。

 

オススメはサクラエディタNotepad++TeraPadあたりでしょうか。
この辺りはコーディングにも使えてSSや日記を書くにも使えますからね。入れて損はないです。

あ、導入諸々は自分で調べてくださいね。 『HTML (エディタ名)』で調べればけっこう出ますので。

 

  • いいキーボード

キーボードをいっぱい叩くので、いいキーボードだとモチベが上がります。
家電量販店などで展示してあるのを見たりして、好きな打鍵音や押し心地で決めましょう。

25氏は これとかこれを使っています。参考までに。

 

 

ということで一通り説明しました。
以降はしたという体で話を進めるので、完璧だな!と思ったら読み進めてください。

 

準備できましたか?

準備ができたなら、テキストエディタから新規作成をして、文字でも入れてみて、html形式で保存して、
そうして保存したものをブラウザで開けば――

 

f:id:shapa:20191213162626p:plain

 

――コーディングが始まります。 ようこそこちら側の世界へ。

 

 

- さっそくやってみよう HTML編 -

興奮さめやらぬうちに座学に戻ります。

 

メッセとかで使う装飾タグってあるじゃん

装飾タグってあるじゃん。<B3></B3>とか<BR>とか、+次+とか、+大+ -大-とか。

フタハナにはないですね。あれれ……

 

でも大丈夫。シャウトやメッセにはないですが、プロフィールなら実装できます。
そう、HTMLタグを使うことでな!!!!!

で、そのHTMLってなんだ!? って話ですが、こういうやつです。

<div id="main_text">
    <link href="futa.css" rel="stylesheet" type="text/css">
<
section class="plof"> <div> <p>飢えた少女が1人いた</p> <p>少女は全てに食らいつき、その須くを貪っていた</p> <p>そんな最中のひとつの転機。小さな孤島の大きな出逢い</p><br> <p>「トモダチはおいしくないよ。トモダチは色々なものを与えてくれるのだから」</p><br> <p>そんな出会いからほんのすこしが経ち</p> <p>悪食の少女は味を覚えて</p> <p>暴食の少女は心を覚えて</p><br> <p>"まずい"を知るため、今日も駆けては何かを齧るのであった</p> </div> </section> </div>

情報量が多くて、すみません。 リャボーグのプロフ……の簡易版です。
実際のソースはもっとゴリ押しが多いです。

 

HTMLもといWebサイトの裏側は大抵この<タグ></タグ>の集合体で構成されています。

<div></div>は中に要素を入れる時のタグ

<p></p>は中に文字を入れる時のタグ

他にも水平線を引く時は<hr>を使ったりもしますね。

<section></section>は……まあdivみたいなものなので気にしないでください

 

<p>ことpタグには親戚が多くて、太字にする<b>斜体にする<i>などがあります。
くわしくはリファレンスがあるので読んでみてくださいね。

 

……え、さっきのはろわはpタグに入ってなかったけど普通に表示できてたじゃないか?
確かに!そこに気付くとはオメガ高い。観察力最強。えらいポイント20pt

そう、タグで囲むことで……属性を付与することができるのだ!!!!

 

属性を覚えて戦闘を有利に進めよう

属性ってなんぞや?火水木光闇か?ちがいます。

<section class="plof"></section>

こんな書式がさっきのソースの上の方にあったはずです。
このclass="plof"こそが、属性なんですね~~。

赤いので多分火属性かもしれないです。

 

属性は、HTMLタグに補足情報を付与したい時に使われます。
class属性はこのsectionタグにplofというクラスを与えることができます。

クラスを与えると……なんと、CSSで指定して改造することが可能になるのだ!
……が、今は説明を割愛します。

 

話を戻して、例えばpタグであれば、

<p style="color: #FF0000;">赤色</p>

と、入力することでstyle属性を付与することができます。エンチャントですね。

この火属性めいて赤い部分が属性値で、ここに入れた内容によって強化の内容が異なります。

今回は"color:#FF0000;"と書いてありますが、これは『文字色:赤』という意味です。

 

style属性は大変優秀なことに自由度が凄く高くて……超強いです。
話し始めると文字数が終わるので、リファレンスを紹介しておきます。参考までに。


リファレンスの文字色フォントを把握して、style属性と合わせて活用できたら……もう完璧です。
あとは完成したテキストを全てフタハナのプロフィール設定に貼り付ければOK!
おっと、<br>ではない改行も改行として認識されるから添付する前に改行を全て削っておこうな!


ということで以上となります。ありがとうございました。

 

 

- 更に高度なことがしたいあなたに -

ええっ!?style属性で沢山属性を指定するのは大変だから勘弁して欲しいだって!?

もっとラクな方法が欲しいだって!?

 

しょうがないな~~テッテテ~~CSS~~~~

 

カスケーディングスタイルシートのひみつ

CSSはカスケーディングスタイルシートって略称なんですね~。
こういうやつです。

.plof{
    margin: 20px 0;
    text-align: center;
    animation: fadeIn 2s ease-in 0s 1 normal;
}

これは!さっき見かけたplofじゃあないか!
そして、なんだかよくわからないが属性名(プロパティ): 属性値;と表記が一致しているぞ?!

 

そう、style属性でやっていたあらゆることは、CSSによって指定ができるのだ!

ちなみにここには
『上下に20pxの余白』『文字を中央揃えに』『2秒かけてフェードイン』というオプションが付いているぞ。
全部リファレンスに載っています。確認してみてね。

 

さっそくやってみよう CSS

やってくぜ!
ファイルの作成とcss形式で保存はhtmlの時と同じ。

そうしたら今度は紐付け。これが難しい。

 

またまた一番上にあるソースから持ってきました。

<link href="futa.css" rel="stylesheet" type="text/css">

linkタグhref属性rel属性type属性がついているね~。

href属性は同じフォルダのfuta.cssと紐付けるよという意味。
relは属性はスタイルシートと紐付けるよという意味。
type属性はcssの書いてあるテキストと紐付けるよという意味。

いっこいっこ大事だから覚えておいてね。 まあいじるのはhrefだけなんですけど。

 

……今、「同じフォルダってどこにアップロードすんじゃいボケェ」って思いましたね?
そう、フタハナのプロフィールにフォルダなんて概念はありません。かなしいね~

 

これを解決するには2つの方法があります。
ひとつは自前のアップローダーにアップロードする方法。
ドロップボックスとかでもいけるっぽい。ディスコードは……キツいかも

アップロードができたらhrefの""の中にURLを入れれば適用することができます。

 

もう一つは、<style></style>ことstyleタグにcssを入れる方法。
こちらならアップローダーなしにできますが、後ほど改行を削る必要があります。
ただし、linkタグなしでできるので余計な手間は省けるかも。

<style>
.plof{
    margin: 20px 0;
    text-align: center;
    animation: fadeIn 2s ease-in 0s 1 normal;
}
</style>

こんな感じ。

どっちを選ぶかは……好み! 25氏は上の通りアップロードする派です。
全体の記述が長くなっちゃうんだもん。

 

それで、記述のしかたはって? style属性の設定とほとんど同じです。

.plof{~~}のように、頭にセレクタという対象指定をつけて括弧で囲むと設定できるんですねえ~。

例えば、.plofは『plof』というクラスが付いているタグを指定する時に使うセレクタです。
……そう、お気付きになられましたでしょうか。

属性は、HTMLタグに補足情報を付与したい時に使われます。
class属性はこのsectionタグにplofというクラスを与えることができます。

クラスを与えると……なんと、CSSで指定して改造することが可能になるのだ!

ということです。結局属性入れないといけねえじゃねえか! すみません。
くわしいことはこのへんとかこのへんを参考にするといい感じです。

 

 

そうしてワチャワチャしたりしなかったり、文字を入れたりすると~~~!?

 

f:id:shapa:20191214064904p:plain

 

こうなるわけです。 ね、簡単でしょう?

皆さんもかっこいいプロフィールで自分のPCを彩りましょうね。
せっかくフタハナでしかできない機能なので。

 

 

- おわりに -

フタハナ運営がこういうガイドを書くべきじゃないですか?
ルールブックとかに書くといいと思います。

あとヘッダーメニューのお花装飾おしゃれだけど当たり判定が邪魔なのでどうにかしてくれると助かります。

 

 

 25sec

 

 

 

以下質疑応答

Q1.<html>とか<head>とか、どこへやった?

A2.君のような勘のいいガキは嫌いだよ

フタハナのプロフ書くのに使わねえもん

ちゃんとWeb制作やりたい人はそういうのも含めて調べた方がいいです。
頼むぜ。

 

Q2.Profileだからprofじゃないの?

A2.たしかに(スペルミスです) (このまま通します)

当時の25氏はProfileのことをPlofileだと思っていたっぽい

f:id:shapa:20191216075126p:plain

 

Q3.どうやってプロフ消したの これどうやったの他
Q3.調べてくれ。

ソース見たら.horizontal_boxっていうプロフの上部分囲ってるやつをdisplay:noneで消してました。
ゴリ押しか?

 

Q4.25日大丈夫そうすか?
Q4.がんばります。
がんばります。