htmlとCSSについて【記事をほかの人と差別化したい人必見】

| 2022/03/31 13:51:29 | 606 | cat:IT・機械 |

htmlとCSSについて。

htmlとCSSを駆使すると下のようなものも作れます。

from functools import reduce
from random import randint

x = [randint(35, 70) for i in range(20)]

try:
    print(reduce(lambda a, b:a + b, x, 0) / len(x))
    print(x)
except ZeroDivisionError:
    print("データの指定なし")

#Comment
#Pythonのコードです。
#これではランダムな整数値(35~70)を20個出し、それの平均を求めるというプログラムです。

htmlとは

html(Hyper Text Markup Language)とはWebサイトを作る際の大まかな言語で、
リンク付きのテキストを貼ったりなどすることができる。ただし、
文字の位置などを確定するなどといった詳細な設定は別の言語を用いる必要がある。
そこで出てくるのがCSSだ！

CSSとは

CSS(Cascading Style Sheets)とは、Webサイトをデザインする際に使用される言語。
Webサイトをデザインしようと思ったら必須の言語なためWebサイトを作りたかったり、
Zarcで文だけの記事を作りたくない人はhtmlと一緒に必ず覚えよう！

大まかな構文

html

htmlは「タグ」で記述します。タグとは<style>のようなものの事を差します。
htmlは基本、タグとタグにバックスラッシュを先頭に付け足したもので構成されます
また、一般的に表示させたい文字はタグと/を付けたしたタグの間に書きます。
タグには引数という物も存在します。引数を記述した例:<a href="https://blog.zpw.jp/">
引数はタグ内に半角スペースを入れ、引数名を指定し値を設定するとできます。
<>内に何か書かれてるものは全てタグと言います。
実際のhtmlでは<!DOCTYPE html>というのから始まりますが、
このZarcではそんなすぐ忘れそうな物を記述する必要はありません！
もしWebサイトとか作りたい人は各自で調べてね！

見出し系

タグにh1~h6を記述。数字が大きくなるほど文字の大きさが小さくなります。

本文

タグにpを記述。

ソースコードの表示

※最初に出したやつを作るにはかなり複雑な構文を記述する必要があります。
※最後にhtmlファイルをアップロードしてますので
　気になる人はダウンロードしてみてください。
タグ内にpreを記述し、そのpreタグと/preタグの間にcodeタグを記述します。

リンク

aタグに引数、hrefを設定します。この引数には飛ばしたいリンク(URL)を記入してください。

画像

imgタグで可能です。imgタグにはsrc引数が存在し、
src引数には表示させたい画像のURLまたはパスを指定してください。
またこれは特殊で、/がついたタグで閉じる必要はありません。

改行

にて可能です。これもタグを閉じる必要はありません。

まだまだありますが、挙げてったらきりがないのであとは各自で調べてください。

CSS

これはもう覚えるしかない。
基本的にはcssファイルに記述しますが
htmlのstyleタグに記述することも可能です。
ファイルに記述した場合はlinkタグで読み込む必要があります。(詳細なことは割愛)

基本このような形で記述します。

タグ名(記載なしで全て).デザインの名前{
    デザイン設定: 値;
    ...
}

文字の色

設定名:color　値の種類:色コード、rgb(<Red, Green, Blue>)

背景色

設定名:background-color　値の種類:色コード、rgb(<Red, Green, Blue>)

残念ながらこれに関しては自分も知らないのが多いです...　そのためあとは各自で調べてください。

CSSのデザインの読み込み方法

htmlのタグの引数にclassという物が存在します(すべてにある)
このclass引数に先ほどのデザイン名を記述すれば適用されます。

感想

htmlは非常にめんどくさく、大変です。
また、文字を動かしたりしようと思うとJava_script_という物を覚えなければならないので、
Web開発は諦めた方がいいですが、少なくともZarcには使えるとは思います。
ちなみに自分の作ってる記事は全てhtml形式で書かれています。
あと、余談ですがZSHAREのWebページはphpという言語が使われています。
ちなみに最初のコードに既視感を感じた人もいるかもしれませんが
コードの色などはVSCodeを意識して作っています。
あとなんかバグり散らかしてますがhtmlにコピペしたら正常に動作しますのでご安心ください(?)
追記
最近ゼロさんの行動次第でこのコード使えなくなる。あと。上記のバグは訂正した()でもDLの方は未訂正()
ゼロさんのコードの色付け対策もそうなったら解析して対策しますができないかも...
というのもですね。phpを使用しているのでコードを見ることができないんですよね。(セキュリティは〇だけど)
なのでもしも乱数にてstyleタグを作成されてしまうと対策しようがないんですよね。ゼロさんstyle未設定可能コードとか作ってくれ(name引数とかでできるだろ(( )
まあ。DLのやつはZarcでは非推奨。ていうか旧データなので別の場所でもバグりそうだから全面非推奨ってことで()
追記時間：JST 2022/05/08

ついき2ー
バグってますね。治す気は全くありません。
追記時間：JST 2022/05/24 18:56

最初のソースコードのhtmlファイル(bodyタグの間にある物とStyleタグをコピーすればZarcでも表示されます。)

index.html (2KB)

最初のソースコードで使用したcssファイル(このcssを使った記事の作成を許可いたします。)

code.css (1KB)