月別アーカイブ: 2013年6月

疑似要素 :before :after の使い方

本日は、デザインにおいて無限の可能性(大げさ?)を秘めた疑似要素 :before, :after を使ってみよう!の巻です。

疑似要素 :before, :after とは?

htmlに手を加えずに、要素の前(:before)と後ろ(:after)にフェイク(疑似)の要素を追加出来るというものです。
これを極めますと、画像を一切使用せず疑似要素だけで作られたアイコンなど、かなり凄い事が出来るようです。

今回はbodyタグに:before, :afterの擬似要素を使い、ヘッダーとフッター部分に色をのせて境界線を作ってみます。
このサイトのヘッダーとフッター部分の薄いグレーの色の部分です。
ちなみにヘッダー部分を:before、フッター部分を:afterで指定しています。
続きを読む

2013-6-28 勉強会

今日もランサーしょうじさんとsa-kaさんはお休みです。。。 ガーΣ(`・ω・Ⅲ)ーン
みんなで待ってますよー!!!ヽ(*゜∀゜*)ノ
勉強会の概要は

  • 真中さんの質問。”phpでお問い合わせフォームを作る”
  • kanedaさんの質問。”table-cellはmarginが無効。でも隙間を作る方法”
  • パソコン倶楽部りんごと、サイト設計について

html5で作るWPオリジナルテーマ:3は時間がなくなったので次回以降に持ち越し。 続きを読む

phpでお問い合わせフォームを作る

今まで仕事でサイトを作る時、お問い合わせフォームはフリーのお問い合わせフォームCGIをカスタマイズしてましたが、wordpressをやるようになりphpの勉強もする様になったので、今回はphpで作ろうと思いやってみましたがうまくいきません。 続きを読む

2013-6-21 勉強会

お菓子がフラットデザイン?
今日もランサーしょうじさんとsa-kaさんはお休みです、、、(泣) 
元気でいてくれたらそれでうれしいです、、、(泣)

はい、ということで勉強会の概要は

  • 真中さんの質問、疑似要素について
  • フラットデザインについて

でした。 続きを読む

html5 time

timeタグを使ってみようと思います。(初めて)

更新日を記事に入れたいのですが、これでよいのでしょうか?

流行に終わらないフラットデザインのポリシー

フラットデザインって何?

最近のブームのはじまりはWindows8の「モダンUI(Metro UI)」あたりから。見た目の特徴としては、

  • 平面的:ドロップシャドウなどの3次元的な処理はしない
  • ミニマルな表現。グリッドや形状は正方形、長方形、正円などで構成され、角丸もグラデーションもほとんど使わない。
  • カラフルな色使い
  • タイポグラフィーを重視

ということ。ただし、見た目だけなら、似たデザインはありました。

続きを読む

hoverした時に疑似要素で画像やテキストを出現させる。

↑アイキャッチ画像の様に、hoverした時に画像や文字が出現するようにしたいのですが、どんなやり方がありますでしょうか?

ぱっと思いついたのはcssで疑似要素です。これでいけますでしょうか?
あとは、jQueryで適当なのがあるのかなあ。

よろしくお願いします。

2013-06-21の勉強会で「hoverした時に疑似要素で画像やテキストを出現させる。」が出来ました!

僕のサーバーにアップしました。タカハシ先生ありがとうございました!

http://nobu-69.com/study/after_201306/after.html

IE8対策

いろんなブラウザで確認しましたが、ie8は、ホバーもしてないのに↓こうなって(全部見えている)しまいます。(ちなみにie7はホバーしても疑似要素が出現しませんが、今回は切り捨てます。ie9はtransformが効きませんが、ホバーで疑似要素が出現するのでOKとします。)
ie8

ie8だけが読み込むie8.cssを作り以下を指定。

もとがこんな感じ

ie8用css

nav ul li a:hover:afterは上書きされますが、nav ul li a:afterの方は何にも指定がないので上書きされません。この場合どうしたらよいでしょうか?
気持ち的にはnav ul li a:after{all-clear}こんなのあったらいいなあ。

以下を追加することで無事解決!

firefox等に悪影響とかはありません

というわけで、ie8用にcssを作成して、それでどうにか問題解決するという作戦は無しになりました。そんな事をしなくても上記のコードを追加するだけで、解決したからで~す。

ブラウザ

現在僕は、仕事として4つのサイト制作を進行中です。

4人のクライアントさんの愛用しているブラウザの状況です。

1.safari,chrome(このクライアントさんはapple愛用者)
2.ie(このクライアントさんはwindousが好きで、何度か説明してfireFoxやchromeをすすめたが、やっぱりieを愛用している)
3.ie(2と同じ)
4.ie(このクライアントさんは、ブラウザって何?って感じ。ネット見るには「e」のマーククリックすればいいんですよね?….といった感じ。)

ウェブデザイナー同士で話していると、ie使ってる人なんているの~?ダサいよねー!という雰囲気になってしまいますが、実際いっぱいいるんです。

タカハシ先生はieをわりかし切り捨てます。それは、先生の制作ポリシーがポリフィルじゃなくて、プログレッシブ エンハンスメント(でしたっけ?)だからです。
先生の制作ポリシーです。ちなみにsa-ka君は仕事ではポリフィルが多いようです。

私達が、ただ先生の表面だけを真似して、ieユーザーは切り捨て!と、ウェブデザイナー気取りでいるというのは多少疑問に思います。なぜなら先生は、クライアントさんに、どうしてもieに対応させてほしいという要望があれば、あの手この手で対応できるスキルがあるからです。

ie対策できるけど、ポリシーとして切り捨てているのと、対応出来ないからとか、勉強するのが面倒くさいとかで切り捨てるのとでは、天と地の差があると思います。りんごでの勉強会はfirefoxを使ってますよね。ie対策はしていません。いちいちやっていたら作業が遅くなるので、効率的にそれで良いと思いますが、家で個人的に勉強する時はieの事も多少は考慮する様にした方が、今後仕事としてやっていくと考えているならば必要かなぁと思います。残念ながらieユーザーはたくさんいます。   はぁ~。

WP カテゴリーのリンク名を変更したい。

ナビゲーションのカテゴリーのurlが、メニューの名前ではなくカテゴリーIDなどで表示されているのが気になって、
メニューの表示名やカテゴリー名を変更して
固定ページ→固定ページの投稿オプション → カスタム構造を選択してパーマリンク設定をいじってしまいました。
ワードプレスが入ってるフォルダ名を入れるのかと思い、http://st-neverland.com/blog/と記入しました。
すると、投稿一覧と、記事の個別ページが表示出来なくなりました。
★★★調べたら、こんな記事を発見しました。
http://wp-exp.com/blog/permalink-settei/
★★★この作業が必要ですか?
http://www.adminweb.jp/wordpress/permalink/index2.html
パーマリンク設定をデフォルトに戻したら、http://st-neverland.com/?cat=7の様にurlが元に戻り、表示されました。
ftpで見てみたら、.htaccessファイルが作成されてました。
リンクのurlをhttp://st-neverland.com/カテゴリー名にしたければ、パーマリンクの設定が必要ですか?
倶楽部リンゴは、投稿名 カスタム構造に設定されてますね?
今から設定しても、投稿一覧と記事の個別ページが表示出来なくなりますよね?
どうしたら良いでしょう(@@)
でも、そんなに今はページないからやっぱり必要ないのでしょうか。

css3で簡単横並びレスポンシヴデザイン

2013-06-14の勉強会で、やりました。
width:calcとsizing:border-boxという新しいものであります。
こんな感じ↓

僕のサイトにサンプルと説明をアップしました。
http://nobu-69.com/study/cluc_201306/cluc.html

デザイニングインブラウザでFirebugを使う時のTips

FireBugであれこれやって、変更箇所をコピペする前に、「あれ、こっちのページではどうかな?」とリンクをクリックしてしまい、全ての編集がなかった事になり、うぉおおおおおおおおおとなった事がありますよね?
勉強中の場合は「ああ、神が練習する機会を与えて下さった」と悟りを開くのもアリですが、急ぎの仕事の場合はそうも言ってられません。
そんなFirebugの事故を未然に防ぐ方法を思いつきました。(既に誰かが思いついているでしょうが気にしません。)

方法1:全てのaタグにtarget=”_blank”を書いておく

こんな感じです。

これで、不用意にリンクをクリックしても、新しいタブが開くので「やっちまった!」事故が防げます。
もちろん、作業が終わった後で、「 target=”_blank” 」は置換して消しておきましょう。

方法2:jQueryで新しいタブでリンクを開くようにしておく

jQueryでちょろっとコードを書いておくと、上記の方法のように、後でaタグを掃除しなくても済みます。

この場合は、デザイン後に上記のscriptの記述を削除すればOKです。
それでは良いデザインライフを!(なんだそれ?)

今更聞けない!レスポンシブWebで役に立つ!6つのCSSリセット

レスポンシブWebデザインをしていると、スマートフォン向けに指定したCSSの値を、PC向けCSSではリセットしないと上手くいかない(?)のような場面に遭遇します。

そんな時、CSSの値に初期値指定してリセットする方法を知っておくと役に立ちます。
特に目新しいものはありませんがレイアウトをする上で、これからお世話になりそうなので自分用メモです。
これもよく使うとか、知っておくと良いよ!というものが他にもあったら教えていただけると嬉しいです。

「max-width」の初期値が「none」に対して、「min-width」の初期値は「0」です。
プロパティ名が似ているので同じ初期値を指定してしまいがちです。
間違えやすいポイントかと思いますので、注意が必要ですね。

あと番外編メモとして、リセットではありませんがIE6以外のブラウザ向けに指定を行いたい場合、下記のような記述を使うと便利です。
セレクタを「>」で区切る子セレクタを対象とした記述方法は、IE6には対応していないので、結果としてIE6以外のブラウザに向けた指定となるわけです。

IEの印刷プレビューについて

現在仕事で制作中のサイト。2年前に制作したサイトを部分的にリニューアルしています。
自分のサイトにテストでアップしてクライアントさんに確認してもらっています。

1つ指摘された事があります。
IEでの、下記のページの印刷プレビューが出来ないそうです。他のページは問題ありません。ちなみにクライアントさんはwindows7です。
http://nobu-69.com/test_site/nolimits201304/nyukaigo.html

僕も確認してみました.
windows xp でモードをie7にするとプレビューが出来ません。
windows7 でモードをie7にするとプレビューが出来ません。
その他(ie8,ie9)は問題ありません。どうやらie7で見た時だけ印刷プレビューが出来なくなるようです。

原因の検討がつきません。何が考えられるでしょうか?

よろしくお願い致します。

—————————————-
説明不足でしたので追記します。
ie7_preview
上記画像のように真っ白で何も表示されません。そして画面下の赤マル内の数字(ページ数を表す)の分母の部分が1,2,3,4,…….止まらなく増え続けます。
という状態です。

—————————————-
タカハシ先生のアドバイスを基に作業してみました。

①>1.他のサイトのページを印刷プレビューしようとしたらどうなるか?
 制作中のサイトの他のページは問題ありませんでした。
 問題があるのはhttp://nobu-69.com/test_site/nolimits201304/nyukaigo.htmlのページのie7で見た時のみです。

②>2.cssのmedia typeををscreenに限定したらprint時にcssは適用されなくなるはず。
 それでどうなるか確認。
cssが切れた状態でプレビューされましたので、指摘にある通りcssのどこかに問題があるのかと思い調査しましたが、おかしな所は見当たりません。

③対策としてhtmlのheadの中のcssのリンクを以下の様にしてみました。

そしたら上記の「説明不足でしたので追記します。」の真っ白で分母が止まらない状態に逆戻り。