nicepaper @ ウィキ

nicepaper @ ウィキ内検索 / 「レスポンシブデザインとスマホで確認した時の落とし穴」で検索した結果

• レスポンシブデザインとスマホで確認した時の落とし穴
  このページではレスポンシブデザインについて様々な方法を説明していきます。 レスポンシブデザインとは 一つのHTMLに対して画面のサイズ(正確には横の画素数)によってCSS３により別々のレイアウトに変える設計のなされたサイト を言います。 また、レスポンシブデザインをスマホで確認する時に陥りがちな落とし穴についても解説していきます。 OSを搭載した携帯電話であるスマートフォンの登場により、今後増々、様々なデバイスによって閲覧されるWebサイト作りは重要性を増していくと思われます。そんな状況に対応すべく登場したのがHTML5やCSS3と言っても過言ではないくらいでしょう。そしてより素早く全てのデバイスに対応したwebページを作るためには「より良いレスポンシブデザイン」の作成技術は必須は言えるでしょう。 そこでこのページでは、レスポンシブデザインを作成するための３つの方法と、メリット、デメリッ...
• HTMLとCSS
  ...名の付け方 レスポンシブデザインとスマホで確認した時の落とし穴 簡単なformの作り方 CSSで直下の子要素のみに適用させたい場合の記述方法 liタグの中にddが複数ある際の改行処理～インデントを1つ目のddに揃えたい～ シマシマのテーブルを作る。 CSSでフォントを指定する CSSでフォントをちょっとした工夫をして見やすくするver1 CSSでフォントをちょっとした工夫をして見やすくするver2 CSSでフォントをちょっとした工夫をして見やすくするver3 黄金比でフォントサイズをデザインする リスト横並びデザイン1 sectionタグで読み込むCSSを限定する 今風のfont-familyをあつめてみた CSSでclearfix CSSで隣接セレクタを使い、見出...
• レスポンシブWebデザインについて
  目次 レスポンシブウェブデザイン 練習 それぞれのデバイスの画面の大きさと解像度について レスポンシブウェブデザイン 今日はレスポンシブウェブデザインの基礎について書いていきたいと思います。 まずはレスポンシブウェブデザインの意味について。 レスポンシブウェブデザインとは、ひとつのHTMLでＰＣ、タブレット、スマートフォンなどの様々なデバイスに対応できるウェブサイトの作り方をいいます。 主にCSSで調整をしていきます。一番簡単な方法は@media(){}を利用する方法です。 これは、画面のサイズを指定して、画面のサイズが○○以下、以上であればこのスタイルシートを適用すると指定できるプロパティです。○○は()の中に入れます。(○○をブレイクポイントという)今回も実際の例を挙げて説明してみます。 練習 例）パソコンで閲覧す...
• レスポンシブデザインviewpointの意味
  スマートフォン向けの記事を書いていきます。レスポンシブデザインにおいて、viewpointを書かないと、iPhone6の場合、横幅が1080なので、1080で記述すると、PCサイトのように表示され文字が小さくなってしまう。 viewpointを指定することで、それが拡大されて見やすくなる。これがviewpointの設定です。今回はこのことについて記述していきたいと思います。11月30日記事 目次 HTML5リファレンス 色々と調べてみる 結論 コード HTML5リファレンス HTML5リファレンスには meta name="viewport" content="width=device-width, initial-scale=1, minimum-scal...
• column3～一日でカッコいいページを作る方法～
  今回は、かっこいいWEBページを一日で作ってしまう方法を勉強してみました。 「最近HTMLやCSSを全然書いていないな！！」と思い、HTMLを書こうと思いました・・・ しかしテキストを開いて書き始めてみるとなかなか進みません。(笑) そこでまたしても楽をしようとこの勉強をしてみました(´;ω;｀) step1 サンプルを探す 例えば、このページでは2カラムと3カラムのレスポンシブデザインのコードが紹介されています。 http //www.webdlab.com/labs/layout-r2/ その他にはこのようなページでもサンプルをダウンロード出来ます。 http //www.coolwebwindow.com/html5/ 検索エンジンなどで、「レスポンシブデザイン　HTML5　テンプレート」などと調べれば沢山出てきたりします。 それぞれのサイトによって様々な利用...
