私にもできた! ゼロからはじめるブログ

広告
双葉 ブログの勉強
広告

わからない言葉だらけ。でも、人には聞きたくない。

Tracyです。

「ブログってはやってるけど、どんなんだろう?」
この興味がきっかけでブログをはじめました。1か月前のことです。

インターネットで親切なブロガーさんたちの記事を見たら、「誰でもかんたんにできます」とか「中学生にもわかる」とか書いてあったので勢いでワードプレス(※1)を契約して、セットアップまでは動画を見ながら確かに簡単にできました。時間にして1時間ちょっとです。

でもね、いざ書こうとした時、どこに書くの? キミ(ワードプレス)は何を求めているの? その言葉の意味ってなに? という壁が次から次と現れました。なので、またもやブログやYouTubeを見て勉強。

※1 ワードプレス WordPress
この注釈を見て笑っているみなさん、この記事から得られるものは
ないと思いますので、もう退場してください(笑)
私はこれが何か知りませんでした。
ワードプレスはブログをつくるお道具なんです。
この注釈を見て「ほう!」と思った方、ここから先を読み進めていただくと ブログとは? が少し見えてくると思います。
それでは はじめます。

【ドメインに迷ったらこちらがおすすめです】

HTMLってなに?

HTMLとは Hyper Text Markup Language の略です。  
 Webブラウザに文字を表示させるための言語で、その文字がどのように書かれているかを伝えるのが仕事です。文字の情報を伝えるために HTMLファイル を使います。

HTMLファイルとは
 ①「ここから」「ここまで」という案内をします。
 ②「ここに○○がある」という案内をします。

HTMLファイルを作るルール
 ①HTMLで書きます。
 ②ファイル名の最後に「.html」をつけます。
 ③テキストエディタで書きます。

HTMLの書き方 「タグ」

HTMLは 「タグ」 を使って書きます。
タグは <  > の中に半角英数字で書きます。

HTMLに必要なタグ
 ①doctype HTMLファイルがどのようなHTMLで書かれているかを表します。
 ②html タグ <  > の内側がHTMLの情報であることを表します。
 ③head HTMLを解釈するために必要な情報が書かれています。
 ④body HTMLファイルの文書の内容を表します。

HTMLによく使われるタグ
 ①meta 文書の情報を表します。
 ②title 文書のタイトルを表します。
 ③div 文書のグループを表します。
 ④span 文章の一部を表します。

タグ

見出し  

見出し heading
<h1>(一番大きいもの)~</h6> (小さいもの)で表します。

6階層に分かれる
h1
h2
h3
h4
h5
h6

段落

段落 paragraph
<p>~</p> で表します。
<p>から</p>までの間を段落といいます。

見出し、段落のイメージ

lorem ipsum ロレム・イプサム

ロレム・イプサムはラテン語由来のまったく意味をなしていない文章の羅列です。それは文章の中身(意味)を気にすることなくデザインに集中するために1960年代ごろに考えられた文のテンプレートです。定義と代表的なテキストをウィキペディアより抜粋します。

lorem ipsum (ロレム・イプサム、略してリプサムlipsumともいう)とは、出版、ウェブデザイン、グラフィックデザインなどの諸分野において使用されている典型的なダミーテキスト。
[中略]
「lorem ipsum」は様々なバリエーションがあるが、もっとも一般的なテキストは以下の通りである。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

(ウィキペディアより)

ロレムイプサム

文書でよく見る「あれら」はこうして作られている

「あれら」には名前があった

em  斜体で表示します。 ⇒ 強調を表します。

strong  太文字で表示します。 ⇒ 強調を表す ⇒ 重要性を表します。

hr 文章の区切りを表示します。 ⇒ 強調を表します。(単独で使います。「ここからここまで」のスタイルではありません。)⇒ 区切り

blockquote  まとめて引用します。 ⇒ 強調を表します。 ⇒ 引用

  一部を引用します。 ⇒ 強調を表します。 ⇒ 引用

cite属性 引用元を表記します。 ⇒ 強調を表します。 ⇒ 引用

cite=”URL” 引用元を表記します。 ⇒ 強調を表します。⇒ 引用

abbr ⇒ 略語

title属性 ⇒ 略語の元を伝えます。

cite ⇒ 名前を特記します。 ⇒ 強調を表します。

address ⇒ 住所などの表現

「あれら」はこんな命令をうけている

code ⇒ コード

br ⇒ 改行

ore  一段下がって小さい文字で表記します。 ⇒ プリフォーマット

ol   ordered list 順番の関わるリストを表します。 ⇒ リスト

ul unordered list 順番の関わらないリストを表します。 ⇒ リスト

