This post written in English and Japanese.

I have not written anything about Markdown in this post.
この記事ではMarkdownについては一切触れていません！

This post is for people who know a bit about HTML. For basic HTML grammar, please refer to someone else's article.
記事のレベルはhtmlちょっと分かるという方に最適です。htmlの基本的な文法については、別の誰かの記事を参考にしてください。

I'm not an engineer. I'm just a hobbyist. I do not know advanced things.
私は技術者ではありません。ただの趣味人です。
高度なことはわかんにゃい。

My English is poor. I want to use another better text in this post. I reached for my bookshelf, and I took the book. I got a good text...."THE OLD MAN AND THE SEA" by Ernest Hemingway!!
私の英語はプアなので、このポストにはもっと良いテキストを使いたいと思いました。使用しているテキストはヘミングウェイの「老人と海」です。

I thought I bought that original book at a secondhand bookstore in Shinjuku long ago, but it seems I was mistaken. The last page of that book had a pink tag attached. It was written 西村文生堂(NishimuraBunseidoh). NishimuraBunseidoh is a secondhand bookstore in Jiyugaoka, not Shinjuku.
原書はずいぶん前に新宿二丁目？三丁目？の古本屋で買ったもの……だと思っていましたが、最後のページには西村文生堂とタグが貼ってあり、西村文生堂は自由が丘にあるみたい……。

_{―・―・―⸎―・―・―}

1 Normal

THE OLD MAN AND THE SEA

He was an old man who fished alone in a skiff in the Gulf Stream and he had gone eighty-four days now without taking a fish.

老人と海

かれは年をとっていた。メキシコ湾流に小舟を浮かべ、ひとりで魚をとって日をおくっていたが、一匹も釣れない日が八十四日もつづいた。

code


<h2>THE OLD MAN AND THE SEA</h2>
<p>He was an old man who fished alone in a skiff 
in the Gulf Stream and he had gone eighty-four days now 
without taking a fish.</p>


<h2>老人と海</h2>
<p>かれは年をとっていた。メキシコ湾流に小舟を浮かべ、
ひとりで魚をとって日をおくっていたが、一匹も釣れない日が
八十四日もつづいた。</p>

When you write HTML code in steemit, please do this.

steemitでHTMLコードを書くときはhtmlタグで囲うみたい。

2 Break a subheading
^{小見出しを改行する}

THE
OLD MAN
AND
THE SEA

He was an old man who fished alone in a skiff in the Gulf Stream and he had gone eighty-four days now without taking a fish.

老人
と海

かれは年をとっていた。メキシコ湾流に小舟を浮かべ、ひとりで魚をとって日をおくっていたが、一匹も釣れない日が八十四日もつづいた。

code


<h1>THE<br>OLD MAN<br>AND<br>THE SEA</h1>
<p>He was an old man who fished alone in a skiff 
in the Gulf Stream and he had gone eighty-four days now 
without taking a fish.</p>


<h1>老人<br>と海</h1>
<p>かれは年をとっていた。メキシコ湾流に小舟を浮かべ、
ひとりで魚をとって日をおくっていたが、一匹も釣れない日が
八十四日もつづいた。</p>

3 Center a subheading
^{小見出しを中央寄せにする}

THE OLD MAN AND THE SEA

He was an old man who fished alone in a skiff in the Gulf Stream and he had gone eighty-four days now without taking a fish.

老人と海

かれは年をとっていた。メキシコ湾流に小舟を浮かべ、ひとりで魚をとって日をおくっていたが、一匹も釣れない日が八十四日もつづいた。

code

Use div.text-center. Class does not work except <div>
div.text-centerで指定できます。クラスはdivにつけないと動きません。


<div class="text-center">
  <h2>THE OLD MAN AND THE SEA</h2>
</div>
<p></p>
<p>He was an old man who fished alone in a skiff 
in the Gulf Stream and he had gone eighty-four days now 
without taking a fish.</p>


<div class="text-center">
  <h2>老人と海</h2>
</div>
<p></p>
<p>かれは年をとっていた。メキシコ湾流に小舟を浮かべ、
ひとりで魚をとって日をおくっていたが、
一匹も釣れない日が八十四日もつづいた。</p>

I wanted to have more blank space between title and body, so I put an empty p tag. Please remove it if you get in the way.
タイトルと本文の間にもっと余白を取りたかったので、空のpタグを入れています。邪魔だったら取り除いてください。

4 Use <b> instead of <h1~6>
^{<h1~6>のかわりに<b>}

THE OLD MAN AND THE SEA

He was an old man who fished alone in a skiff in the Gulf Stream and he had gone eighty-four days now without taking a fish.

老人と海

かれは年をとっていた。メキシコ湾流に小舟を浮かべ、ひとりで魚をとって日をおくっていたが、一匹も釣れない日が八十四日もつづいた。

