IRON CLAW


万年工事中

IRON CLAWは定期更新を目指し      
日々進化を続ける・・・

html

ページトップ移動を設けました

今更ですが設けました
cssとかjavascriptとかいろんな方法調べたけど全然わかんなかった
でもねなんとねブログパーツとしてlivedoorでいうフリーエリアでできるとは思ってもいなかった

参考:知恵ノート リンク
びっくりしたよすぐできちゃったから
今までの苦労返せってぐらい
この方法使えばねhtmlごとに指定する必要がないフリーエリアにあるのだから
あ、画像は今のところなかがみやさんの画像を使わせて頂いています
一応自分で作ったのもあるんだけどね(96×96)

up 

でもね形が四角だと積み重ねることができるからアメブロでよくみるトーテムみたいなのが実装できる
ページトップのほかに前の記事次の記事ってあるやつ
しかし、ページ移動したときもそのままだから少し不便かもしれない
その点個別に指定できるcss+html+jqueryなどは便利であろう
トレードオフの関係というわけです
では今回はこの辺で失礼します

第3回html ~ハイパーリンク~

またせたな
ひでポンです
今回はリンクについてです
リンクそうトライフォースそしてマスターソード片手にガノンドrffff...

申し訳ありませんでした
まじめにします
許してください
何でもしますから

ん?
ん?
ん?

今...何でもしますって言ったよね

はあい前置きはこれぐらいにしておいて 
久しぶりではしゃいでただけです

そもそもリンクいわゆるハイパーリンクはウェブサイトを作成する上で
とても重要で欠かすことのできないものです
まずリンクには<a>タグを使います
また画像にのリンクを貼ることができます

というかいちいち説明面倒なので
いつものことながらこちらにすでに用意したものが
...
用意したものが
... ...
用意したものが!
... ... ...
用意したものがあああ!!!

sample_html_3_code
あるんです
今回は普通に記述、オンマウスで説明、別窓リンクとなっております
別窓はよーく使いますので覚えていると便利です
はい結果ドン
sample_html_3_確認
まあこのようになれば成功だな
ほんで二番目にマウス持ってくと
無
やはりマウスは消えてしまうか...
まあ二番目に持ってくとこんな感じででてきます
またハイパーリンクは装飾もできるそうですわい
みんなのタグ辞書(ハイパーリンクについて説明しているページに飛びます)
では今日はこの辺で

参考動画(ドットインストール)


本誌参考ページ(P101~119)
 
第2回html ~body~←前回 
次回→次いつになるやら...まあある程度簡単なページ作れるぐらいまでは春休み中に 

ドロップダウン完成

どうも
ひでポンです
リベンジを果たしたひでポンです
実際は1日にメニュー自体すぐできちゃって
んで2日に色変えてみたりして
まあ、マウスオーバーでメニューの色を変えることに成功
1
ありゃマウスポインタ消えちゃうのね(´・ω・`)
ほんでメニューの項目にも乗せたとき...というかさ
cssってマジですげえと思いますた
だってさメインとサブ共通だから
メインができるようになったらサブもできちゃうの
2
相変わらずマウスポインタは映らず


てなわけでまだまだリンクできてないけれど
随時とまではいかないけど
ちょこちょこリンク変えていくんでよろしくお願いします

以下参考にさせていただいたサイトの方々

・カラーコード表 リンク 
文字の色やらブロックの色などを参考にさせていただきました

・Webpark - ウェブサイト作成に役立つことをいろいろと リンク
マウスオーバーの件でとてもお世話になりました
ドロップダウンメニューを作ろうとした原点でもあります

・元地元中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記 リンク
今回一番お世話になりました
ドロップダウンに挑戦したところにはこの記事が無かったので
この記事様が今回私を成功へと導いたと言っても過言ではないでしょう

恐らくこれからも参考にさせていただきます(´∀`)



最後に悲しいお知らせだお(´・ω・`)
幾つかの記事を消します

・テクスチャ制作(マインクラフト)
→テクスチャちょっと一から作り直すから

・モンパレ関係
→更新だるくなってきた

今のところはこんな感じ
また増えちゃうかも(´・ω・`)

ではまたお会いしましょう
 

第2回html ~body~

おはようございます
ひでポンです
今回はbodyタグについて
 え?今日は水曜?
