スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
-------- : スポンサー広告 :

CSSに初チャレンジします!

はじめてのCSS!
さあ、挑戦します!



前回まで作ったHTML↓にCSSで入力する準備部分を加えました。(青い文字の部分です。)
--------------------------------------------------------
<HTML>
<HEAD>
<TITLE>初心者HTML</TITLE>

<style type="text/css">
</style>

</HEAD>

<BODY>

<h2>HTMLでHPを作ってみよう!</h2>

<p>超初心者がHPを作るまでの道のり。 超基本からスタートする初心者のためのサイト!</p>

<h3>HTMLって何?CSSって何?</h3>

<p>初心者ならではの、わかりやすい説明でHP作成を作っていきます!</p>




<div id="footer">
<address>
Copyright (C) 初心者HTML,All rights reserved.
</adress>
</div>

</BODY>
</HTML>

---------------------------------------------------------

これからcssスタイルでいくよ!
って、アピールする感じ?なのかな?
これを入れたので、
どんどんCSS入力していきます♪
スポンサーサイト
2012-03-26 : ブログ : コメント : 0 : トラックバック : 0 :

HTMLにいよいよCSSを付け加えたいと思います!

CSSって何?
いったい、何なの?
そんな風に
ずっと思っていました。
実際にHPを作り始めてみるまでは!
なにはともあれ、
実際にやってみるのが一番!かも!

『CSSとは、Cascading Style Sheet(カスケーディングスタイルシート)の略称です。』

・・・って、嫌!難しい!
なんとか日本語でカスケーディングスタイルシートの意味を
教えて欲しいところですが
なんだか、カスケーディングを日本語で表すのが難しいみたいです。
そこを何とか!って感じですが。
翻訳機能でCascading Style Sheetで訳してみたら
カタカナで
カスケーディングスタイルシートって出た。
うーん。意味を理解しようとするのはやめよう・・・

CSSとは、HTMLを飾っていくもの。
HTMLが顔ならCSSは化粧。
見栄えよくするもの。

さて、次回から、いままで作ったHTMLのページを
CSSで装飾していきます!



2012-03-25 : CSS : コメント : 0 : トラックバック : 0 :

HTMLで入力したファイルをメモ帳でHTMLファイルとして保存する方法。

この間、HTML形式で保存したメモ帳のファイルが
保存されていなかった。
という事件がおきました。
私の中では大事件です。
この解決策として
私は次のような方法をとることにしました( ´(ェ)`)


新規でメモ帳を立ち上げます。

HTMLの内容を入力します。


HP作成 HTML初心者すぎて超基本からのスタート!

そして
ファイル→名前をつけて保存→.html をファイル名の後につけて

HP作成 HTML初心者すぎて超基本からのスタート!

→保存。
するとHPみたく表示される、
HTMLのファイルが出来上がりました。

次に開いたとき
HPのように表示されている状態では
メモ帳のときのように、HTMLを付け加えたり
編集できないので
なんと!
HTMLファイルをメモ帳として開く方法!が
あるのです!!!(常識??)
知らなかったぁ~あぁ~


私、ずっと、HTMLファイルで保存したファイルは
もう何か特殊な方法を使わないと
テキスト形式で表示は、
出来ないものだと思っていました。
一度調べたときに、ファイルを解凍?
(なんか違う?でもそんな感じのなにか)
出来る何かをダウンロードする、
といった事が書いてあるのを見たことがあって
そうしないとダメだと思い込んでいました。

HTMLファイルをテキスト形式でまた、表示する方法!

メモ帳を開きまーす

ファイル

開く


HP作成 HTML初心者すぎて超基本からのスタート!

上の図の様にすべてのファイル、を選択して
開きたいHTMLをクリックします。

すると!
なぜかHTMLファイルが
メモ帳のテキスト形式で
開けるんです!

これで
HTMLを入力して追加したら
上書き保存すると
HTML形式で保存されている!

ミラクル!(でも、一度痛い目にあい、疑い深い私はちゃんと保存できているか
確認してから閉じている。)

これでまたHTMLファイルを編集したいときには
メモ帳から開くで開いて編集して~の繰り返し。
すばらしい方法ですね!





2012-03-24 : 失敗談 : コメント : 0 : トラックバック : 0 :

HP作成初心者、タイトルをHTMLで入れてみる

HTML手打ちで、
ページのタイトルと
サブタイトルを、記述してみます!


<div id="header">
<h1>HTML超初心者のHP作成</h1>
<p>初めてのHP作成!上手に出来るかな?</p>
</div>



HP作成 HTML初心者すぎて超基本からのスタート!
上記の様に記述すると こんな感じになりました↑

※なんか、画像みずらいですね!
プリントスクリーン?で、ペイントで色々ほどこして
こんな感じになってしまった・・・
もっと見やすくかっこよくなるように
研究予定☆(追記!HPに上手にHP画面を表示する方法こちら!)




 解説!↓

<div id="header"> ←詳しくはなぞですがdiv idが"header"だよって
              ことなんでしょうね・・・
              うーん。むずかしくてよくわかりません。
              調べましたが理解不能でした。
           
              
<h1> タイトル </h1> ←ここにタイトル。

<p>サブタイトル</p>   ←ここにサブタイトル。

</div> ←        <div>で始めたから</div>でとじる!みたい。


以上、頼りない解説でした☆

<h1>は、SEO対策上にも
大切だと聞いたことがあります!
やっぱり、タイトルって大事なんですね。






HP作成 初心者すぎて超基本からのスタート HOME




2012-03-24 : HTMLで入力 : コメント : 0 : トラックバック : 0 :

HTMLで欠かせない!

HTMLでHPを手打ちで作るとき、
まず
こちら↓の記述が
必須のようですね!


<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>

<BODY>

</BODY>
</HTML>


これに色々して
HPになるのね。
まず、メモ帳に
記述してみました☆



HP作成 初心者すぎて超基本からのスタート HOME



2012-03-24 : HTMLで入力 : コメント : 0 : トラックバック : 0 :

HTMLでコピーライトを記述!

HPの一番下に
コピーライトを
記述してみます!

<body>~</body>の間に記述します。


<div id="footer">
<address>
Copyright (C) 初心者HTML,All rights reserved.
</adress>
</div>


HP作成 HTML初心者すぎて超基本からのスタート!


初心者的解説↓


<div id="footer">  ←div idは、フッターです。
<address>      

Copyright (C) 初心者HTML,All rights reserved.
   ←ここにコピーライトをいれます!
                                   
</adress>
</div>        ←divではじめたので、divでとじましょう。



今日の感想。
これ(コピーライト)を入れると、
なんか、HPって感じ!


HP作成 初心者すぎて超基本からのスタート HOME



2012-03-24 : HTMLで入力 : コメント : 0 : トラックバック : 0 :

いよいよ!自作HPに文章入力~

コピーライトというものを
記述したところまで
出来ました。

で!
次は!
いよいよ
文章入力!!!
どんどんHPって感じ( ´艸`)