code


<div class="text-center">
  <b>THE OLD MAN AND THE SEA</b>
</div>
<p></p>
<p>He was an old man who fished alone in a skiff in the Gulf Stream and he had gone eighty-four days now without taking a fish.</p>


<div class="text-center">
  <b>老人と海</b>
</div>
<p></p>
<p>かれは年をとっていた。メキシコ湾流に小舟を浮かべ、ひとりで魚をとって日をおくっていたが、一匹も釣れない日が八十四日もつづいた。</p>

5 Justify the text
^{本文を整える}

Use class attributes

He was an old man who fished alone in a skiff in the Gulf Stream and he had gone eighty-four days now without taking a fish. In the first forty days a boy had been with him. But after forty days without a fish the boy’s parents had told him that the old man was now definitely and finally salao, which is the worst form of unlucky, and the boy had gone at their orders in another boat which caught three good fish the first week.

none

text-justifyクラスを使う

かれは年をとっていた。メキシコ湾流に小舟を浮かべ、ひとりで魚をとって日をおくっていたが、一匹も釣れない日が八十四日もつづいた。はじめの四十日はひとりの少年がついていた。しかし一匹も釣れない日が四十日もつづくと、少年の両親は、もう老人がすっかりサラオになってしまったのだといった。サラオとはスペイン語で最悪の事態を意味することばだ。少年は両親のいいつけにしたがい、べつの舟に乗りこんで漁に出かけ、最初の一週間で、みごとな魚を三匹も釣りあげた。

使わない

code

div.text-justify


<div class="text-justify">
  <p>He was an old man who fished alone in a skiff 
  in the Gulf Stream and he had gone eighty-four days now 
  without taking a fish. In the first forty days a boy 
  had been with him. But after forty days without a fish 
  the boy’s parents had told him that the old man was now 
  definitely and finally <i>salao</i>, which 
  is the worst form of unlucky, and the boy had gone at 
  their orders in another boat which caught three good fish 
  the first week.</p>
</div>


<div class="text-justify">
  <p>かれは年をとっていた。メキシコ湾流に小舟を浮かべ、
  ひとりで魚をとって日をおくっていたが、一匹も釣れない日が
  八十四日もつづいた。はじめの四十日はひとりの少年がついていた。
  しかし一匹も釣れない日が四十日もつづくと、少年の両親は、
  もう老人がすっかりサラオになってしまったのだといった。
  サラオとはスペイン語で最悪の事態を意味することばだ。少年は両親の
  いいつけにしたがい、べつの舟に乗りこんで漁に出かけ、最初の一週間で、
  みごとな魚を三匹も釣りあげた。</p>
</div>

6 Like a book
^本みたく

THE OLD MAN AND THE SEA

E was an old man who fished alone in a skiff in the Gulf Stream and he had gone eighty-four days now without taking a fish. In the first forty days a boy had been with him. But after forty days without a fish the boy’s parents had told him that the old man was now definitely and finally salao, which is the worst form of unlucky, and the boy had gone at their orders in another boat which caught three good fish the first week.

老人と海

Aれは年をとっていた。メキシコ湾流に小舟を浮かべ、ひとりで魚をとって日をおくっていたが、一匹も釣れない日が八十四日もつづいた。はじめの四十日はひとりの少年がついていた。しかし一匹も釣れない日が四十日もつづくと、少年の両親は、もう老人がすっかりサラオになってしまったのだといった。サラオとはスペイン語で最悪の事態を意味することばだ。少年は両親のいいつけにしたがい、べつの舟に乗りこんで漁に出かけ、最初の一週間で、みごとな魚を三匹も釣りあげた。

code

Use image and float.
画像とフロートを使います。


<div class="text-center">
  <b>THE OLD MAN AND THE SEA</b>
</div>
<p></p>
<div class="pull-left">
  <img>
</div>
<div class="text-justify">
  <p>E was an old man who fished alone in a skiff 
  in the Gulf Stream and he had gone eighty-four days now 
  without taking a fish. In the first forty days a boy 
  had been with him. But after forty days without a fish 
  the boy’s parents had told him that the old man was now 
  definitely and finally <i>salao</i>, which 
  is the worst form of unlucky, and the boy had gone at 
  their orders in another boat which caught three good 
  fish the first week.</p>
</div>


<div class="text-center">
  <b>老人と海</b>
</div>
<p></p>
<div class="pull-left">
  <img>
</div>
<div class="text-justify">
  <p>Aれは年をとっていた。メキシコ湾流に小舟を浮かべ、
  ひとりで魚をとって日をおくっていたが、一匹も釣れない日が
  八十四日もつづいた。はじめの四十日はひとりの少年がついていた。
  しかし一匹も釣れない日が四十日もつづくと、少年の両親は、
  もう老人がすっかりサラオになってしまったのだといった。
  サラオとはスペイン語で最悪の事態を意味することばだ。少年は
  両親のいいつけにしたがい、べつの舟に乗りこんで漁に出かけ、
  最初の一週間で、みごとな魚を三匹も釣りあげた。</p>