昨日書けなかったから・・・だよ

前回はbodyタグの中に
ページ見出しの<h1>タグと
段落の<p>タグを記述しましたね
今回は箇条書き、重要語句指定、(ルビ)
ではやっていきましょう
まず箇条書きには結構種類があります
まあ基本的な<ul>タグと <ol>タグ
<ul>はlist(箇条書き)の項目の前に点が付きます
恐らく前にカテゴリ欄を<ul> で作っている途中を見かけた方もいるかもしれませんね
あれです途中で挫折して<p>タグに頼ったひでポンです
一方、<ol>タグは項目の前に数字が付きます

次に重要語句指定ですが
表示としてはワープロとかの太字(Ctrl+Bのあれ)みたいになります
あ、ちなみに<strong>タグ

で、かっこのルビですがなぜかっこかって?
ああ、平仮名ばっかで見にくいですね
まあ理由としてはブラウザが対応してないらしい
IE,Safari,Chromeは何とか対応してるみたいですけど
Firefox,Operaは厳しい・・・
他のブラウザはわかんね
まあ作るけど
そうだ!レビューだけして使わないようにすれば!
まあいわゆるコメントアウトよ
javaやらc#やらわ「//」でしますね
ソースの説明文とかで
でもねhtmlは<!--せつめい-->と記述するんです
慣れないかもしれませんが何かかっこいね
サンプルでファイル上げる時はそういうことにするわ 

ではさっそく書いていこう!
今回も予め書いたものを・・・
sample_html_2_code
ルビ疲れた
死ぬ...
結果こんな風になったかな?
sample_html_2_確認

はあ、お疲れ~

参考動画(ドットインストール)


本誌参考ページ(P60~63,66~67)

では次回(・∀・)つ
朝っぱらから疲れたな

第1回html ~コードを書いてみる~←前回

次回→第3回html ~ハイパーリンク~
 

第1回html ~コードを書いてみる~

おはようございます
ひでポンです
本日より書いていきたいと思います
それとですね、ドットインストール様も参考にさせて頂くんですが
自分の教科書替わりということで
「HTML&CSS 逆引き大辞典」境 祐司 も参考にしながら
進めたいと思っています

まずは、htmlのバージョンの話でも・・・
htmlには3.2,4.01,5の代表的なバージョンがあるそうです
まあ、ここでは5を使っていきます

書き方ですが、不等号の記号を使って要素名を挟む形になります
要素名を挟んだ物をタグと言います
定義をするときは開始タグと、終了タグが必要になります
終了タグは/(スラッシュ)が加わります
例えば、見出しを定義する際には<h1>と記述します
終了は</h1>となります
そして、見出しにしたい文を開始タグと終了タグで挟みます
<h1>IRON CLAW</h1>
このように、タグで文書の意味づけしていく作業をマークアップといいます
また、改行を行うときは<br>と記述します
<br>は文書の意味づけとは異なる為開始タグのみ記述します

段落は<p> </p>タグを使います
その他に、<a></a>ハイパーリンク
<img>画像の表示などいろいろなタグがあります
<!DOCTYPE html>htmlだということを宣言
<html lang="ja">日本語指定

では実際に書いていきましょう(DOCTYPE,langは省きます)
sample_html_1_code
ざっと書いてみました
<title>タグはブラウザのタブのところに表示されます
次に保存する際の注意事項です
1.文字コードの指定保存
指定保存
今は「UTF-8」が主流だそうです
変更をお忘れなく
2.拡張子
kaku
拡張子は「.html」です

ではブラウザで表示を確認してみましょう
sample_1_確認
このようになればきちんと記述できています
お疲れさまでした

参考動画(ドットインストール)



本誌参考ページ(P14~17,40~45)
 
購入(Amazon) 


では次回お会いしましょう(・◇・)ゞ

htmlの基本←前回
次回→第2回html ~body~
記事検索
ぷろふぃーる
ひでポン
pupu
一応管理人
「サイトを一緒に作らねえか?」



ごとうげ
マリオ
このブログの縁の下の力持ち
「」



QRコード
QRコード
おしらせ

dropbox問題発生中

アクセスカウンタ
  • 今日:
  • 昨日:
  • 累計:

相互リンク

相互リンク(追加順)

┗気まぐれなブログ。

  • ライブドアブログ

Back to Top