2011年6月27日月曜日

HTML講座第六回「文章のリンク-基本部分」

◆リンクとは何か

 リンクとは、辞書的意味で関連付けですね。
HTMLでは、他のファイルの呼び出しをになっています。
呼び出すファイルはURL【Uniform Resource Locator】で指定しています。


※今回学ぶa要素はインライン要素です。body要素直下に書くことは控えて、p要素【パラグラフ】とかのブロックレベル要素の中に書きましょう


  1. 文字列のリンク:<a href="(URL)">(リンクの文字列)</a>
  2. 文字列をリンクさせる先の場所として指定:<a name="(名前)">(文章か文字列)</a>

URLには、http://……とか、mailto:(メールアドレス)URLに該当するものが張り付けられます。悪用厳禁。
リンクの文字列は、アドレスやそのページのタイトル等を。
まあこんなふう特に意味のない文字列も指定できますけど。(リンク先putidevelopers.org)


(名前)は半角英数で。そうすればまず誤動作は無いと思います。日本語で成功した、っていう資料がないので一応。
例をあげると、例えばここに"here"という名をつけたとします。すると、<a href="(url)#here">(リンクの文字列。先ほどと同様)</a>というソースコードを文章に埋め込み、クリックするとそこに行きます。※おなじファイル内ではURLを省略しても正常に動きます。別のファイルのものはURLを指定しましょう。そのページの先頭に行く場合は#以下入りませんよ。



◆画像リンク的なこと


紹介いたしましたリンクでは文字列しかできません。
ウェブサイトでは画像のリンクあるじゃん!!!おしえて!!!って思った方もいると思います。
実は結構単純なんですよ。上で紹介した一つ目のリンクの貼り方の、リンクの文字列
<a href="(URL)">(リンクの文字列)</a>に、画像の要素(img要素)を入れればいいんです。



基本的なことは以上、ですね。これだけあれば一応リンクは書いていけますよ。

2011年6月25日土曜日

HTML講座第五回「CSS 文章スタイルでつくる」

お久しぶりです。gisi_spicaです。
目標HTMLなんぞ作ろうかと思いましたが、とても面倒なので、前回分(http://bloggertouch.appspot.com/putidevelopers/post/7803022317575453271 ←いつも僕が見ている方のアドレスです。)の画像の「周りの矢印なし」を作ります。



復習用画像


body要素内のデータ


<div id="wrapper">
<div id="header"><p>ヘッダ ID:header 横800px,縦80px</p></div>
<div id="navigation"><p>サイドメニュー<br><br>
縦は任意<br><br>
横150px</p></div>
<div id="contents"><p<メインコンテンツエリア<br><br>
縦は任意、横は650px<br><br>
※ヘッダからフッタまでを囲っているのは、wrapperです。</p></div>
<div id="footer">フッタ 横800px、縦は任意。</div>
</div>


こうなっていると、このように表示されるはずです。



※InternetExplorer8で表示
<br>は改行です。

ではスタイルのソースコードを埋め込みます。ヘッダにスタイルシートを書く「内部スタイルシート」でやりますよ。/*と*/の間はCSSでのコメントです。

以下のソースをhead要素の中にいれてください。

<style>
body{ background-color:green; /*背景をgreen(緑色)に*/}
#wrapper{
margin:0;padding:0; /*marginとpaddingを0とします。これで無駄な余白を消します。このように一行に二行書いても問題ないです*/
background-color:white; /*背景をwhite(白色)に*/
width:800px; /*横幅:800px*/
}
#header{
width:800px; /*横幅:800px*/
height:80px; /*高さ:80px*/
background-color:blue; /*背景を青色に*/
}
#navigation{
width:150px; /*横幅150px*/
background-color:#CCCCFF;/*背景色を#CCCCFF(赤0xCC、緑0xCC、青0xFF)に*/
float:left; /*(左側へ移動)浮かせる:左*/
}

