nicepaper @ ウィキ

nicepaper @ ウィキ内検索 / 「疑似要素を使ってCSSのみで三角形をつくる方法」で検索した結果

• 疑似要素を使ってCSSのみで三角形をつくる方法
  目次 CSSを使用して簡単に三角形を作ってみよう CSSを使用して簡単に三角形を作ってみよう CSSを使用して簡単に画像を使わずに矢印を表現できます。 文章の先頭にちょこっと右矢印をのせておくとより見栄えが良くなりますよね。 完成形はこのような矢印になります。 色や大きさなども自在に操ることができます。 それでは解説をしていきますね。 まずは一見関係ないように思えるかもしれませんが、高さと横が０のボックスに対してボーダーの長さを指定したらどうなるでしょうか？ 例えば、 HTML div id="box1" /div CSS #box1 { height 0px; width 0px; border 20px solid #000; } とすると、 というように...
• CSSで見出しデザイン2
  前回記事CSSで見出しデザイン1の続き記事です。 今回は疑似要素before,afterを使った見出しの制作方法をご紹介します。 こんなもの 目次 疑似要素before,afterをなぜ使う？ 疑似要素がある場合とない場合で作ってみる。 作り方 コード 作り方まとめ 疑似要素before,afterをなぜ使う？ 一般的な見出しはCSSでよく使われるプロパティ名を組み合わせただけです。例えばborder、border-left、border-bottom、border-radius、padding、padding-left、padding-bottom・・・。それらを組み合わせたり色を変えたりして作られています。しかし、その方法では、 簡単な丸を作ったり、三角形を作ったり、四角...
• HTMLとCSS
  HTMLとCSSについての記事一覧です。 目次 HTML5とCSS3とは HTML5の宣言文 html5+css3で基本的なページをつくってみよう！① html5+css3で基本的なページをつくってみよう！② headに入れる要素について HTML５で登場する新タグ(新要素) header margin、border、paddingの違いについて CSSのリセット 擬似要素before,afterの使い方 各ブラウザにおけるcss内のfont-familyの挙動 文中の文字の一部のみを指定する場合 HTML5でのタグ使用の注意点 インライン要素とブロックレベル要素（ブロック要素） CSSでmarginプロパティが効かない時の対策 boxの配置方法 ...
• 擬似要素before,afterの使い方
  このページでは擬似要素、before、afterについてまとめていきます。 サンプル 解説 1、サンプル1 疑似要素before,afterを使わないと・・・ 疑似要素beforeのみをまずは使ってみる。 2、サンプル2 A,まずはbox表示 B,次に影を付ける用のボックスを描いて確認する。 C,上側5pxから始まるようにし、次に影を付け、z-indexを-1にする。 before、afterの擬似要素とは要素の直後、または要素の直前にいれる要素のことです。 before、afterでできるCSSデザインから見ていきましょう。 サンプル 1、サンプル1 2、サンプル2 解説 1、サンプル1 疑似要素befo...
• マウスを上にのせた時に下線が消える、色が変わるリンクの作り方
  a要素で何かリンクを作ったとします。 下線がついた状態の青文字が初期状態です。 しかし、世の中の多くのページではリンクにカーソルを持っていくと色が少し変わったり下線が消えたりします。これには以下の４つの疑似要素を使います。 link まだ訪問していないリンクのスタイル visited　訪問済みのリンクのスタイル hover　これはカーソルをリンクの上に持ってきた時のスタイル active　リンクをクリックしてから放すまでの表示スタイル これらの疑似要素を利用してリンクの表示方法に変化をつけていきます。 ちなみにtext-decorationを利用することで下線を表示させたり非表示にしたりできます。 ここでtext-decorationという言葉がでてきたので、text-decorationプロパティについて説明させていただきます。 text-decora...
• Navigationのデザイン
  今回はとても単純でシンプルな形のNavigationのデザインをしていきたいと思います。 まず最初に縦並び横並びの最もシンプルな形のナビゲーションを作っていきましょう。 以下のものを作っていきます。 縦並びのナビ(カーソルをのせるとトップの部分のように灰色になる) 横並びのナビ(カーソルをのせるとトップの部分のように灰色になる) 目次 縦並びのナビゲーション 横並びのナビゲーション コピペ用 縦ナビゲーション 横ナビゲーション 縦並びのナビゲーション まずはulとlinkを使ってHTMLに記述していきます。 HTML div class="menu" ul li a href="#" トップ /a /li ...