li   リストの項目を表します。 ⇒ リスト

dl   情報がセットになったリスト全体を示します。(質問・答えなど)⇒ セットリスト

dt   情報の項目名を表します。 ⇒ セットリスト

dd   情報の内容を表します。 ⇒ セットリスト

プログラミング

「あれら」はこんな技を持っている

アンカータグ
(アンカー=錨)
リンクのとび先を指定します。

herf属性
リンクのとび先を指定するための属性です。

id属性
ページの中にある特定の部分の名前をつけます。

path パス
(path=道・道のり)

 相対パス
  今いる場所を基準にして相手がどこにいるのか伝えます。
   今いる場所にある他のファイル:ファイル名
   今いる場所の「フォルダ」:フォルダ名/ファイル名
   今いる場所の1階層上にあるファイル:../ファイル名
    1階層上:../ファイル名
    2階層上:../../ファイル名


 絶対パス
  相手がどこにいるのかを確実に伝えます。⇒ URL

プログラミング

「あれら」には仲間がいる

画像

img  画像を貼り付けるタグ
 単独で使います。「ここからここまで」のスタイルではありません。

alt属性 画像がどのようなものかを伝えます。
読み上げブラウザでは画像の代わりに読み上げられる文章です。
googleも読みますので入力したほうがいいです。

title属性 画像のタイトルを伝えます。
画像の上でマウスカーソルをしばらく置いておくと表示されます。

ファイル

link タグ スタイルシートを読み込むときに使ういます。

favorite + icon Faviconを読み込むときに使います。
 
sctiptタグ JavaScriptを読み込むとき、書くときに使います。

iframeタグ (iframe=インラインフレーム)特定のファイルをページの一部に標示させます。(利用規約などのページをスクロールして読むときに使われます。)
 src属性 ⇒ 表示させるファイルの場所を指定します。
 width属性 ⇒ インラインフレームの幅を指定します。
 height属性 ⇒ インラインフレームの高さを指定します。

タグの仲間

コメント

コメント
プログラミングなどで、読み返すときに内容をわかりやすくするための、
プログラムではない表記です。コメント部分は実行・反映されません。

コメントアウト
プログラムの一部をコメントアウトすることによって、その動作をスキップさせることができます。

htmlにおけるコメントの書き方
<!–ここにコメントを書きます–>

テキスト

行とセル

 ⇒ 横一列の一つのデータのかたまり
  trタグ

セル ⇒ 一つ一つのマスのデータのこと
  tdタグ
  thタグ

ヘッダー・フッターボディ

表のヘッダー
  thead

表のフッター
  tfoot

表のボディ
  tbody

コメント
    

テキスト入力

テキスト入力
  一行タイプ  (テキストボックス)
  inputタグ/ type=”text”

パスワードタイプ  (入力した文字が・・・・に変わります)
  inputタグ/ type=”password”

複数行入力できるタイプ (テキストボックスの複数行タイプ)
  textarea

選択式入力のタイプ
  ラジオボタン ⇒ ドロップダウンメニューでひとつだけ選択できます。
    inputタグ/ type=”radio”
    name属性が同じものの中でひとつだけ選択できます。
    value属性で送信する値を指定します。
  チェックボックス ⇒ 複数選択が可能です。
    inputタグ/ type=”checkbox”
    name属性が同じものがひとまとまりのデータとして扱われるます。
    value属性で送信する値を指定します。

フォームのグルーピング
  fieldset 複数の入力欄をまとめます。

  legend fieldsetでまとめた項目の説明を書きます。

  label 入力欄のラベルとして利用します。
     入力欄のidに対してlabelのfor属性として指定します。

ボタンと送信
  ボタン
    inputタグ/ type=”submit” :入力したデータを送信するときに押すボタン
    buttonタグ:JavaScriptなどを使い処理を実行するきっかけに使うボタン

POST/GET
  POST ⇒ データを裏でまとめて送る方式
  GET ⇒ URLの一部としてデータを送る方式

fromタグ ⇒ 入力フォーム全体を囲み、ひとつのデータとして送信する単位を
       示します。

 最後までお読みくださってありがとうございます。
 こんなにたくさんの意味不明な言葉が次々と登場してうんざりですよね。でも、いいんです。これらの言葉を全部覚えなくてもブログ作りに問題ありません。作業をしながら言葉の意味がわからなくなったら、ここへ戻って来ておさらいしてください。
 実はここは私も何回も戻って参照しているページです。

無料ブログを作ってしまったけど、有料ブログへのお引越しを考えている方はこちらがおすすめです。

無料ブログからWordPress移行プラン用

タイトルとURLをコピーしました

語学(日本語)ランキング