サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
ノーベル賞
www.panmimi-d.com
【まとめ】「Twenty Twelve」をカスタマイズする前に知っておいたほうがいいこと、見ておいたほうがいいサイト! Word Pressを使い始めて2ヶ月たち、だいぶ慣れてきたのでサイトのデザインをリニューアルしました。 今回、デフォルトテーマ「Twenty Twelve」をカスタマイズしていくかたちで実装したのですが、カスタマイズを始める前に準備しておいたほうがいいことがたくさんあったのでここでまとめてご紹介したいと思います。 ファイル構成やレイアウト構造を知っておくと後々ものすごく楽になります! 最初に「Twenty Twelve」がどんな構造で出来ているかを確認しておくことが大事です。これを確認しておくだけで、作業が格段と早くなりますよー! ファイル構成を確認! まずは、どんなファイルで構成されているのかを確認しておきましょう。 以下のサイトに、詳細が載っています。 第1回 T
レスポンシブデザインの本や記事をみると、よく話題に出てくるのが読み込み時間の問題。最近だとligさんのブログでも話題にしていましたね〜。 レスポンシブデザインを制作するなら頭に入れておくべき基本事項7つ 基本的には「減らせるものは減らす!」ということだと思います。 そのなかでも特に画像問題。 HTML5/CSS3で表現の幅が広がり、Flashを使うサイトが少なくなってきたように、将来的には写真以外の画像を一切使わないようになればいいなーと期待しています(Canvasが出てきたってことはそう言う方向に向かっていると思うのですが…)。 ビジュアルデザイン用のプログラミング言語に、「Processing」というものがあります。どうやらHTML5のCanvas要素を使えば、この言語をWEBで利用出来るみたいです。 Processing.js基礎最速入門 昔この言語を使って遊んでいたことがあります
最近、reset.cssからnormalize.cssに移行したのですが、normalize.cssの内容がなかなか頭に入らないので全ての内容を書き写してみました。 すると、知らない要素や使ったことのないプロパティが出てくる出てくる! 知らないままだと不安なので、一つずつ調べてみました。今回はその中のいくつかをピックアップしてご紹介します。 ※normalize.cssはこちらからダウンロードできます。 normalize.cssのわからない記述を調べてみます! まずは最初に記述されているhtmlの設定です。 html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } font-familyはわかるのですが、text-size-adjust: 100%;…これ
サイトを制作する上で、配色を決めるのは意外と難しいですよね。 配色はサイトのイメージを伝えるのに大きく影響されてくるので、とても重要なところです。 そこで今回は、私なりの配色の決め方をご紹介します。 配色についての記事は検索するとたくさん出てきますが、難しいことは考えずに簡単に選ぶ方法です。 RGB?色相?彩度に明度…? これらの単語は、色の勉強をする上では基本となってくる言葉ですが、その話もここではしません。 色のことをちゃんと勉強したい!っていう方は、ぜひ別の記事を検索してみて下さいねー! まずは、文字の色を考えてみます Webデザインの配色を考えるといったら、デザイン全体の配色を思い浮かべると思いますが、まずは文字の色について考えてみましょう。 文字の色の選び方は、視認性を考えるとだいたい決まっています。 メインの文字は黒、リンクの色は青…これはどのサイトでもよく見ますよね。 もちろ
スタイルシートで要素を垂直・水平中心に配置する方法はたくさんあります。要素のサイズがわかっているか、わかっていないかでもかわってきますね。 今回は「これは使いそうだなー」と思った方法をご紹介します。 高さ・幅のわからないテキストを中心に配置する! テキストの高さ・幅はフォントサイズや文章の長さで変わるので、調べないとわからないですよね。 サイズがわからなくても垂直・水平にセンタリングする方法をご紹介します。 テキストを垂直にセンタリング positionをrelative(相対配置)にして親要素(ここでは.gray_box)の上から50%下に配置。 そうするとテキストの上のラインが中心になるので、テキストの高さ半分を上に戻せばテキストが中心にきますね。CSS3から使えるtransformで縦の軸(Y軸)を-50%で指定すれば上にあがります。 CSS3の使えないブラウザには対応してい
【jQuery】レスポンシブ対応!背景画像の切り替えが出来るjQueryプラグイン「jquery-bgswitcher」を使ってみました! WEBの勉強を始めて、わりと早い段階でJavascriptの勉強にも挑戦したのですが、難しいですねぇ…。 修得すれば表現出来る幅もすごく広がりそうなんですが、なかなかそこまでたどり着けません。 私のようにJavascriptがわからない、そもそもなんなのそれ?というWEB初心者でも簡単にリッチな動作を表現出来る魔法のプログラム…それがjQueryプラグインです! 配布されているファイルをダウンロードして、マニュアルのサイトに指示されている呪文を記述すれば簡単に魔法をかけられます。 「あのサイトのあの動き、どうなってるの?」「このスライダーすごくかっこいい!まねしたい!」…そんな気になるサイトを見つけたら、ソースを見てみましょう。jQueryプラグイン
毎日たくさんのコードを、実際に手を動かしながら勉強しているのですが、HTMLやCSSをいつも白紙の状態から書いているわけではありません。いつも必ず記述する部分は、テンプレートとしてそのままコピーしてから書き始めるようにしています。 インターネットで「HTML,CSS,テンプレート」と検索すると、HTMLとCSSのファイルを無料で配布しているサイトがたくさんみつかります。 高品質なデザインのものから、レスポンシブに対応しているものまでたくさんあるので、コードを見るだけも勉強になりますね〜。 今回はそういったデザインまで完成しているテンプレートではなく、HTML・CSSそれぞれのコードを書き始める際に、必要最低限は記述しておいたほうがよさそうなコードについて考えてみました。 レスポンシブ対応!HTMLテンプレート HTMLを書く際に、上記のコードをテンプレートとして使っています。 DOCTYP
私が出会ったWEBの情報やビビッと感じたアートな情報を、ゆるーく、時にはまじめにお届けします。レスポンシブデザインの本や記事をみると、よく話題に出てくるのが読み込み時間の問題。最近だとligさんのブログでも話題にしていましたね〜。 レスポンシブデザインを制作するなら頭に入れておくべき基本事項7つ 基本的には「減らせるものは減らす!」ということだと思います。 そのなかでも特に画像問題。 HTM... この記事の続きを読む »
模写をする習慣がついてから、公開されているいろいろなスタイルシートを見るようになったのですが、その中で気になる表記を見つけました。 .mt5{ margin-top: 5px; } .mt10{ margin-top:10px; } .text-left { text-align: left; } .text-right { text-align: right; } ↑こういう表記です。「common.css」とか「base.css」と名付けられたファイルの中に記述されていることが多く、見かけるたびにこれって業界ではよく使われているのものなの?と思いました。 この表記の意味はわかります。あらかじめわかりやすいクラス名でスタイルシートを用意しておいて、HTMLにクラス名を記述しレイアウトを組んでいく…というものですよね。私も「.clearfix」と名付けたクラス用意して同じ手法を使っています
このページを最初にブックマークしてみませんか?
『panmimi design | WEBデザインのお勉強、はじめてみました。』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く