• Googleマップ、YouTube、電話番号(スマートフォン用)を埋め込む方法
  GoogleMapを埋め込む方法 YouTubeを埋め込む方法 電話番号を埋め込む方法 GoogleMapを埋め込む方法 例えば自分のお店のホームページを作ったときに折角なら地図をのっけたいですよね。 自分で地図を作ってみたりあるいは言葉で説明を書いておくのもいいですが、Ｇｏｏｇｌｅマップをそのまま超簡単に乗っける方法も存在します。 それでは以下の3ステップでやってみましょう。 1 Ｇｏｏｇｌｅマップを検索する 2 埋め込みたい場所の名称、住所を入力 3 印刷の隣にあるリンクをクリックしてウェブサイトへの地図埋め込み用 HTML コードをコピーしてhtmlの張り付ける。 4 ＨＴＭＬでサイズを好きなサイズに修正して、CSSでiframeを使ってマージン、位置などの詳細を指定 東京ディズニーランド(もっとも僕には全く縁のないまさに夢の国...
• レスポンシブWEBデザインテンプレート（スタイルシートで複数記述編）
  一番メンドクサイデバイス対応ですが、テンプレートを作っていきたいと思います。HTMLタグで分ける方法もありますが、CSSで分けていきます。10月9日記事 目次 HTML CSS スマホ（縦横共通）,iPad（縦横共通）,iPhone（高密度デバイス）,普通PC,高解像度PC スマホ（縦横別）,,iPad（縦横別）,iPhone（高密度デバイス）普通PC,高解像度PC まとめ HTML !DOCTYPE HTML html head meta charset="utf-8" link rel="stylesheet" type="text/css" href="style.css" ...
• bootstrap概要
  bootstrapの概要を記述。レスポンシブデザインができるCSSフレームワーク。3月20日記述。 目次 メインページ サンプルページ アイコン コンテンツ内デザイン JavaScriptコンポーネント bootstrapカスタマイズ メインページ http //getbootstrap.com/ サンプルページ http //getbootstrap.com/getting-started/#examples アイコン http //getbootstrap.com/components/ コンテンツ内デザイン http //getbootstrap.com/components/#dropdowns Jav...
• WEBの画像をラスターデータからベクターデータにする
  レスポンシブデザインにおいて、大きいウインドウや小さいウインドウに対応できるように、 ビットマップ画像を用意するとなると、サイズが大きい場合、ファイルサイズが大きすぎたりし、表示の時間が遅くなる。 そんな中で最近見直されてきたベクターデータのsvg形式の画像を表示させる方法について考えていきたいと思います。9月29日記事 目次 ラスターデータの限界 illustratorでベクターデータの作成 illustratorとphotoshpでキャンバスの大きさを16px×16px、フォントサイズ2ptなどの（極小サイズ）で文字を描いてみる まずはPhotoshop 次にillustrator コード 拡大縮小 まとめ ラスターデータの限界 ラスターデータと...
• 背景画像をブラウザいっぱいに表示しているCSS記述方法
  背景画像をブラウザいっぱいに表示しているCSS記述方法 背景画像をブラウザいっぱいに表示しているページをレスポンシブウェブデザインする-リスト 背景画像をブラウザいっぱいに表示しているCSS記述方法 ブラウザを拡大縮小しても背景画面は同じ画像で見せるようにする。 ＣＳＳだけでも背景画像をブラウザいっぱいに表示させる事は可能なのですね。 今日はその事について書いていこうと思います。 下のようなページを作っていきます。 この画面を、Ctrl+スクロールしていくと背景の画像はいっぱいに表示されたまま page部分(コンテンツ部分)のみが拡大縮小 していきます。 以下のような画面になっていきます。 上中央あたりに小さくなった黒い#page部分を確認することができると思います。 また、この背景に使われている画像はここのリンクより使わせていた...
• 簡単なウェブページ作成(２)-1
  各プロパティなどに関しての記事がかなり溜まってきたので、少しずつページ全体を作っていくという方向で記事を書いていこうかと思っています。 各サンプルいくつかのステップに分けて完成に近づけていこうと思っています。 またとても記事が長くなってしまう事が予想されるのでその場合は適時区切っていこうと思います。 ページ作成の手順 0、ウェブページの設計図を作る ワイヤーフレーム レイアウトの概要 シングルページ フルスクリーン タイル マルチカラム ページ作成の手順 webページ作成の手順は人それぞれ様々ですが、大まかに次のような手順で作成されていきます。 0、ウェブページの設計図を作る(完成形のイメージ) 1、レイアウト、基本的な構造をつくる 2、ボックスの中にコンテンツを埋め込んで...
• CSSで縦書き開発1
  CSSで縦書き開発をしていきたいと思います。11月4日記事 イメージ 目次 概要 Javascriptで実装する。 CSSで実装する。 コード 結果 まとめ 概要 縦書きを実現する際、レスポンシブデザインのことも考えないといけないですし、PHPやRUBYとのプログラム言語の兼ね合いも考えないといけません。 また、プリントアウトする際の調整も考えなければならないかと思います。 Javascriptで実装する。 h2v.jsや竹取.jsやnehan.jsなどのライブラリを使って実現することもできます。メリットやデメリットはこちらをご参照ください。 CSSで実装する。 CSS3ではwriting-modeというものが実装されています（ただ...
• CSSで見出しデザイン1
  CSSで見出しデザインをまとめていきます。2015年5月28日記事 目次 見出しの基本構成 見出しを色々作ってみる コード 解説 見出しの基本構成 paddingやpadding-left font-family background borderやborder-left,border-bottom border-radius box-shadow といったものを使えば色々とできます。 見出しを色々作ってみる 見出しデザインを作りました。 色々なクラスの使い方を知ってもらうために、h1セレクターの基本プロパティをまず作り、5通りのスタイルの形と1グラデーションのクラスを作りました。それらを組み...
• CSSで見出しデザイン2
  前回記事CSSで見出しデザイン1の続き記事です。 今回は疑似要素before,afterを使った見出しの制作方法をご紹介します。 こんなもの 目次 疑似要素before,afterをなぜ使う？ 疑似要素がある場合とない場合で作ってみる。 作り方 コード 作り方まとめ 疑似要素before,afterをなぜ使う？ 一般的な見出しはCSSでよく使われるプロパティ名を組み合わせただけです。例えばborder、border-left、border-bottom、border-radius、padding、padding-left、padding-bottom・・・。それらを組み合わせたり色を変えたりして作られています。しかし、その方法では、 簡単な丸を作ったり、三角形を作ったり、四角...
• CSSデザインのための色の基礎知識
  目次 色相環 それぞれの色の持つイメージ 今回はWebページをデザインしていくにあたって「どの色と色を組み合わせたら見栄えがよくなるのか？」といったことについて記述していきます。 みなさんは色の配色について考えるとき何を意識していますか？ 例えば、Webページを作成する時に同ジャンルの他のWebページを参考にしたりして「どの情報をどこに配置するべきか？」といった事を参考にするように色も様々なページを参考にするといいかも知れませんね。 「色相」と「トーン」を考えると、何かイメージカラーがある状態で配色を考えたりしやすくなりますよね。 色相という言葉が出てきましたが、色には「相性がいい色」「相性が悪い色」「二つの色を仲介する色」などがあります。 配色に迷ったときはその事を考えながら進めると進めやすくなります。 色相環 下の図の事を色相環と言...
• 黄金比でフォントサイズをデザインする
  フォントサイズで色々と迷うところはあると思います。そんな中で比率でフォントサイズをデザインをしていきたいと思います。 隣接するフォントサイズを1 1.618にするとデザイン性が向上します。 今日はそのような記事を執筆していきます。8月2日記事 イメージ 目次 フォントサイズ コード まとめ フォントサイズ reset.cssを読み込んでいる場合はfont-size 100%になっていると思います。それを基準とし倍率を指定していきます。 読み込んでいない場合はユニバーサルセレクタを用いてfont-size 100%にします。 *{font-size 100%} コード フォントサイズと余白を1.618倍していきます。 HTML !DOC...
• リスト横並びデザイン1
  横並びデザインを作るのが色々とめんどくさくなってきたので、テンプレート作りします。8月4日記事 横並びリストイメージ 目次 読み込むもの コード タイトルなしリスト タイトルありリストver1 タイトルありリストver2 まとめ 読み込むもの reset.cssどこからかとってきてください。当ページのCSSのリセットでもいいです。 あとは以下のコードが書いてあるスタイルシート コード タイトルなしリスト HTML部 div id="wrapper1" p タイトルなしリスト /p br nav id="menulist" 　 ul class="...
• Photoshopで文字デザイン2～影、シャドー編～
  前回記事Photoshopで文字デザイン1～影、ドロップシャドー編～の続きです。前回記事は文字の外側の影の内容でした。今日は二回目として、今度は文字の内側の影のデザインです。6月14日記事 イメージ 内側に影がある文字です。 目次 背景のキャンパス作成 Photoshopを起動し、新規作成 描きたい図形を長方形ツールの中から選ぶ 色を選択する 図形を描く さらに描いた図形の色を微調整する。 文字記入方法 新規レイヤー作成 文字の設定をする 色をダイアログボックスから選択します。 文字を記入していきます。 文字を微調整します。 影つけ 影の詳細設定 完成 背景のキャンパス作成 ...
• Navigationのデザイン
  今回はとても単純でシンプルな形のNavigationのデザインをしていきたいと思います。 まず最初に縦並び横並びの最もシンプルな形のナビゲーションを作っていきましょう。 以下のものを作っていきます。 縦並びのナビ(カーソルをのせるとトップの部分のように灰色になる) 横並びのナビ(カーソルをのせるとトップの部分のように灰色になる) 目次 縦並びのナビゲーション 横並びのナビゲーション コピペ用 縦ナビゲーション 横ナビゲーション 縦並びのナビゲーション まずはulとlinkを使ってHTMLに記述していきます。 HTML div class="menu" ul li a href="#" トップ /a /li ...
• Photoshopで文字デザイン6～テカテカ、サテン編～
  前回記事Photoshopで文字デザイン5～立体、ベベルとエンボス編～の続きで、今度は文字をテカテカさせるサテンについて書いていきたいと思います。木工用ボンド？で文字を書いて、乾かせたような質感（こんな説明でいいのか・・・？）を表現することができます。ただ、注意すべき点は サテンのみを使ってもあまり効果はなく、ドロップシャドーやベベルとエンボスとの組み合わせによって非常にデザインがよくなります。 6月18日記事 イメージ 目次 背景キャンバス作成 Photoshopを開き新規作成 長方形ツールを選び、色を選択する。 図形を描いていく。 雲形模様を追加し、拝啓にアナログ感を出す 背景を少し雲模様にする。 文字記入方法 新規レイヤー作成 横書き文字ツール１から2,3,4とフォント、サイズ...
• Photoshopで文字デザイン5～立体、ベベルとエンボス編～
  前回記事Photoshopで文字デザイン4～光る、光彩（内側）編～です。今度は、文字を立体的にみせるPhotoshopの文字デザインについて書いていきたいと思います。6月17日記事 イメージ 目次 ベベルとエンボスとは Photoshopを開き、新規作成 長方形ツールを選び、色を選択する。 図形を描いていく 文字記入方法 新規レイヤー作成 文字記入 移動ツールで調整 ベベルとエンボスを選択する ウインドウを開き調整する ベベルとエンボスの詳細設定 完成 まとめ ベベルとエンボスとは 文字や図形などのオブジェクトに立体表現ができる機能です。ベベル（外側）とベベル（内側）とエンボスの3通り...
• Photoshopで文字デザイン1～影、ドロップシャドー編～
  Photoshopでの文字デザインを数回にわたり執筆していきたいと思います。今日は第一回目として、文字に影を付けるという方法を行っていきたいと思います。細かいプロパティのところも解説できたらと思っております。6月13日記事 こんな感じのもの 目次 背景のキャンパス作成 Photoshopを起動し、新規作成 描きたい図形を長方形ツールの中から選ぶ 色を選択する 図形を描く さらに描いた図形の色を微調整する。 文字記入方法 新規レイヤー作成 文字の設定をする 色をダイアログボックスから選択します。 文字を記入していきます。 文字を微調整します。 影つけ 影の詳細設定 ドロップシャドーの使い道 ...
• radio buttonのCSSデザイン
  radioボタンを今風にするデザインに変えていきたいと思います。11月24日記事 イメージ 目次 コード まとめ コード HTML !DOCTYPE HTML html head meta charset="utf-8" link rel="stylesheet" type="text/css" href="style.css" title ラジオボタンデザイン /title /head body div class="sportschk" input name="sports" id="select1" value=&qu...
• Photoshopで文字デザイン7～文字にグラデーション編～
  前回記事Photoshopで文字デザイン6～テカテカ、サテン編～の続きで、今度は、文字にグラデーションをかけていく方法を書いていきたいと思います。9月24日記事 イメージ(枠つけたバージョン)※枠をつけるとより引き立ちます。こちらはPhotoshopで文字デザイン8～文字の縁に縁取り編～で記述していきます。 目次 背景のキャンバス作成 Photoshopを開き、新規作成 文字記入 横書き文字ツール 移動ツールで調整 グラデーションの設定 グラデーションの色を選択 左下の三角マークで開始色を変更 右下の三角マークで終了色を決定 グラデーションの変化位置を調整 完成 背景のキャンバス作成 Photoshopを開き、新...
• CSSでフォントをちょっとした工夫をして見やすくするver2
  前回記事CSSでフォントをちょっとした工夫をして見やすくするver1の別versionを作ってみます。 今度はtext-shadow使っていきます。7月30日記事 イメージ 目次 text-shadowを使う コード 表示 参考 その他リンク text-shadowを使う 構造を説明していきます。text-shadowにて文字に徐々にテキストshadowをかけてひろげていきます。0 0を最初の引数に指定することで、文字から左右上下等間隔にひろがっていきます。 HTML !DOCTYPE HTML html head link rel="stylesheet" type="text/css" href=&quo...
• CSSでフォントをちょっとした工夫をして見やすくするver1
  文字を綺麗に魅せるコツとしては文字の回りのギザギザ感をみせないことが重要です。 アンチエイリアスがかかっていない状態だと、あまりきれいには見えません。アンチエイリアスを知りたい方はphotoshopで特定の色を抜いたり消したりするを参照。 webkit系の中にはアンチエイリアスがかかるCSSもありますが、今回は別の方法で行っていきたいと思います。7月29日記事 イメージ（下側がアンチエイリアスかかっています。） 目次 文字を若干回転させるだけで綺麗になる？ コード 表示 まとめ その他リンク 参考 文字を若干回転させるだけで綺麗になる？ CSSのtransformプロパティを用いて文字を若干回転させることで文字に疑似アンチエイリアスがかかり、見やすくなってきます。...
• CSSでフォントをちょっとした工夫をして見やすくするver3
  今回も前回記事CSSでフォントをちょっとした工夫をして見やすくするver2の続きバージョンです。これを少し実装してみたところ、 本当にアンチエイリアスがかかっているのかわからなかったので、一応情報共有という形で執筆します。 7月31日記事 目次 CSS3のプロパティを使う webkit系 firefox系 コード 表示(chrome44.0) まとめ その他リンク CSS3のプロパティを使う CSSでアンチエイリアスをかけるプロパティは以下の通りです。現在IEは対応していないようです。 webkit系 -webkit-font-smoothing none; /*なし*/ -webkit-font-smoothing antiali...
• スマホ風セレクトボックス
  セレクトボックスをスマートフォン風にする方法について記述していきます。11月26日記事 イメージ 画像を適当に用意する 最近では、高密度デバイスが増えてきているので画像も少し大きめに作成します。CSSの方で調整してくれるので、arrow_b.pngの方は80×160、arrow_cの方は160×160でとりあえず作りました。 もう少し小さくてもいけます。 コード HTML !DOCTYPE HTML html head meta charset="utf-8" link rel="stylesheet" type="text/css" href="style.css" title スマートフォン風のセレクトボックス /title /...
• Photoshopで文字デザイン8～文字の縁に縁取り編～
  前回記事Photoshopで文字デザイン7～文字にグラデーション編～の続きで、今度は、文字に枠をつけていく方法を書いていきたいと思います。9月26日記事 イメージ 目次 背景のキャンバス作成 Photoshopを開き、新規作成 文字記入 横書き文字ツール 境界線の設定 境界線の詳細設定 完成 背景のキャンバス作成 Photoshopを開き、新規作成 [ファイル]→[新規]を選び大きさと背景色を適当に選んでいきます。別に背景色は透明でもいいです。 文字記入 横書き文字ツール 文字を記入するために「横書き文字ツール」を選び、1,2,3,4と選んでいきます。 文字の色は明度の高い色を...
• Photoshopで文字デザイン4～光る、光彩（内側）編～
  前回記事Photoshopで文字デザイン3～光る、光彩（外側）編～に引き続き、今度は文字の内側の光彩です。6月16日記事 イメージ 目次 背景のキャンバス作成 Photoshopを開き、新規作成 長方形ツールを選び、色を選択する。 図形を描いていく 文字記入方法 新規レイヤー作成 文字記入 移動ツールで調整 光彩を選択する ウインドウを開き調整する 光彩（内側）の詳細設定 完成 まとめ 背景のキャンバス作成 Photoshopを開き、新規作成 [ファイル]→[新規]を選び、適当にサイズを決定する。 長方形ツールを選び、色を選択する。 長方形ツ...
• Photoshopで文字デザイン3～光る、光彩（外側）編～
  前回記事Photoshopで文字デザイン2～影、シャドー編～に引き続き、今度は文字の外側の光彩です。文字を光っているように見せることができます。6月15日記事 イメージ 目次 背景のキャンパス作成 Photoshopを開き、新規作成 長方形作成 色選択 図形を描く 文字記入方法 新規レイヤー作成 横書き文字ツール 文字の記入 文字を微調整する 光彩のつけかた 光彩を選択する。 光をつける 光彩（外側）の詳細設定 完成 まとめ 背景のキャンパス作成 今度は、光が目立つよう暗めの色の背景にしていきたいと思います。 Photoshopを開き、新規作成 適当にサイズを決...
• ナビゲーションメニューに使えるマウスオーバー時の3つの表現方法
  色々なWebサイトでナビゲーションのメニュー部分にマウスを乗っけた時に、その部分が「勝手に変わった！」なんて経験ありますよね？ これには様々な方法がありますが、今回はCSSでできる方法を取り上げたいと思います。 マウスを乗っけることを「マウスオーバー」といいます。そのマウスオーバーの挙動を設定するプロパティを「hoverプロパティ」といい、今回はこれを用います。 hoverとは対象の画像や文字といったオブジェクトの上にマウスが乗っかった時に行う挙動を指定するcssの擬似クラスです。 今回は実際のWebページでの使用例の中でも、Javascriptを使わずにできる良い方法を３つ紹介します。 目次 hoverプロパティの基本的な使い方 １，マウスオーバー時に背景を透過させる ２，cssのbackgroundの画像を変更させる ３，overflowを用...
• jQueryを学ぶ4
  今回はjQueryで様々なコンテンツを作っていきたいと思います。マウスを載せた時に画像を拡大したり縮小したりするものを書いていきたいと思います。7月15日記事 イメージ（マウスをのせる前） イメージ（マウスを載せた後） 目次 nicepaper内にあるjQuery一覧（2015年7月15日現在） その他のコンテンツを作ってみる。 mouseover、mouseout（マウスオーバー、マウスアウト）したときのCSSデザインを変更する。その1 mouseover、mouseout（マウスオーバー、マウスアウト）したときのCSSデザインを変更する。その2 nicepaper内にあるjQuery一覧（2015年7月15日現在） 2015年7月15日（執筆時）時点で、こ...
• 画像処理
  　ここではPhotoshopやillustratorの画像処理及び画像加工について、記述してきます。 目次 Photoshop 画像加工編 2つの画像のうち画像の片一方を透過させ、もう一つの画像の上に載せる 画像と長方形を二つ並べてグラデーションをかける photoshopで一部分の色だけ変更する illustratorで文字の外側に光彩がある画像リンクを作る photoshopで古風でくしゃくしゃの紙を作る 小休憩 マスクの種類～クリッピングマスクとレイヤーマスク～ photpshopでシミのあるボロボロの紙を作る photoshopで特定の色を抜いたり消したりする Photoshopでキャンバスの作成と四角形で塗りつぶし Photoshopで額縁の作り方 Photoshopで図...
• HTMLタグをデバイスごとに、javascriptとjQueryで振り分け
  MediaクエリでブラウザごとにCSSでデザインを変更することはできるが、HTMLのタグの構造自体をデバイス毎に分けたい場合があります。 グローバルメニューなど、ブラウザとスマートフォンでHTMLの構造を変更したいという場合について考えていきます。10月12日記事 目次 振り分けしたいタグは全部js部分に記述 HTMLタグ Javascript及び、jQueryのコード iPhone,iPad,Android,PCの4つに分ける。 （iPhone,iPad,Android）と（PC）の2つに分ける。 まとめ 振り分けしたいタグは全部js部分に記述 全部同じブラウザで表示したい部分に関しては、そのままでいいですが、振り分けたい場合は div id="deviceAr...
• PHPでバグの直し方、デバッグの仕方2
  今度はformタグを利用時によく使われる関数var_dumpを利用していきたいと思います。8月25日記事 目次 var_dumpを利用する 値を直接代入する。 HTMLのソースも確認する。 オーサリングソフトを利用する var_dumpを利用する 変数を表示させるのにechoやprint関数を利用する以外に、var_dump関数を利用します。配列やPOSTメソッドやGETメソッドによるグローバル変数を出力させることにも便利です。 preタグを利用するとわかりやすいです。 例：フォームにて送信された内容が「どういう名前で」「どういうものが入っているのか」を表示させる。 送信側 !DOCTYPE HTML html head meta charset="utf-8" ...
• 画像(ボタンの画像)を使用したメニューの作成
  目次 画像を使用したメニューの作成 全画像のメニュー 画像を背景にしたメニュー 画像を使用したメニューの作成 CSSでの表現もとても大切ですが、どうしてもCSSでのフォントでは満足がいかない、あるいは意図したフォントがうまく表示されるかわからない、この画像を使ってメニューを作りたい、という事が起こります。 そのような場合に備えて画像を使ったメニューの作成方法を解説していきます。 今回は全画像(文字も含めた)メニューと画像を背景にしたメニューの作り方を解説します。 全画像のメニュー いずれの画像も独立していてリンクが張られている状態です。 HTML div id="imagenavi" ul li a href="#" img...
• ベンダープレフィックスとは
  ベンダープレフィックスについてお勉強していきます。 CSSで-moz-や-webkit-や-ms-や-o-という記述を時々見かけると思います。それとは何ぞやという話です。 ブラウザ間で挙動が違う！？ ベンダープレフィックスとは ベンダープレフィックスを付けないとできないものの例 グラデーションを表現するプロパティ(linear-gradient) テキストに影を付けるプロパティ(text-shadow) ベンダープレフィックス ベンダープレフィックスが必要か必要でないかを判断するためには・・・ ブラウザ間で挙動が違う！？ 世の中には様々なブラウザが存在します。InternetExplorer、GoogleChrome,Opera,Safari,Firefox,Netscape・・・。CSSを同じよ...
• PHPでオブジェクト指向入門12～サブクラスのメソッドはスーパークラスのメソッドを上書きできる(継承)～
  継承でどんなことが他にできるのかを考えていきます。11月10日記事 目次 メソッドのオーバーライド コード 作る Subclass.phpのSportsメソッドをコメントアウト まとめ メソッドのオーバーライド 同じメソッド名がスーパークラス（親クラス、基底クラスとも呼ばれる）とサブクラスにあった場合、サブクラスの方のメソッド名の方に適用される（上書きされる）ことが起きます。 これをメソッドのオーバーライドといいます。今回Sportsメソッドというものをスーパークラスとサブクラスに作り、上書きされる現象を確認したいと思います。 コード 作る Superclass.php ?php class Superclass{ public $...
• Photoshopで額縁の作り方
  Photoshopで額縁を作っていきたいと思います。ちなみに写真は近くの緑地でとった写真です。アジサイは雨が降っている時のほうが綺麗に撮れるそうです。6月22日記事 イメージ 目次 中に入る画像のサイズを作成する ファイルを配置する 写真の配置を合わせる 画像を全選択し、マスクを作成する 新規レイヤーを作成後背景にもってくる 背景レイヤーを適当に塗りつぶす 次にキャンバスを広げる設定をする 新規レイヤーを作成する 画像があるレイヤーの画像部分のみを選択する 次に反転させ、枠を選択できるようにします。 その部分について白で塗りつぶす レイヤースタイルから額縁のデザイン決定 完成 中に入る画像のサイズを作成する ...
• photpshopでシミのあるボロボロの紙を作る
  photoshopで海賊がもっているような宝探しの地図のような紙を作っていきたいと思います。 こんな感じのものです。 目次 新規作成 塗りと線を選び長方形を描く レイヤー1の操作 レイヤー1を少し汚したデザインにする。 ノイズを加え、ざらつき感があるものにする。 まわりを茶色に変色させ、日焼けた感じを出す。 レイヤーマスク追加 レイヤー1のレイヤーマスクの編集 完成 新規作成 塗りと線を選び長方形を描く 塗りと線を選択し（下側の丸）長方形を描く（上の丸） 描いた後が以下 レイヤー1の操作 カラーパレットの中から描画色と背景色を選ぶ の中から描画色はrgb（255,235,198） 背景色はr...
• photoshopで古風でくしゃくしゃの紙を作る
  photoshopでくしゃくしゃの紙を作っていきたいと思います。 こんな感じのもの 目次 ファイル新規作成 紙の色作成 レイヤー追加 しわ作成 しわの強さ変更 描画モード変更 色をさらに変更したい場合 完成 ファイル新規作成 [ファイル]→[新規]を選ぶ 今回は1600×1200を作るとする。 紙の色作成 塗りの色を選び、[長方形ツール]から[長方形]を選び、キャンバスに大きく覆いかぶさるように長方形を描く。 こんな感じになる。 レイヤー追加 しわを作るためのレイヤー追加 [レイヤー]→[新規]→[レイヤー]を選ぶ レイヤーを追加し確認する。 しわ作成 レイヤー...
• Photoshopでテクスチャデザインをパターンファイルとして登録する方法
  Photoshopで図形の背景や文字の背景などに既定に用意されているもの以外のテクスチャを利用したい場合があります。Photoshopではブラシ同様、フリー素材として公開されているものがあり、それをダウンロードして読み込めば利用可能になります。10月18日記事 イメージ 目次 素材の.patファイルを取得してくる。 適当に図形を描き登録する。 適当に長方形ツールから適当に図形を描く パターンオーバーレイを呼び出す 読み込み ファイルを選択 パターンを選択 完成 素材の.patファイルを取得してくる。 http //blog.starsunflowerstudio.com/2011/06/new-free-paper-patterns-for-photosh...
• headに入れる要素について
  今回はheadに入れる要素について説明していきます。 headはとても重要性が高いにも関わらず目に見える形でページに反映されないのでとてもわかりづらいです。そこで少しずつわかりやすく解説していきたいと思います。 headとはtitleやmeta要素などで構成されており、基本的にはtitleは必須です。また、メタデータ(文字コードや検索結果と同時に表示される文章説明、キーワードなどのそのページに関する情報)の集合です。 head meta charset="utf-8" title サンブル /title link rel="stylesheet" href="○○.css" /head これが最も簡単な形のheadでしょう。二行目の部分、meta charsetは文字コードを指定しています。 ...
• トップページ
  ページデザイン変更しました。2015年8月7日 html5+css3やプログラミング、PC関連についてまとめています。 時々、編集途中のページもあることをご了承ください。その場合は但し書きをしております。 間違いの指摘や感想、意見など、皆様のご協力もお願いしたく思っております。 よろしくお願いします。ご意見ございましたら jubilo917 at gmail.comまでご連絡ください。 目次 HTMLとCSS PHP JavaScript データベース 画像処理 サーバ設定と設定ファイル 開発お役立ちグッズやサイト wiki編集お役立ちページ 勉強系参考サイト 編集途中記事まとめ
• 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 な...
• Photoshopで画像の縁をぼかす
  WEBに載っている料理の画像は、画像の縁をぼかしていたり、額縁に画像をいれたりと普通の画像を編集して、載せています。今日は画像の縁をぼかす方法について記載していきたいと思います。7月5日記事 イメージ 目次 キャンバス作成 画像載せる 画像位置を調整 長方形選択ツールで選択 レイヤーマスクを作成 完成 キャンバス作成 [ファイル]→[新規]を選び、適当に幅や高さを指定します。 画像載せる エクスプローラなどをひらき、画像を領域にドラッグさせます。 ドラッグ後 画像位置を調整 Shiftキーを押しながら拡大縮小すると縦横比を維持できます。 配置後が以下。料理の写真をとる...
• Webページ制作に使える便利グッズ
  このページではwebページ制作時に利用できる便利なツールについて少しずつ紹介していきたいと思います。 目次 タグ入れ子ルール ピクセル定規 0 to 255 マウスが指している部分の色を確認する事ができるアプリ 角丸ボタンを自由に作成できるサイト ちょっとした時間短縮(？)に使えるかも知れないです。 ベンダープレフィックス対応状況サイト ajaxローディングマークgenerator font-awesome PHPでよく使う関数まとめ 記事 タグ入れ子ルール http //matome.naver.jp/odai/2137515842633207101 ピクセル定規 その名の通りパソコンの画面上に表示させて、ピクセルを測る定規として使うことがで...
• jQueryで横並びメニューのドロップダウン型メニューを作る
  メニュー項目が多すぎるとメニューのものをグループ分けし、そのグループを横並びリンクとして作っている場合があります。さらに、そのリストにカーソルを載せるとそれぞれから下にサブメニューがでてくることがあります。今日はそんなドロップダウン型メニューを作っていきたいと思います。7月21日記事 イメージ 大きなカテゴリにあてると下側にサブメニューがあらわれる さらにサブメニューにカーソルを合わせると色も変わる 目次 作る上で注意したいこと HTML記述 CSS記述 jQuery まとめ 作る上で注意したいこと デザイン決めとく。 メインメニュー、サブメニューのそれぞれの背景色と文字色） メインメニュー、サブメニューのhover時のそれぞれの背景色と文字色） 4種類...
• マウスを上にのせた時に下線が消える、色が変わるリンクの作り方
  a要素で何かリンクを作ったとします。 下線がついた状態の青文字が初期状態です。 しかし、世の中の多くのページではリンクにカーソルを持っていくと色が少し変わったり下線が消えたりします。これには以下の４つの疑似要素を使います。 link まだ訪問していないリンクのスタイル visited　訪問済みのリンクのスタイル hover　これはカーソルをリンクの上に持ってきた時のスタイル active　リンクをクリックしてから放すまでの表示スタイル これらの疑似要素を利用してリンクの表示方法に変化をつけていきます。 ちなみにtext-decorationを利用することで下線を表示させたり非表示にしたりできます。 ここでtext-decorationという言葉がでてきたので、text-decorationプロパティについて説明させていただきます。 text-decora...
• @wiki全体から「レスポンシブデザインとスマホで確認した時の落とし穴」で調べる

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