#contents{
width:650px; /*横幅:650px*/
background-color:silver;/*背景色をsilverに*/
float:right; /*(右側へ移動)浮かせる:右*/
}
#footer{
width:800px; /*横幅:800px*/
clear:both; /*移動を回避:すべて;これで回り込みを回避します*/
}
</style>

コメントの部分は移さなくてもかまいません。ああ疲れた(記事書きあげの際タブキー使えないんですよ。)

これを埋め込むとこうなるはずです




枠を書く方法もあるのですが、調整がめんどいのでこうしました。これで、目標の形になりました。え、枠と違うって?枠はわかりやすくするために重ねなかったんだよ。重ねたらわからないでしょ?でもブラウザでやるとその枠は重なるの。そしてその枠は実線とか点線とかで書かれないの。これで納得でしょ?
……かなり強引だな

Dropboxのパブリックリンクが止められた.....

えー、Pineです。
実は本日付けで、愛用していたDropboxのパブリックリンクが止められてしまいました。
ちょろっとそのことについて記事をまとめようと思います。

2011年6月15日水曜日

iOS5 Beta版 裏(リ)リース!非開発者のための非公式インストール方法

Pineです!
みなさんお待たせしました。グレーゾーンなお時間です。
Pineはグレー(というかブラック)な、法的に危ないことをするのが大嫌いなのですが、
今回決行することに決めました。。

iOS5のBeta版は、登録した有料アカウントの開発者しかインストールできても、認証が
できず使えない仕組みになっています。
がしかし、ちょっとした方法で認証せずに使う方法が見つかったんです!

今回はその方法に触れながら、iOS5についてお話をしていこうと思います。

詳細は以下から.........

2011年6月13日月曜日

iDevice用のGCC導入方法(要Jailbreak)

Pineです。
gccとは、Gnu C Compilerの略で、つまりCコンパイラですね。
それをiDeviceに導入して、ターミナルから使う方法がありますので、その手順を
まとめてみようと思います。

簡易GCCインストーラーも、本文最後に用意しました。是非ご覧ください。

詳細は以下から..........

2011年6月6日月曜日

WWDC 2011開催!! リアルタイムでわかったこと書き連ねました!!


やってまいりましたWWDC 2011!今日は絶対に寝ないPineです!
僕はイベント会場に行っているわけでもないので更新は遅くなりますが、全力を尽くして情報
をかき集めて、それをこの記事で更新していこうと思っています!

詳細は以下から.........

いよいよiOS5発表WWDC直前...いろんな噂がはびこってるまとめ iOS5コンセプト動画



とうとう今晩、日本時間で午前2時にWWDCが開催されますね!!
超楽しみなPineです。
せっかくの直前です!わくわくしたいですよね!
というわけで、改めてiOS5のコンセプト動画をまとめてみました。

詳細は以下から...........

2011年6月5日日曜日

とうとうiPhoneにもリムーバブルメモリ登場!「i-Flash Drive」



Pineです。
ちょっと海外のニュースサイトを徘徊していたら、i-Flashなるものを見つけました。
iPhone向けの取り外し可能なリムーバブルドライブのようで、現在売られているという話も...

詳細は以下から.......

2011年6月3日金曜日

「謎のプロジェクト」解禁!iFaith-v1.0がiH8sn0wからリリース!


こんにちは、Pineです。
脱獄記事は久しぶりです。
が、今回は新しい脱獄ツールの紹介ではありません!
iFaithというツールが、日本時間本日午前9時にリリースされました。
ツールをリリースしたのは、あの16歳にも関わらずバンバンと脱獄ツールをリリースしまくっている、iH8sn0w。
僕の大好きなSn0wbreezeの作者様ですね。

というわけでこのツールの概要と使い方を見て行きましょう!
詳細は以下から...........

2011年6月2日木曜日

Manual of iBoogie

[ last update : 06/02/2011 22:00 ]

※この記事は英文のみとなります。日本語の記事はコチラです

