レイアウトを決めよう！Dreamweaver編－無料ホームページ作成マニュアル－
逆に削除をしたい場合は、枠線にポインタを持っていき、 クリックすると列（行）が選択されます。 この状態でDeleteを押せば選択した列（行）が削除されます。 選択する際にドラッグすると範囲を広げる事も出来ます。 またはカーソルを削除したい行、もしくは列に持っていき、 右クリック＞テーブル＞行（列）の削除 で削除できます。 テーブルが出来上がったら文字と画像を使って自分の自己紹介を入力してみましょう。 またアイコンはいちいち画像を挿入するのはめんどくさいので、一個挿入したらコピーして、【Ctrl】＋【V】で貼り付けるのが簡単です。 この通りに入力ではなく、項目を加えたり無くしたりして自分のプロフィールをテーブルで作ってみてください。
[CSS]さりげなく、美しくて分かりやすいテーブルにするCSS3のチュートリアル
IE6などの非サポートブラウザも配慮した、角丸、ゼブラ柄、ハイライトなど美しくて分かりやすいテーブルを実装するCSS3のチュートリアルを紹介します。 デモページ:Zebra stripes, footer 角丸、セルを交互にカラーリング 実装のポイント CSS3を使って美しく、そして機能するテーブルを実装するポイントです。 画像を使用しないで、角丸を実装。 余分なid, classは使用せず、更新が容易。 ※tableにclassを一つだけ ユーザフレンドリーで、読むことが簡単。 実装 HTML HTMLは非常にシンプルです。 classは、tableタグにのみ使用します。 <table class="bordered"> <thead> <tr> <th>#</th> <th>IMDB Top 10 Movies</th> <th>Year</th> </tr> </thead> <tr
スマートフォンサイト制作にdisplay:tableとdisplay:table-cellが便利！
2012/10/18：画像に一部誤りがありましたので、修正致しました。 こんにちは。 スマートフォンサイト制作案件が増えて楽しいKanaです。 スマートフォンサイトのコーディングは、古いブラウザ (ie6とかie6とかie6とか！)のことを考えるとできなかったCSSの指定ができるので、とても楽しいですね！ スマートフォンサイトの制作はリキッドレイアウト。 ナビゲーションの数が奇数！…均等にするにはwidth指定面倒だな〜画像とテキストを横に並べなきゃ…縦方向の揃え位置を指定できたらいいのに…。と思ったことはありませんか？ そんな時の強い味方がdisplay:tableと、display:table-cellです。 スマートフォンサイトのコーディングを頻繁にされている方は、既にご存知かもしれませんが、これからスマートフォンサイト作るよ！という方には、とても便利だと思います！ display:
横長になったtable要素を2列にしてスマフォ等の小さい画面でも閲覧出来るようにするjQueryプラグイン・stacktable.js
横長になったtable要素を2列にして スマフォ等でも閲覧しやすくできる、 というスクリプトです。単純な作り のtableならこれで対応できますね。 複雑なものはちょっと難しそうでは ありますが・・ table要素をスマフォのような幅の狭いデバイスでも閲覧出来る様にする、というライブラリ。 tableのレスポンシブ対応方法はよく見かけますが、最適とはいえません。なかなか難しいですね。こちらもシンプルな作りのtableに限ります。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script src="stacktable.js" type="text/javascript"></script>本体とスクリプトを読み込んで $('#foo').stacktable();初期
CSS3を使って美しく装飾されたテーブルの作り方
CSS3をたくさん使ってきれいなテーブルを作ってみましたので紹介します。特にセレクタの勉強になると思いますので、ぜひ参考にしてみてください。 まずはHTMLから。無駄に長いので3位から9位は省略しています。 <table> <tbody> <tr> <th>順位</th> <th>国</th> <th>2010年推計人口</th> </tr> <tr> <td>1</td> <td>中華人民共和国</td> <td>1,341,335,152</td> </tr> <tr> <td>2</td> <td>インド</td> <td>1,224,514,327</td> </tr> <tr> <td>10</td> <td>日本</td> <td>126,535,920</td> </tr> </tbody> </table> 続いてCSSです。とりあえず全部載せて、後で個別に説明します。 t
CSSだけで作るtableデザインテクニック
今回はCSSだけでデザインするtableのアイデアを2つ紹介したいと思います。 画像を作ったテーブルも多く見ますが、画像を使わずにも、なかなかカッコいいテーブルができますので、ぜひ参考にしてみてください。ここでは、線と塗りだけで表現するシンプルなテーブルを作ってみます。 7/22に第二段として[CSSだけで作るtableデザインテクニックVer.02(おまけ付き)]を公開しましたので、コチラもぜひ見てみてください！ またテーブルはSEO的に良くないと考えている方がいましたら、tableタグはSEOに不利というデマコチラの記事もあわせて読んでみてください。 元となるHTML <table summary="会社案内表"> <tr> <th class="t_top" width="180">会社名</th> <td class="t_top">株式会社○○○</td> </tr> <tr>
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Dreamweaver CS4使い方講座(ドリームウィーバー)テーブルとは【動学.tv】
テーブルを挿入する方法（Dreamweaver CC）