メモ帳とGooglechromeでHTMLが作れるらしい

どうも、シカナミです。

 

今回はメモ帳を使ったHTMLの基本の雛型を作って行こうと思います。

 

少し前に保育系のサイトをサーバーを借りて出していましたが、その時はワードプレスという文字を書くだけで見えるようにしてくれるサービスで作っていました。

なので今回はしっかりコーディング?をしてプログラミングっぽいものを作って行きます。

まず、pcの下の「検索」からメモ帳と検索し開きます。

開いたら、

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>

と入力してください。

メモ帳基本雛型

これで名前を付けて保存を選択して「好きな題名」+.htmlと入力して保存すれば取りあえずは完成です!秒速でHTMLへの一歩を踏み出せました。

 

とは言っても白紙のページが表示されているだけでは面白くないと思いますので、文字の意味をざっくり紹介した後、「おまけ」で文を書いてみましょう。

 

まず、このままでは何がなんだか分かりませんので<文字>の意味を一つずつ紹介します。

 

・基本的なルール

文字の種類は半角英数で書いていきます。

そして<文字></文字>と最初の<文字>の後には文字の前に/(</文字>)が入ります。

 

・文字の意味(宣言、タブ、属性)

①<!DOCTYPE html>

文章の最初に書く宣言でサイト上で読み込むモードの種類を切り替えるスイッチのような役割がありました。しかし、現在は書かなくても動作できるようです。
ただ、正常に標準モードを作動させる為にも書いた方がよいようです。

HTMLの最初はこれ!と覚えておけば良いと思います。(選手宣誓!的な?)

 

 

②<html>

htmlの全体がどこからどこまでか指定するコードです。最後にも</html>と書くことで全体像を指定します。(ライブのセットリストの紙みたいなもんです。)

 

 

③<head>

ページ上に表示しない見えない裏側のこうします!という宣言やこうしてください!というルールを書く場所です。(映画のエンドロールに流れる携わった人一覧みたいな感覚ですかね?)

 

 

④<title>

これはSEO対策で検索の上位表示に関わる部分です。ページののタイトルを検索エンジンに拾ってもらいやすくすのものです。(エンドロールのマーケティングの人の名前みたいな、、、?)

 

 

⑤<meta charset="UTF-8">

文字化けを防ぐための物で、htmlではUTF-8が推奨されているようです。

校閲の人ですね。)

 

 

⑥<body>

ここからがサイト上に表示される文字を書いていきます。また、<head>と連携しており、リンクから別のページに飛んだり、ページ内の移動コマンドも書き込みます。(映画でいう出演者、声優などです。)

 

「おまけ」

文字を書いてみる

文字の段落と字体の変化が出来ます。

・使うコード

<h1>

<h2>

<h3>

<h4>

<h5>

<p>

実際にこのように書くと

文字コード参考

文字コード結果

このような見ためになります。

文字の大きさを変えることで文章を見やすく出来ます。これを試した時にファミチキが食べたかっただけなのでお気になさらずに。

 

:表には出ないメッセージ

最後に表示するときには見えないけれど、コードの文章中にメモ書きやメッセージを書けるコードをご紹介します。

・メモ用コード

<!--文字-->

このコードは他のコードの近くにどんな動きをするコードなのか入れたり、他人との意思疎通を図ることが出来る便利コードです。最後に<!--文字-->を使った参考をご覧ください。

アスキーアート付き文字コード参考

アスキーアートで大量の文字を書きましたが、<!--と-->の間に書いた文字はページ上では表示されません。

 

アスキーアート結果

なので自分だけのHTMLの秘密の暗号や日記、愚痴やギャグなど書いてみてはいかがでしょうか。

 

長くなりましたが今回は以上で学習報告を終わりにします。

 

 

間違えなども多いかもしれません、訂正などございましたらコメントかTwitterまでDM戴けますと幸いです。

 

それでは失礼します。

 

なぜ、しかなみなのか?

どうも、シカナミです。

 

今回は「シカナミ」の由来について書こうと思います。

 

シカナミの由来は私が鹿が好きなのと、私の生まれた西暦1999年に連載の始まった「アニマル横丁」に出てくる「ヤマナミさん」という馬のキャラクターをパクリスペクトして出来ました。

 

私は、奈良が好きでよく旅行で奈良公園に行ったり、母方の実家が山なので馴染み深い生き物でした。