Hi. I'm hitsub.

I wrote manual of iBoogie in Japanese before.
But, some people don't know how to install in non Japanese.

So I decided to write the English version of the manual.

If you are interested , please click "Read More".

gisi_spicaのHTML講座第四回「HTMLの骨組み(デザイン編)」



記事upが遅れてすみません


今回はデザインを考えます。


◆webページの枠組み


 フレームから作っていくつもりです。

 今回目標にする形は四つのところからできてます。

  1. タイトル
  2. メニュー
  3. 本文
  4. フッタ

 以上です。

 これから書いてく方法で書けば、パン屑メニューも簡単にできると思います。使いやすいページの形の一つです。(少なくとも筆者はそう思っています)


◆フレームマップを作る。


 さらーっと書いてきましたが、もっと細かいところを考えていきましょう。


こういう感じでリストアップしてみました


    *テキスト版:
  • 全体:
    • 横800px
    • 中央寄せ

  • ヘッダ部:
    • 横800px
    • 縦80px

  • メニュー:
    • 横150px
    • 縦任意
    • 左付け

  • 本文:
    • 横650px
    • 右付け

  • フッタ:
    • 横800px
    • 中央寄せ

完成予想枠はこんな感じです



◆HTMLソースの枠


では、枠組みを作って行きましょう。
HTML+CSSで作るつもりなので、表の知識はいらないです。


DIVについて

HTMLにはDIVというブロックレベル要素があります。この記事もDIVばかりで直すのが大変です・・・・・・。


ブロックレベル要素は第三回で教えましたよね?

DIVは汎用ブロックレベル要素と言って、ブロックレベル要素としてこれがひとくくりだよと伝える要素です。
id属性を利用して、CSSでデザインしやすいようにします。



枠を書く


さっきも書いたようにid属性を使います。一つのHTML文書内では一回しか使えない名前を属性値に指定します。(一つのHTML文書内で何度も使える名前を指定するには、class属性の属性値に名前を指定します。)

まずくくる場所の名前を決めます。


  • 全体:wrapper
  • ヘッダ部:header
  • メニュー:navigation
  • 本文:contents
  • フッタ:footer


これで行きます。
body要素内のみソースコードを書きますよ。



<div id="wrapper">

<div id="header">(ヘッダの内容)</div></div>

<div id="navigation">(メニューの内容)</div>

<div id="contents">(本文)</div>

<div id="footer">(フッタ)</div>

</div>


パン屑リストを入れたりしたければ、Wrapper内にDIV要素で作ってください。
<div id="(名前)"></div>で作成してください。


装飾はCSS


CSSを使う目的は、構造とデザインの分離です。
HTMLに対してスタイルシートを記述する場所は三つあります。



  • 外部スタイルシート

     別ファイルに書いて、HTML文書から読み込ませる方法。サイト全体の見栄えを変えたい、というときも、使う構造が同じであれば、CSSファイルの編集だけでOKというメリットがある。


  • 内部スタイルシート

     HTML内の一か所にまとめて記述する方法。練習には向いているが、サイト全体の見栄えを変えることは無理。そのファイルで試すとき、こうしてああして、と試行錯誤するには向いている。HTMLの論理構造の考え方にはあまり合わない。


  • インラインスタイル

     それぞれのタグに直接記述する方法。しかしHTMLの論理構造を崩す上に改変が面倒くさいという書き方。その場所だけ特別に変えたいときのみに使用し、それ以外のときには使わない方がよいだろう。



CSSの文法の考え方

どの場所を(セレクタ)、どの見た目について(プロパティ)、どう変化させるか(値)、が大切になります。
かき方は、「セレクタ{プロパティ:値;プロパティ:値;}」が基本となります。
基本文法を実際に使うのは後になります。まず目標HTML文書を完成させましょう。

Related Posts Plugin for WordPress, Blogger...

Twitter Delicious Facebook Digg Stumbleupon Favorites More