さてさて、
↓下の、青い字の部分を新たに入力しましたよっ

--------------------------------------------------------
<HTML>
<HEAD>
<TITLE>初心者HTML</TITLE>
</HEAD>

<BODY>

<h2>HTMLでHPを作ってみよう!</h2>

<p>超初心者がHPを作るまでの道のり。 超基本からスタートする初心者のためのサイト!</p>

<h3>HTMLって何?CSSって何?</h3>

<p>初心者ならではの、わかりやすい説明でHP作成を作っていきます!</p>




<div id="footer">
<address>
Copyright (C) 初心者HTML,All rights reserved.
</adress>
</div>

</BODY>
</HTML>

---------------------------------------------------------
すると、
↓このように表示されます!



HP作成 HTML初心者すぎて超基本からのスタート!

って・・・
なんか、画像小さい・・・
見づらっっ・・・・!!!

見づらいけれども、
一応、文章が、入っているんです。よ。

この、HPの画面をブログで表示すること、
すっごい
むずかしいんですが!!?

研究をかさね、
プリントスクリーンをして
エクセルで縮小して
そのエクセル画面を
またプリントスクリーンして
必要ない部分を
パソコン(Vista)に入っている
ペイントで
トリミングで切り取って
(急にペイントで縮小しちゃうと
なんか文字とか、ぼけぼけしちゃう!
ので、わざわざエクセルで縮小してみた。)
ってやってみたんだけど、
なんか上手にやっている方々みたく
出来ません!
もちょっと研究してみますかね。
(追記 研究した結果、上手に出来る方法はこちら!)


初心者流に解説してみると、

文章を入れるときは、
<BODY>の間へ。
きっと文章が<BODY>の一部なのでしょうね。
あと、<h2>~</h2>とか<h3>は、見出し。なので文字が
大きくなっていますね。
<p>~</p>には、文章を入れます。
新聞でいう、見出しが<h?>で
記事が<p>って感じなのでしょう。




HP作成 初心者すぎて超基本からのスタート HOME



2012-03-24 : HTMLで入力 : コメント : 0 : トラックバック : 0 :

PC画面を画像としてブログで表示する方法見つけた!

PC(HP)画面を、ブログとかに載せてみたい!
そんで、PC画面にペイントみたいな
書き込み?みたいのもしてみたい!

(たとえば、自分がHTMLから作っているHPを、
なんか、ちょうどいい感じに小さくして
出来上がったところまで、それっぽく
ブログで紹介したい!)