• ふんわりと色を変えることができるtransitionプロパティ
  要素(aタグやboxなど)をホバーしたときにゆっくりと背景色や文字色が変わっていったら少し先進的に見えますよね？今回はこれができるtransitionプロパティについて解説していきます。 イメージ 例えば、赤いボックス(左)をホバーした時に緑色に変化させる事は疑似要素を使う事によって従来でも実現できます。しかし、transitionプロパティを使用する事によって 変化途中、どのように変化していくのか？ を指定する事ができます。 目次 transitionの基本 コード transitionの基本 transitionプロパティは、時間的変化を指定する際に使われるプロパティです。色や幅や高さなどCSSで指定したプロパティを時間的経過とともに変更させることができます。今回は色を中心に話を進めていきますが、時間...
• シマシマのテーブルを作る。
  テーブルのデザインでよくシマシマのものを見かけます。これは行や列にclassを指定してもできるのですが、今回は 疑似要素 nth-child を使って行っていきたいと思います。7月25日記事 イメージ 横方向 縦方向 目次 シマシマは横方向と縦方向？ コード まとめ シマシマは横方向と縦方向？ シマシマにするには疑似要素 nth-childを使っていきます。これは、n番目の子となる要素に、スタイルを適用していくというものです。 n番目ということは縦のシマシマ(td)にもできそうですし、横のシマシマ(tr)にもできそうです。 ということで両方やってみます。 コード HTML部 !DOCTYPE HTML html lang="j...
• sectionタグで読み込むCSSを限定する
  CSSでレイアウトを記述していく際に以前書いたCSSのプロパティが読み込まれ、デザインが思うようにいかないことがあります。 そんな中今日はHTML5で登場したsectionタグによって意図したCSSを読み込む方法を記述していきたいと思います。8月5日記事 目次 よくある失敗例 sectionタグで構造をわかりやすく、CSSもわかりやすく。 まとめ よくある失敗例 HTML page1.html 略 link rel="stylesheet" type="text/css" href="style.css" 略 body div id="contents" dl dt なんちゃら /dt /dd な...
• HTML5,CSS3的なFormの作成1
  HTML5とCSS3で追加された機能やタグを使ってフォームを今風にしていきたいと思います。11月22日記事 イメージ 目次 何が新しいのか？ コード まとめ 何が新しいのか？ HTML placeholder placeholder属性を指定することで、あらかじめテキストの中身を灰色などで表現しておくことができます。 input type="email" スマートフォンなどの入力の際に、ボタンに@ボタンがあらわれたりします。 CSS last-child 疑似要素の focusはCSS2ですが、 last-childはCSS3になってから追加されたものです。 コード HTML !DOCTYPE H...
• CSSでメニューなどのスクロールしたらついてくるエリアを作る1
  スクロールしても上のバーが残っている状態のCSSの設定方法です。12月1日記事 イメージ 最初はこんな感じスクロールしてもこんな感じに上のバーが残る 目次 スクロールしたらついてくるものの実装方法 コード まとめ スクロールしたらついてくるものの実装方法 スクロールしたらついてくるエリアの設定はJavaScriptでもありますし、CSSでもあります。まずは今回CSSのみで実装していく方法について考えていきます。 コード HTML !DOCTYPE HTML html head meta charset="utf-8" link rel="stylesheet" type="text/css"...
• CSSでのid名やclass名の付け方
  CSSで名前を付けるときに、どうつけるか迷ったりします。より具体的なものにしても汎用性が効かないですし、より抽象的な名前してしまうと、なかなか他で使えなかったり、前に設定したCSSが読み込まれてしまい、デザインを再定義しなおすことにめんどくさくなってしまうことがあります。今日はそんな中でid名やclass名の付け方について考えていきたいと思います。7月4日記事 目次 CSSのおさらい よく使われるid名やclass名 全体部分 ヘッダー部分 ナビゲーション部分 サイドにくるようなもの 本文やメインのところにくるもの フッター部分 一番厄介な本文やメイン部分の名前についての考察 その部品について抽象度を少し上げたクラス名にする。 その部品の細かいところはアンダーバーやハイフンを付ける ...