また、鹿のタトゥーには意味があり、

 

・再生

・豊穣

・勝利

・出世

・金運上昇

 

とあり、主に角の生え変わりや根元から広がっていく形からのようです。

 

 

 

 

そして「アニマル横丁」は少女漫画なのですが、当時アニメで見ていました。

 

本当に子供向けか?と思うような昭和ネタやシュールネタがあり、親と笑いながら見ていた記憶があります。

 

出てくるキャラクターは可愛く、三頭身のクマ(ケンタ)、パンダ(イッサ)、ウサギ(イヨ)、が出てきます。どのキャラも個性が強くブラックな性格を隠し持っています。

 

また、話しの途中に全身タイツで馬の顔を持つ「ヤマナミさん」が出てきます。

ヤマナミさんサラブレッドで本名をジャン・トラード・タケオ6世と言います。

闇通販経営や工務店等、様々な役職を持ち、物語に登場します。

この「ヤマナミさん」のうさん臭さと見た目、ボケのセンスが大好きでリスペクトしています。

 

 

私もこの「ヤマナミさん」のように色々なことにチャレンジし、多くの人に面白がってもらえるよう精進して行きます。

 

 

 

思い付きで書いてみましたが、何かを書くというのは楽しいです。

 

駄文でしたがお付き合い頂きありがとうございます。

それでは失礼します。

 

SNSのトプ画作ったよ!

どうも、シカナミです。

 

最初なのでまずは発信力の最初!トプ画の作り方を紹介します。

 

 

良かったら作るイメージとして参考にしてみてください!

www.youtube.co

 

まず、使う物ですが

スマホ

(端末で絵を描くのが得意な方はスマホのみで大丈夫です。)

・紙

・筆記用具

以上です。

 

3つの順序で作って行きます。

 

①ibispaintのインストール

ibispaintをインストールして下さい。

androidの方

play.google.com

iphonのかた

アイビスペイントX

アイビスペイントX

  • ibis inc.
  • グラフィック/デザイン
  • 無料

apps.apple.com

 

②アイコンを描く、または画像を保存

著作権に引っかからないよう、「写真 無料」や「イラスト 無料」で検索し、著作権フリー(パブリックドメイン)の画像を保存します。

 

私はイラストの大まかな絵を紙に描いて写真で撮りました。

イラストラフ画

③ibispaintでアイコンを作る。

まず、ibispaintで「マイギャラリー」「左下の+」「1:1」で開きます。

 

次に右から2番目の□を開き、左下のカメラのマークを押して画像を貼り付けます。

 

画像の貼り付け

水色に縁取りされているレイヤーに書き込むことが出来るのでラフ画に沿って線を引き、消しゴムや戻る(左上←)で修正しながら書いていきます。

レイヤー一覧

線画と色でレイヤーを分けると修正がしやすいです。

 

そして完成したものがこちらです。

シカナミ完成画

 

ご参考までによかったらibispaint使ってみてください!

 

それでは失礼します。

 

 

 

 

 

 

留年大学生が就活回避の為に、3ヶ月で自立するぞ!!

この度ブログを始めました、シカナミと申します。

 

お恥ずかしい話しですが、留年を致しまして、現在大学5年生をさせて頂いております。

 

現在は大学での1単位と自動車教習に通わせて頂き、親のスネどころか太ももまで齧りつく勢いです。

 

そんなダメダメな私ですが、卒業までの3ヶ月!パソコンで生活費を稼いで自立しようと思い立ちました。

(就活したくない、働きたくないでござる、ってことではないです、断じて!)

 

・いめーじまっぷ

1. ブログ開設、発信

2. 生活での支出の計画、計算

3. 生活の改善、

4. 稼ぐ為の学習

5. 実践

6. wedアプリ、モバイルアプリ開発の為の学習。

7. 稼ぐ仕組み爆誕

8. 収入の入り口を増やす。

 

といった感じでやっていこうと思います。

 

また、日常で起こったしょうもないことも書くかもしれませんがあしからず。

 

ということで、このブログでは稼ぐにあたって学習した内容や思いついたことをブログで発信します。

もし自立することが出来たときには、このブログを参考にコンプレックスを克服する人が1人でも現れればなと思います。というか早くこの黒歴史を笑えるようになりたいです。

 

爪の垢ほどでいいので応援の程よろしくお願い致します。煎じて飲みます。

最後までご高覧頂きありがとうございました。