</div>

The font name used in the image is "Magical Unicorn Light". Arthur Reinders Folmer_website made this font. I found it at https://www.dafont.com. Nice font!

画像のフォントはMagical Unicorn Lightです。Arthur Reinders Folmer_websiteさんのフォントです。https://www.dafont.comで見つけました。素敵なフォント！

addition: <table>
おまけ：tableタグ

This way is very easy⯎ Prepare the <table>, insert three <td> in the <tr>, put as many   as you want in the <td> on the left and right (up and down on the HTML code), and some text into the middle <td>. But...as you may know....it is taboo to use table tags for layout. If you want to know why, please search. In the first place, the <table> is for writing a table. So using it for layout is a wrong.

こんな風になります。trタグの中に3つのtdタグを入れて、左右（コード上では上下）の要素に空白文字を好みの数入れて、真ん中のtdタグにテキストをブチ込むだけです。とっても簡単ですね☆　しかし……ご存知の方もいると思いますが……テーブルタグをレイアウトに使うのは禁忌とされています。詳しく知りたい方はテーブルレイアウトで検索してみてください。そもそもテーブルタグは表を書くために用意されたタグです。レイアウトに使うなんて邪道も良いところです。

code


<div>
<table>
  <tr>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td>
      <p>
        This way is very easy⯎ Prepare the <table>, insert three 
        <td> in the <tr>, put as many &nbsp; as you want in 
        the <td> on the left and right (up and down on the HTML code), 
        and some text into the middle <td>. But...as you may know....it is taboo to use table tags for layout. If you want to know why, 
        please search. In the first place, the <table> is for writing 
        a table. So using it for layout is a wrong. 
      </p>
      <p>
        trタグの中に3つのtdタグを入れて、左右（コード上では上下）の要素に&nbsp;を好みの数入れて、
        真ん中のtdタグにテキストをブチ込むとこんな風になります。とっても簡単ですね☆　
        しかし……ご存知の方もいると思いますが……テーブルタグをレイアウトに使うのは禁忌
        とされています。詳しく知りたい方はテーブルレイアウトで検索してみてください。
        そもそもテーブルタグは表を書くために用意されたタグです。
      </p>
    </td>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
  </tr>
</table>
</div>

END

Sort:

Trending

[-]

yo-yo (61) 6 years ago (edited)

@kugarenさん、初めまして。よよと言います。upvoteを何度か戴いていたのになかなかこれなくて失礼しました。私はHTMLコードの知識があまりないんで参考にさせていただきます！　ところで、もし良かったらですが,タグに #jp-newbie を追加していただくと、 @steemit-jpさんから当分の間、upvoteなどのサポートを頂けますのでお勧めですよ。英語も書かれている場合は多めにいただける可能性も大です😆。それからもうこれだけの記事を書かれていますので失礼かも知れませんが、もし宜しければ新しい方向けに書いた文がこちらにありますので、お暇な時にでも見ていただければと思います。他の方の記事へのリンクもあります＾＾
ではでは、次の記事も楽しみにしています＾＾

$0.00

kugaren (42) 6 years ago (edited)

よよさん、はじめまして。くがれんです。コメントありがとうございます。steemitはまだわからないことばかりなので、情報嬉しいです！これからよろしくおねがいします。

yo-yo (61) 6 years ago

わぁ、素敵♡　いえいえ、多分そのうち慣れると思いますよ＾＾*
また何かあったらいつでもコメント入れてください😉

rocketsteem (0)(1) 6 years ago

Reveal Comment

kugaren (42) 6 years ago

Hi, I shot it with my phone😁

Design your steemit posts with HTML

This post written in English and Japanese.

1 Normal

THE OLD MAN AND THE SEA

老人と海

code

2 Break a subheading 小見出しを改行する

THEOLD MANANDTHE SEA

老人と海

code

3 Center a subheading 小見出しを中央寄せにする

THE OLD MAN AND THE SEA

老人と海

code

4 Use <b> instead of <h1~6> <h1~6>のかわりに<b>

code

5 Justify the text 本文を整える

Use class attributes

none

text-justifyクラスを使う

使わない

code

6 Like a book 本みたく

code

addition: <table> おまけ：tableタグ

code

2 Break a subheading
^{小見出しを改行する}

THE
OLD MAN
AND
THE SEA

老人
と海

3 Center a subheading
^{小見出しを中央寄せにする}

4 Use <b> instead of <h1~6>
^{<h1~6>のかわりに<b>}

5 Justify the text
^{本文を整える}

6 Like a book
^本みたく

addition: <table>
おまけ：tableタグ