• boxの配置方法
  boxの自由な配置という事を学びます。 完成形はこちらです！ まずは、基本的なhtmlを記述していきます。 DOCTYPE! html html lang="ja" head meta charset="utf-8" title boxの配置方法について /title /head body div id="wrapper" div id="sample" p sample /p /div /div /body /html wrapperはほぼpageと同義語なのですが、現在多くのページではwrapperの方が採用されているのでここでもwrapperを使います。 p要素はその内容が一つの段落(複数の文からなるひとかたまりの文章...
• CSSで文字やテキストを上下中央の中心揃えにする方法
  CSSで文字やテキストを上下中央の中心揃えにする方法について書いていきます。6月20日記事 イメージ display table-cellで中央に ブロック要素を中央に 目次 このサンプルコードをいじっていきます。 display table-cellで上下中央揃えしてみる。 ブロック要素の方も試してみる。 このサンプルコードをいじっていきます。 HTML部 !DOCTYPE HTML html head meta charset="utf-8" link rel="stylesheet" type="text/css" href="reset.css" link...
• 表(table)の作り方
  このページは「tableとlistについて」のページの内容の続きであり、少しだけ冒頭の部分を被らせています。 もしよろしければ「tableとlistについて」もあわせて読んでみてください。 それでは、HTML5とCSS3を使った表の作り方について 表(table)の作り方 最もシンプルな形のテーブル(表) 一本の線で表現されるテーブル テーブル表現をより豊かにする方法 縦列のグループ化、一括指定(colgroupとcolの利用) thead、tbody、tfootについて 表(table)の作り方 続いては表制作に使うtableについて解説していきます。 tableはHTML5の中でもとても難しい分野の一つです。 tableの記述には３つの要素、 th(table header=テーブルの見出し),tr(...
• レスポンシブデザインとスマホで確認した時の落とし穴
  このページではレスポンシブデザインについて様々な方法を説明していきます。 レスポンシブデザインとは 一つのHTMLに対して画面のサイズ(正確には横の画素数)によってCSS３により別々のレイアウトに変える設計のなされたサイト を言います。 また、レスポンシブデザインをスマホで確認する時に陥りがちな落とし穴についても解説していきます。 OSを搭載した携帯電話であるスマートフォンの登場により、今後増々、様々なデバイスによって閲覧されるWebサイト作りは重要性を増していくと思われます。そんな状況に対応すべく登場したのがHTML5やCSS3と言っても過言ではないくらいでしょう。そしてより素早く全てのデバイスに対応したwebページを作るためには「より良いレスポンシブデザイン」の作成技術は必須は言えるでしょう。 そこでこのページでは、レスポンシブデザインを作成するための３つの方法と、メリット、デメリッ...
• html5+css3で基本的なページをつくってみよう！①
  HTML5+CSS3を使って実際にページの構成などを考えてみましょう。 こういったページを作成します。 まずスタイルシートを読み込ませたHTML文書がWEB上でどのように表示されるかを確認するために必要な事を書きます。ブラウザは単にWEBページを閲覧するためだけにあるのではなく、一種のエクスプローラのような役割をはたしてくれます。URLを記述する欄にhttp //からはじめて表示させたいファイルが自分のパソコン内(ローカルホスト)のどこに存在するのかを簡単な決まりのもとに書き示していきます。 例えば、 　http //localhost/page/index.html という風に記述します。 するとCドライブ内の○○というドキュメントに保存されているindex.htmlというファイルを表示させる事ができます。 これを使って自分がhtmlに記述した事が正しくブラウザ上で表示され...
• CSSで直下の子要素のみに適用させたい場合の記述方法
  CSSを記述していると、以前に指定したCSSが記述されたり、要素名のCSSが反映されたりと別の指定したCSSも一緒に読み込まれ、思うようにいかないことがあります。今日はそんな中でCSSでタグの直下にくる子要素にのみ、CSSを適用させたい場合について記述していきたいと思います。7月9日記事 目次 CSSのおさらい 子要素のみを指定するためには、 を使う まとめ CSSのおさらい div id="main"の中にあるp要素に対して指定したい場合は次のように記述することでできると思います。 HTML部 !DOCTYPE HTML html head meta charset="utf-8" title 子セレクター指定の練習 /title ...
• CSSでグラデーションその1
  グラデーションについて記述していきます。2015年5月25日記事です。 目次 グラデーションとは グラデーションのコツ（色の勉強？） 綺麗なグラデーションの例 汚いグラデーションの例 背景色のグラデーション 今後メンテナンスしやすいように記述するコツ とにかく全部対応させたい それぞれの表示を確認してみる。 IE(11.0) GoogleChrome(43.0) Firefox(38.0) Opera(29.0) 謎が残る グラデーションとは 色が連続的に変化すること。 一昔前、webページ制作の時のグラデーションの作り方は、幅10px×高さ60pxなどの画像でグラデーション画像を作り、CSSのbackgroundでその画像を...
• CSSで隣接セレクタを使い、見出しタグ(h1)タグとpタグの間を設定する
  CSSを書いていると、見出しタグ（h1タグなど）の下にpを書きたい場合、または、pを書いた後に再び見出しタグに戻りたいときはよくあると思います。 そんな中で、隣り合うタグで、それぞれの間隔を指定したい場合どうすればよいのか隣接セレクタ、兄弟セレクタ（＋）を使った記述をしていきたいと思います。8月16日記事 イメージ 目次 隣同士になった場合にのみ適用させる方法 コード まとめ ^ 隣同士になった場合にのみ適用させる方法 例えば、上のようレイアウトの場合見出しタグh1の次にpが来ます。この隣同士になった場合兄弟セレクタ(+)を使ってh1の次にpが来る場合の時にpに適用させる方法は次の通りです。 h1 + p{ 　　　/*pの要素に適用される*/ 　　　margin-top 25px;など } ...
• HTML5とCSS3とは
  目次 HTMLとはなにか？ CSSとはなにか？ HTMLとCSSを使って HTML5で書かれたサイト集 HTMLとはなにか？ HTMLとは、Hyper Text Markup Languageの略であり表やグラフ、図、画像や動画、他のページへのリンク など、様々な表現方法をテキストに記述する事ができるマークアップ言語のことをいいます。 (※マークアップ言語とは、コンピュータ言語の一つであり、段落などの文章の構造、文字の大きさなどの見栄えに 関する指定を文章とともに記述していくための言語です。) ウェブページを作成していく際にこれを使用 していきます。 文法チェックサイト：http //validator.w3.org/ CSSとはなにか？ Cascading Style Sheetsの略であり、 HTMLなど...
• CSS3の基本
  ここではhtmlに読み込ませたCSSを具体的にどのようにして記述していくかを述べていきます。 CSSの基本概要 セレクター名idとclassの違い CSSの運用面の実際 CSSの基本概要 まず、一行目に @charset; "utf-8"; と記述します。これによりこのスタイルシートがどの文字コードで書かれたものなのかを宣言します。 基本的にCSSは セレクター名{プロパティ名 値;} といった具合にどの部分に対する装飾なのかを書いていきます。 これは 何に対する❓{何の指示か❓：　どれくらい❓;} といった意味をそれぞれ持ちます。 セレクター名idとclassの違い タグにてよく、 div id="nice" ...
• CSSで見出しデザイン1
  CSSで見出しデザインをまとめていきます。2015年5月28日記事 目次 見出しの基本構成 見出しを色々作ってみる コード 解説 見出しの基本構成 paddingやpadding-left font-family background borderやborder-left,border-bottom border-radius box-shadow といったものを使えば色々とできます。 見出しを色々作ってみる 見出しデザインを作りました。 色々なクラスの使い方を知ってもらうために、h1セレクターの基本プロパティをまず作り、5通りのスタイルの形と1グラデーションのクラスを作りました。それらを組み...
• jQueryを学ぶ1
  Photoshopの記事を書こうとしたのですが、編集後の画像があまりかっこよくなかったので少し後回しにし、jQueryについて執筆していきたいと思います。前回記事jQueryの読み込みからさらに進めていきたいと思います。読む人の対象は HTML+CSSがある程度わかっており、WEB上にあるjQueryのサンプルコードをいじって設定してみたものの、もう少し深く知りたいや、自分で実装してみたいという方向け です。7月11日記事 目次 jQueryを学ぶ手順 jQueryでCSS記述をしてみる jQueryを実行させる環境を整備する。 jQueryを呼び出す基本構文を作成する jQueryでCSSのなにか記述をしてみる。 pを赤字 #mainの中のpを赤字 まとめ jQuer...
• CSSのリセット
  IE、Firefox、GoogleChrome、Opera、Safariなどさまざまなブラウザが存在します。しかし、各ブラウザで初期段階で持っているCSSがあり、ブラウザの表示を悩ませてくれます。このようにならないためにも、多くのWebサイトはreset.cssというシートを作り、初期化しています。今回はこの初期化についてまとめていきます。 html5doctorのreset.css その他のCSSリセット html5doctorのreset.css 有名なところとして、Richard Clark氏のCSSがあります。このCSSを自分の読み込みたいCSS以前に読み込ませます。 ※以降に読み込ませてはいけません。自分の定義したCSSのほとんどがリセットされます（笑） 解説ページ：http //www.html5-memo.com/firs...
• jqueryで要素の移動～直前の要素、親要素、子要素～
  jQueryでボタンが押された時にその近くにある要素に対して表示を操作する方法について考えていきたいと思います。 お題は以下のイメージ図にあるように、あいうえお等が書いてある要素に対して表示、非表示を考えていきます。12月6日記事 イメージ※わかりやすいように背景を色付けしてあります。 目次 要素の指定 コード（親要素のひとつ前の要素の子要素を指定したい場合の例） まとめ 要素の指定 要素の要素の指定をまとめると、 prev()1つ前の要素 next()1つ次の要素 children()すべて子要素 parent()すべての親要素 siblings()すべて兄弟の要素 となります。 コード（親要素のひとつ前の要素の子要素を指定したい場合の例） HTML ...
• jQueryとCSSでメニューなどのスクロールしたらついてくるエリアを作る2
  前回記事CSSでメニューなどのスクロールしたらついてくるエリアを作る1では一番上にある部分をスクロールしてもついてくる状態にしました。 今度は途中にあるメニュー部分などをスクロールしてもついてくる方法について考えていきたいと思います。12月3日記事 イメージ スクロールする前スクロールしてnav部分をすぎると？こんな感じでナビ部分だけが残る 目次 コード まとめ コード HTML !DOCTYPE HTML html head meta charset="utf-8" link rel="stylesheet" type="text/css" href="reset.css" link rel=&...
• CSS3のarticleタグと隣接セレクターを使って間隔を調整
  前回記事、CSSで隣接セレクタを使い、見出しタグ(h1)タグとpタグの間を設定するのHTML5的なバージョンを書いていきたいと思います。8月17日記事 イメージ 目次 2つ目以降のarticleタグにmargin-top 25pxを適用したい 二番目にくるもの以降間隔をあけていきたい場合 コード まとめ 2つ目以降のarticleタグにmargin-top 25pxを適用したい articleタグでmargin-topなどとすると、最初のarticleタグのほうも上側が空いてしまいます。 2番目にくるもの以降、間隔を設定したい場合はarticle同士で隣接セレクターを使います。 二番目にくるもの以降間隔をあけていきたい場合 二番目にくるもの以降間隔をあけていきたい場合CSSに...
• CSS3で画像を領域内に上下中央でフィットさせる方法
  CSS3で中の画像をボックス内にフィットさせる方法をまとめていきます。6月19日記事 イメージ（両方とも300×300のボックス） 目次 大きすぎる画像を常に枠内に収める方法 コードを書いてみる。 画像を入れてみる CSSで対策 小さい画像を入れてみる。 まとめ 大きすぎる画像を常に枠内に収める方法 画像が大きすぎるのを枠内に収める方法としてimgのwidthを100%にする方法があります。 しかし、その方法では縦がはみ出てしまう場合があります。指定された枠内にフィットする方法をまとめていきたいと思います。 コードを書いてみる。 次のデザインで、次のコードがあったとします。 イメージ HTML部 reset.cssを読み込んでいま...
• transformプロパティ
  このページではtransformプロパティの使い方について解説していきます。 transformプロパティは様々な活用方法を持っているので少し解説が長くなってしまいますが、頑張って一緒にマスターしていきましょう。 (※以下ではx軸は右を正とする水平方向軸、y軸は下を正とする垂直方向軸、裏から表へ向かってくる画面垂直方向をz軸の正とします。) 目次 2D(平面空間)におけるtransformの全体像 2D(平面空間)におけるtransform関数 skew()関数 rotate()関数 3D(立体空間)におけるtransform perspectiveプロパティ その他の3D空間における細かいプロパティ perspective-originプロパティ transform-originプロパティ ...
• HTMLとCSSで進捗バーを作る1
  進捗バーをHTMLとCSSで作っていきます。10月10日記事 イメージ 目次 作成方法は主に2通り HTMLだけで作る HTMLとCSSで作る 両者のコード まとめ 作成方法は主に2通り HTMLだけで作る progressタグというものがあり、それを使って作る。インラインセマンティック要素という種類にはいります。基本形は progress value="40" max="100" /progress HTMLとCSSで作る position relative,absoluteとz-indexを組み合わせて黒い背景に緑のバー的なイメージで作っていきます。 両者のコー...
• CSSでカーソルの形を変更する
  リンクタグの場合は自動的にカーソルの形が変わりますが、jQueryの使用時にdivのboxなどに合わせた時にカーソルを変えたい時があります。そんな時にCSSでカーソルの形を変更する方法を記述していきます。11月15日記事 目次 cursorプロパティ コード まとめ cursorプロパティ cssにはcursorプロパティが存在します。それを変更していきます。 コード HTML !DOCTYPE HTML html head meta charset="utf-8" link rel="stylesheet" type="text/css" href="reset.css" ...
• PHPでMySQLへ大量のデータ挿入
  PHPからMySQLへ大量のデータ（フィールド）挿入をしていく方法について記載していきます。フィールドの内容や数は決まっている時に、UPDATE文を使って、その内容を更新していきたいという場合どうすれば効率的かを書いていきます。まずはINSERT文からです。6月28日記事 目次 色々方法があります。 ExcelでCSVファイルを作り、phpMyAdminを使ってCSVファイルを挿入 CSVファイルを読み込んで配列に入れて挿入 PHP等でINSERTクエリを作り、データをループで作っていき、SQL文を発行する。 PHPでINSERTクエリを作る テーブル作成 データ挿入用PHP 色々方法があります。 ExcelでCSVファイルを作り、phpMyAdminを使...
• PHPでオブジェクト指向入門11～似たようなクラスは二度と書かない(継承)～
  手続き型ではなく、オブジェクト指向で書く利点として、コードの保守性が挙げられます。 手続き型では、似たようなコードがあると、 「あー、またあのコードか。じゃあコピペして少し変えちゃえ」という考え方が当然でてきます。 （そういう風だとプログラミング能力は上達しないのですが、時間的に、人間的にそうなってしまいがちなのは事実だと思います。） そんな中で、似たようなものがあるのならば、classの内容を引き継ぎ（継承）し、再びまたclassを定義していけば、簡単に再利用でき、 保守性も増します。今回は、四角形の面積と三角形の面積を出すということを考えていきたいと思います。11月8日記事 目次 継承するもの コード まず三角形の面積プログラムを書きたい場合どうすればよいか？四角形にも対応できるようにチェックのみするプログラムを書く。 では四角形の面積プログラ...
• html5+css3で基本的なページをつくってみよう！②
  前回のページhtml5+css3で基本的なページをつくってみよう！①に読み込ませたcssを記述していきます。 @charset "utf-8"; /*初期設定*/ body { margin 0; padding 0; font-size x-large; background-color white; } /*ページの枠組み*/ #page { margin 0 auto; width 900px; height 700px; background-color #ffffff; background-color rgba( 255, 255, 255, 0.55 ); box-shadow 1px 0px 10px 5px #888888; } header { width 900px; height 50px;...
• HTMLとCSSで使う数字の単位の関係
  フォントのサイズを決めているもの 「よし、この部分のフォントのサイズは　2　にしよう！」 他の人からこのように頼まれた場合、あなたはどうしますか？単位について知っておかないと、 「いや、2ptは小さすぎるだろ…、どうすれいいんだろう…」などと考え、要求に答えることができませんね。 そこで今回は単位について記していきたいと思います。 Webページには多数の文字があり、強調したい部分には大きい文字、ついでの部分には小さい文字など、レイアウトが考えられると思います。 PCの画面に表示されるということは、単位もPCの画面が基準となります。 それが　「px(ピクセル)」　です。みなさんのPCにも解像度があると思いますが、それはpxあたりで表現します。 1920×1080や、1280×720 ,1024×768など、Webページはいろいろな人が見るものだから、それを想定して考えることが...
• HTML5でのタグ使用の注意点
  HTML5でのタグ使用の注意点について考えていきたいと思います。 HTML5のタグを少し知れば、表示もあまり変わらないような記事を作ることが可能になってきます。 しかし、それでは文章構造としてはよいとは限りません。そんな中で、HTML5タグ使用の注意点について考えていきたいと思います。 見出しタグの注意点 imgタグの注意点 インライン要素を持つタグの中にブロック要素を持つタグを入れない。 ul li、ol liなのかdt、ddなのかを適切に使う 内容強調はstrongタグやemタグを使う。 改行を連続して使わない。 blinkタグやmarqueeタグは使わない 見出しタグの注意点 h1、h2、h3、h4、h5利用の注意点をまとめていきます。見出しタグは重要なタグです。もし見出しをimgタグ（画像）を使っ...
• 付箋のようにクリックORタップしたら透過する仕組みを作る2
  前回記事付箋のようにマウスを載せたら剥がされる仕組みを作る1ではCSSのみで実装していましたが、今回はjQueryも使って実装していきます。11月13日記事 イメージ クリックする前クリックした後 目次 概要 コード まとめ 概要 今度はjQueryのclickイベントを使って行っていきます。 コード HTML !DOCTYPE HTML html head meta charset="utf-8" link rel="stylesheet" type="text/css" href="reset.css" link rel="stylesheet&qu...
• CSS3で画像をフェードインさせたりする。
  CSS3の機能を使って画像をフェードインさせたりする方法を紹介したいと思います。色々なものをフェードインさせたりできるのだろうかという挑戦もかねて作っていきます。6月9日 目次 まずは簡単なサンプルから コード 画面いっぱいの背景画像をフェードインさせてみる。 参考サイト まずは簡単なサンプルから こちらの画像をフェードインさせたりフェードアウトさせたりしてみます。 イメージ １ ２ ３ まずはこんな感じに１～３をいったり来たりを作ってみる。 コード HTML部 !DOCTYPE HTML html lang="ja" head meta charset="utf-8&qu...
• phpでMySQLへフォームを使って挿入
  前回記事MySQLでテーブル作成2ではフィールドの挿入等の確認をしました。次にPHP側でコードを書いてデータベースへ挿入です。色々とセキュリティに関する事項がでてくるので、執筆が長くなるかもしれませんが、ご了承ください。6月2日記事 目次 掟 ユーザが入力したJavaScriptを実行させないhtmlspecialchars関数 MySQLへデータを正確に処理させ、データベースの内容を改ざん削除させないSQLインジェクション対策 PDOの利用 フォームを作ってみる 確認ページ 完了ページ 現在の風潮 感想 掟 phpでMySQLとの連携プログラムを書く際に、注意しなければならない点がいくつかあります。その中で、2つに絞ってまずは話していきたいと思います。非常に最初は混同し...
• CSSデザインのための色の基礎知識
  目次 色相環 それぞれの色の持つイメージ 今回はWebページをデザインしていくにあたって「どの色と色を組み合わせたら見栄えがよくなるのか？」といったことについて記述していきます。 みなさんは色の配色について考えるとき何を意識していますか？ 例えば、Webページを作成する時に同ジャンルの他のWebページを参考にしたりして「どの情報をどこに配置するべきか？」といった事を参考にするように色も様々なページを参考にするといいかも知れませんね。 「色相」と「トーン」を考えると、何かイメージカラーがある状態で配色を考えたりしやすくなりますよね。 色相という言葉が出てきましたが、色には「相性がいい色」「相性が悪い色」「二つの色を仲介する色」などがあります。 配色に迷ったときはその事を考えながら進めると進めやすくなります。 色相環 下の図の事を色相環と言...
• jQueryを使って、windowの横幅サイズに応じてタグを追加したり内容を変更したりする。
  ウインドウの幅に応じてタグを追加したり内容を変更したりする方法について考えていきます。12月10日記事 目次 横幅で表示内容を変えたい 参考になりそうなnicepaper記事 ウインドウの幅を取得 コード 解説 横幅で表示内容を変えたい PC画面ではたくさんの情報を表示したいのに対し、スマートフォンではそんなに情報を表示したくない時があります。 そんなとき、状況応じて色々と処理を変えていく場合を考えていきます。 参考になりそうなnicepaper記事 HTMLタグをデバイスごとに、javascriptとjQueryで振り分け jQueryとCSSでメニューなどのスクロールしたらついてくるエリアを作る2 ウインドウの幅を取得 ウイン...
• tableとlistについて
  リスト(ol,ul,li)と定義型リスト（dl,dd,dt）とtableとの違い リスト(ol,ul,li)の使い方 定義型リスト（dl,dd,dt）の使い方 表(table)の使い方 リスト(ol,ul,li)と定義型リスト（dl,dd,dt）とtableとの違い ウェブページのコンテンツ部分がひとまとまりになるような部分（料理の材料、料理の作り方、更新情報、Q A、データの集計）の話をします。 まず、一番最初に持っておく簡単なイメージは ulやol⇒箇条書きなどをつくるためのタグ（例：料理の材料や料理の作り方） dl⇒定義された用語などを説明するタグ（例：更新情報やQ A） table⇒表を作成するためのタグ（例：データの集計、ウェブメールの受信メール一覧） リスト(ol,ul,li)の使い方 まずは、よ...
• CSSのline-heightで単位を指定してはいけないのか？
  文章を記述していると自動的に改行されたときに、行間を変えるCSSプロパティとしてline-heightというものがあります。line-heightの使い方には少し注意が必要です。そのことについて書いていこうと思います。6月8日記事 多くのサイトを見るとと ある条件下なら、単位を付けなく記述する例が好ましい ようなのですが、その条件下で実行してみるも表示は単位を付けてもつけなくてもかわりませんでした・・・。あれ？・・・・・・。うーん。 色々とWEBを見るとemタグと単位のemが混在している様子・・・ どんなことをしたかでも話していきたいと思います。 目次 line-heightにpx指定はいけない。好ましくない例。 emが主流だったが・・・これで本当によいのか？ pxやemや%より単位を指定しないほうが望ましいらしい！？ 比較してみるも...
• CSSを確実に読み込む方法
  CSSを変更してF5キーを押しても時々変更されない場合があります。ブラウザにキャッシュ機能が働き、表示を高速化するためにCSSを読み込んでいない場合があるからです。そんな中確実にCSSファイルを読み込む方法をご紹介していきたいと思います。6月24日記事 目次 通常読み込み 必ず読み込むためにファイル名のあとにパラメータをつける .html環境下では .php環境下では 通常読み込み 通常はhead内に head link rel="stylesheet" type="text/css" href="css/style.css /head と記入していく方法が一般的だと思います。しかし、この方法では、ブラウザのキ...
• HTMLとCSSで進捗バーを作る3
  HTMLとCSSで進捗バーを作る1やHTMLとCSSで進捗バーを作る2の続きです。今度はHTML5から追加されたmeterタグを使っていきます。11月9日記事 イメージ 目次 meterタグ コード HTML CSS まとめ meterタグ インラインセマンティック要素にはいり、インラインとして分類されています。そのため文章中に埋め込むことも可能ですが、ブロック要素の中に入れていきます。（display blockでやってももいいけどね。） コード HTML !DOCTYPE HTML html head meta charset="utf-8" link rel="stylesheet" type=&qu...
• CSSで縦書き開発1
  CSSで縦書き開発をしていきたいと思います。11月4日記事 イメージ 目次 概要 Javascriptで実装する。 CSSで実装する。 コード 結果 まとめ 概要 縦書きを実現する際、レスポンシブデザインのことも考えないといけないですし、PHPやRUBYとのプログラム言語の兼ね合いも考えないといけません。 また、プリントアウトする際の調整も考えなければならないかと思います。 Javascriptで実装する。 h2v.jsや竹取.jsやnehan.jsなどのライブラリを使って実現することもできます。メリットやデメリットはこちらをご参照ください。 CSSで実装する。 CSS3ではwriting-modeというものが実装されています（ただ...
• 画像(ボタンの画像)を使用したメニューの作成
  目次 画像を使用したメニューの作成 全画像のメニュー 画像を背景にしたメニュー 画像を使用したメニューの作成 CSSでの表現もとても大切ですが、どうしてもCSSでのフォントでは満足がいかない、あるいは意図したフォントがうまく表示されるかわからない、この画像を使ってメニューを作りたい、という事が起こります。 そのような場合に備えて画像を使ったメニューの作成方法を解説していきます。 今回は全画像(文字も含めた)メニューと画像を背景にしたメニューの作り方を解説します。 全画像のメニュー いずれの画像も独立していてリンクが張られている状態です。 HTML div id="imagenavi" ul li a href="#" img...
• margin、border、paddingの違いについて
  ここでは、margin、border、paddingの基本的な使い方について記していきます。 想像してみてください。デザイン性の高いWebページの条件とはなんでしょうか。 …答えはいくつかあると思いますが、その中の１つに「読みやすさ」があると思います。 CSSのmargin、border、paddingを使って文字や画像、レイアウトなどの距離を定義します。 文字や画像、レイアウトなどのタグをHTML上にのせた場合に、その「要素の内容」からとなりの要素までの距離について、 CSSの中でmargin、border、padding で定義してゆくのです。 まずはこちらの画像をご覧ください。 border、padding、marginを理解するにはこの図が分かりやすいのかな、と思います。 これで理解された方は戻るボタンを押していただいても大丈夫です。 注意すべき点 ...
• Photoshopで図形に枠線を描く
  Photoshopで編集した画像に枠線を描いていきたいと思います。パワーポイントのように図形を書いたら、図形の塗りつぶし「赤」、枠線「緑」というようなやり方は装備されていません。作成イメージとしては、枠線を引きたい領域を選択し、それ以外との境界線を描くことで、枠線が書けます。6月25日記事 イメージ 目次 キャンバスを適当に作成し、背景色を塗りつぶす 図形を描く 新規レイヤー作成 適当に多角形ツールから図形を選択し、描いていく レイヤーを選択し、境界線を描く まとめ キャンバスを適当に作成し、背景色を塗りつぶす [ファイル]→[新規]を選び適当にキャンバスサイズを選択する。 背景色の塗りつぶしはレイヤーに図形を書いてもよいですが、レイヤーパレットの...
• @wiki全体から「疑似要素を使ってCSSのみで三角形をつくる方法」で調べる

更新順にページ一覧表示 | 作成順にページ一覧表示 | ページ名順にページ一覧表示 | wiki内検索