HTML+CSSによるウェブページ制作例－CSSの基本
■HTML+CSSによるウェブページ制作例 ウェブページ制作の流れ 実際にXHTML+CSSでウェブページを作成してみましょう。 ウェブページ作成の流れは、大まかに以下のようなものとなります。 テキスト原稿を作成する フリーハンドのスケッチなどで、レイアウトのイメージを固める HTML・XHTMLのバージョンを決める HTMLタグで情報の構造付けをする 必要に応じて、<div>や<span>でスタイリングのためのタグ付けをする id属性やclass属性で各部分に名前を付けて、CSSのセレクタを設計する CSSでスタイル指定する レイアウトのイメージを固める ウェブページを作成する際には、まずテキスト原稿や掲載する画像などのコンテンツとなる情報を作成します。 それらをページ内にどのように配置するか、フリーハンドのスケッチなどでレイアウトのイメージを固めます。 今回作成するウェブサイトの完成イ
IE6の呪縛 フロート（float）を正しく理解する | hijiriworld Web
フロート（float）について、スタイルシートリファレンスなどを引くと、「float: 左または右に寄せて配置する」などと簡単に書いてありますが、厳密には違います。まずここで勘違いが起きます。 そして、IE6というクソブラウザは、フロートの仕様に対するバグが甚だしく、この勘違いをさらに加速させてきました。 そのせいで、いまでもフロートに苦しめられている人は多いのではないでしょうか？ 今回はこのフロートについて正しく理解していきたいと思います。 フロートは「左または右に寄せて配置する」だけではない <div style="float: left; width: 100px;"> float: left; </div> <p> text </p> 後続の要素に影響を与えているので、フロートは「左または右に寄せて配置する」だけではありません。 フロートは「回り込み」でもない <div style
[デザイン]角丸を使う理由、不自然な角丸について徹底的に分析した
角丸の話題が盛り上がってましたね 先々週webデザイナーである彩さん(@maritime_color)のブログDesign Colorで、角丸をどういう場合に使うか、という記事がすごい話題になってました！ デザイン時に注意したい角丸の使いかた | Design Color そしてその後、ナナメウエの変態イラレラー(褒めてます)すずきさん(@suzukisan__)もそれに続き角丸に触れる記事を書いたりしていました。 illustratorで角丸を扱う際の注意点 ※追記しました | ナナメウエblog 私も以前デザインが苦手な人も分かる「デザインは全て意味がある」6つの要素という記事を書いたとき、角丸についてはさらっと触れるに留めたのですが、いずれもっとがっつり言語化したいものだと考えていました。 気になることもあったし、ちょうど良いので今回便乗して記事にしてみようと思います。 形状としての
![[デザイン]角丸を使う理由、不自然な角丸について徹底的に分析した](https://cdn-ak-scissors.b.st-hatena.com/image/square/9068d7a52b34c4de9a5be296ee0a927a28903d59/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F02%2Fdesign-rounded-corner-13-150x150.png)
CSSで画面全体に対して天地中央に配置するテクニック(1) | 先端研究ブレイドLAB
CSSで天地センターに配置するには、いくつかの方法があります。今回は広く使用されている定番の手法を紹介します。 produced by Blades co.,ltd. 画面全体に対して天地中央に配置するようなレイアウトを、Flashサイトなどでよく見かけます。 このレイアウトをHTMLとCSSで実現するテクニックを2回に分けて紹介します。 今回は定番の手法として広く使用されているテクニックについて解説します。 定番のテクニック -絶対配置+ネガティブマージン- まず、以下のような内容のHTMLファイルを用意します。 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm
clearfixでfloatを解除 | d-spica
clearfixでfloatを解除 2007-03-07 1 0 XHTML/CSS clear, CSS 枠や背景が消えたり，途中で切れたりしたことはありませんか。 floatした要素（ボックス）を含む親要素（ボックス）のborderやbackgroundが途中で切れてしまうことがあります。 左の例では，右側のメニューが終わったあたりで，左右にあるラインも切れています。 floatした要素の高さは親要素の高さに反映されない 分かりやすいようにXHTMLとCSSの例を書いてみましょう。 <div id="wrapper"> <div id="content"> <p>content</p> </div> <div id="menu"> <p>menu</p> </div> </div> #wrapper { width: 200px; border: solid 3px #999999;
float解除の決定版。clearfixを考えたら、進化した。
現在この中でclearfixでよく使用されているプロパティは display:inline-block; height:1%(min-height:1%) zoom:1; でも良く考えたら、全て微妙です。 zoom:1はIEの独自仕様ですし、heightを使用する場合は、IE6,7に対応させるために2つのプロパティが必要です。 display:inline-blockもボックスの要素を変形させることになります。 hasLayoutのスイッチを見た時に、一番理に適ったプロパティはwidthかなと思いました。 子要素を囲む要素として、divやulなどデフォルトCSSがdisplay:blockのプロパティのものが多く、display:blockのプロパティの場合、width:100%で問題ないと思ったからです。 現在のブラウザ状況に適したclearfix 上記を踏まえ見直したclearfixが
ローカル環境（XAMPP）にWordPressをインストールする手順 ｜https://wp.yat-net.com/name
すでに様々なサイトで紹介されていますがローカル環境へのWordPressインストール手順を記述します。解説はWindowsベースになっており環境はXAMPPを想定しています。XAMPPの導入については過去記事「WordPressをローカルで開発するためのXAMPP事始め＆WordBench神戸、大阪について」をご参照ください。 手順は以下の通りです。 WordPress本体のダウンロード ファイルの設置 データベース作成 WordPressの初期設定 WordPress本体のダウンロード WordPress本体をダウンロードします。記事執筆時点での最新版は3.5.1です。 http://ja.wordpress.org/ ファイルの設置 ダウンロードしたファイルを解凍し、ドキュメントルート（公開用）ディレクトリに設置します。僕はxampp/htdocs/になるのでそこにwp20130128
IE6でよく遭遇するCSSのバグとその解決方法 | コリス
Dave Woodsのエントリー「IE6 -CSSのバグとその解決方法」から、IE6でよく遭遇する３つのCSSのバグとその解決方法の意訳です。 IE6 - CSS Bugs and Fixes Explained IE6で、マージンが２倍になってしまうバグ IE6で、hasLayoutプロパティによって起こるバグ IE6で、小さい高さを指定した場合に起こるバグ IE6で、マージンが２倍になってしまうバグ IE6で、フロートした要素のマージンが２倍になってしまうバグと解決方法の紹介です。 下記のコードで、IE6はマージンが20pxになります。 sample:バグ #navigation{ float: left; width: 200px; margin-left: 10px; } #content{ float: right; width: 500px; margin-right: 10p
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
CSS(スタイルシート)の基本、小技、テクニック総まとめ
CSSの基本や使える小技テクニックなどを幅広くまとめました。以前書いて今もそこそこアクセスがある「CSSの知識をもっと深める30+2の小技テクニック集｜Webpark」という記事があるのですが、2年近く前の記事ですしパワーアップさせて作り直しました。 恐らく過去最長の記事ですので目次を作りました。クリックするとするりと移動します。基本的な内容が多いですが、お役に立つ項目があればうれしいです。 ということで順番に説明していきます。 1. 全般的なこと 1-1. CSSリセット ブラウザごとでデフォルトのスタイルは異なっています。その違いをそのままにしておくと、後でブラウザ間の表示の違いに悩むことになり、どこが原因か分からないとイライラしてしまいます。 そんなことのないように、いったんデフォルトのスタイルをリセットしてしまおうというのがリセットCSSです。 方法は色々ありますが、個人的には一番
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