そんな願望を持ちながら、
かろうじて知っていた
プリントスクリーンという、
画面をコピーできる方法。

それを試みて、
それだとブログに表示するには
あまりにも大きすぎるので
エクセルで縮小してから
さらにそれを
ペイントで切り取って・・・・
とかしていたのですが、
なんだか面倒・・・・。


HP作成 HTML初心者すぎて超基本からのスタート!
↑文字もぼけぼけ!なんか目標とちがう!
 


そこで調べてみるにも
なんていう言葉で
検索していいのかが、
まずわかんない!
そう、
わからないんです!

HP画面 ブログ 表示。
とかで見てみたりとか・・・

知恵袋やらなにやらで
長時間すごしていると、
画面キャプチャ
という言葉が!
画面キャプチャとは
ウェブページを画像として保存することのできる機能
との事!


そうそう、それそれ!
初心者すぎて
言葉がまず、わからないのよね!

よい言葉を知った私は、
また調べると
WIndows vista のアクセサリに
Snipping Tool という
簡単にキャプチャ?出来るよい機能が
入っていることを
知りました☆

早速張り切ってアクセサリを見てみるも
Snipping Toolとやらは見つからず・・・
さて困った。
vista Home Basicは
Snipping Toolが、
ない
そうです・・・・
あぁぁぁぁ

次回は、
とてもよい
キャプチャの方法を発見。を
予定しています☆

追記☆↓こちらで予定を実行しました。

とてもよいキャプチャの方法




HP作成 初心者すぎて超基本からのスタート HOME





2012-03-24 : PC画面を画像として保存 : コメント : 0 : トラックバック : 0 :

PC画面をブログに表示する方法!

出来た!

PC画面にブログの画面を
ちょうどいいサイズに表示できた~
↓こんな感じ!


HP作成 HTML初心者すぎて超基本からのスタート!

アメブロで画像で表示すると
縮小になってしまって
すっごい小さくなっていたけれど
↓こういう風に・・・小さ・い・・


HP作成 HTML初心者すぎて超基本からのスタート!


やっと出来るようになりました☆
(HTMLでHP作るという方向からなんかちょっとずれてきている)

便利な方法はないか~と
検索に検索を重ねてみつけたのが
rapture
というサイト!
とても便利~
え!?こんなこと出来るの!?
って感じにさくさくHP画面を
切り取り出来ちゃんです!

びっくりびっくり。
そして画像をjpgで保存して
アメブロで画像追加から参照→アップロード
→サイズをオリジナルで表示に選択。


すると
とても大きく画面が表示されてしまうので
画面をクリックすると


HP作成 HTML初心者すぎて超基本からのスタート!


↑四角いぽちっとしたのが出るので(赤い丸印のところ!)
 そこでご希望の大きさに小さく出来ました。
 ※ちなみに、私は最初下の真ん中のぽちっととか
 横の真ん中で小さくしようとしたら
 文字とかがつぶれたり横に伸びた感じになって
 えらいことになりました( ´艸`)


HP作成 初心者すぎて超基本からのスタート HOME




HOME

2012-03-24 : PC画面を画像として保存 : コメント : 0 : トラックバック : 0 :

消えた・・保存したファイルが消えた・・・

半日かけて
一生懸命作った
HPの
ファイルが
上書きしたのに
消えた・・・

ていうか!!!
どこにいった!?
そもそも保存できていなかったの?!
だって、いつもファイル閉じるとき、
保存しますか?って
聞いてくれるじゃない!
なのに!
なのに!
なんでよ!
なんで保存できてないなら
保存しますか?って
いつものように
聞いてくれないのよぉぉぉぉ!
Windows vista メモ帳さんよぉ!

HTMLで入力していた
Windows メモ帳を
上書きして、
確かに上書きして
そしてその後
ファイル名に
『 .html』 ドットエイチティーエムエル
を入力して
すべてのファイルで保存。

保存したはずが・・・・

数時間後開いたら
保存する前の
へんなHPが表示された・・・

なんで?なんでなのよぉ~
そのファイルを、
もう一度保存してみたけれど
なぜか保存日時が、
保存されてないまま。

うぅぅ。
もういい。

ファイルを保存するときに
名前をつけて保存、で
名前を変えると
保存できたので
そうする事にします。

さらに、保存日時を見て
ちゃんと保存できているか
チェックする事にする・・・。

気合を入れてHP作成(メモ帳で)
したときには、
ちゃんと
保存できているか
フォルダなどで
保存日時などで確認してから
閉じることを
おすすめします!

ていうか、
なんか他に
いい方法ありそうですね(´□`。)
調べてみますっ




HOMEへ



2012-03-24 : 失敗談 : コメント : 0 : トラックバック : 0 :
ホーム

QRコード

QR

検索フォーム

スポンサードリンク

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。