画像や文字を半透明にするには、今まではpngで書き出してましたが、それらはcss3で出来るようになりました。便利ですねー。
|
1 2 3 4 |
<section> <h1>見出し</h1> <p>テキスト</p> </section> |
sectionに背景#fffでopacity:0.4にするとこうなる。
sectionの中にあるhlとか画像とか全部が半透明。
文字や画像はそのままで、背景色の白だけ半透明にするには 続きを読む
以前「WordPressのソースコードを見やすくしたい！」という記事を書いて投稿しました。
その件について2013-07-26の勉強会でタカハシ先生が教えてくれました。
「Advanced Code Editor」というプラグインが良さそうですので、先ほど(2013-07-27)インストールして有効化しました。
参考にさせて頂いたサイトhttp://motoshige.net/blog/archives/3997
今回プラグインを探すのに「wordpress ソースコード」というキーワードを入力してたら、全くヒットしませんでした。
「wordpress テーマ編集 プラグイン」と入力したら、たくさん出てきました。
キーワード検索は、基本知識が必要ですね。コツというか。
—————————————
使用してみましたが、プラグインが重たいみたいなので、インストールしたままで無効にしました。2013-08-02
今日はyukoさんが体調不良でお休みです。暑い日が続きますので皆さんもご自愛ください。((“Ｑ(´▽｀｡)あおいであげりゅ♪
勉強会の概要
ランサーしょうじさんから先生にメールがあり、お元気でお仕事されているそうです。
安心しました。
勉強会の概要は
勉強会の概要は
でした。 続きを読む
phpでお問い合わせフォームを作る。
というのをやっています。だいたい出来たのですが問題点がいくつかあります。入力画面（contact.php)があります。そこで入力して「確認」をクリックすると確認画面(confirm.php)に行きます。その画面で表示されている内容でOKなら「送信」をクリックして指定した宛先に入力内容を送ります。もし内容を変更したい場合は、入力画面（contact.php)に戻り内容を入力しなおします。
|
1 |
<a href="contact.php">入力画面に戻る</a> |
上記の様にリンクすれば、入力画面（contact.php) に戻れますが、それまで入力したテキストはクリアーされてしまいます。「なんだよ～、電話番号の数字だけ変えたかったのに、全部消えちゃったよ！また最初から全部入力するのめんどくせ―！」となり、「申し込むのや―めた！」となる可能性があります。そうならない為にも、入力情報をクリアーせずに入力画面（contact.php)に戻るにはどうしたらいいでしょうか？
ブラウザの「戻る」ボタンで１つ前の画面つまり、入力画面（contact.php)に戻るという方法があります。これでやれば、入力情報はキープされます。ただし、「内容を編集する場合はブラウザの戻るボタンで戻って下さい」と書いておかないといけません。これは、カッコ悪いので避けたいところです。
ここでいい解決法があります。 続きを読む
本日は、デザインにおいて無限の可能性(大げさ？)を秘めた疑似要素 :before, :after を使ってみよう！の巻です。
htmlに手を加えずに、要素の前(:before)と後ろ(:after)にフェイク(疑似)の要素を追加出来るというものです。
これを極めますと、画像を一切使用せず疑似要素だけで作られたアイコンなど、かなり凄い事が出来るようです。
今回はbodyタグに:before, :afterの擬似要素を使い、ヘッダーとフッター部分に色をのせて境界線を作ってみます。
このサイトのヘッダーとフッター部分の薄いグレーの色の部分です。
ちなみにヘッダー部分を:before、フッター部分を:afterで指定しています。
続きを読む
今日もランサーしょうじさんとsa-kaさんはお休みです。。。 ｶﾞｰΣ(`･ω･Ⅲ)ｰﾝ
みんなで待ってますよー!!!ヽ(*゜∀゜*)ノ
勉強会の概要は
html5で作るWPオリジナルテーマ：3は時間がなくなったので次回以降に持ち越し。 続きを読む
お菓子がフラットデザイン？
今日もランサーしょうじさんとsa-kaさんはお休みです、、、（泣）
元気でいてくれたらそれでうれしいです、、、（泣）
はい、ということで勉強会の概要は
でした。 続きを読む
2013-06-14の勉強会で、やりました。
width:calcとsizing:border-boxという新しいものであります。
こんな感じ↓
|
1 2 3 4 5 6 7 8 9 10 11 12 |
width:calc(100% / 3 - 10px); /* -------- 100%を３で割って10px引くという意味。 +（たす） -（ひく） *（かける）も使える。 演算子の前後は、必ず半角あける。 ---------- */ -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; /* -------- borderの幅、paddingの幅もwidthのうちに入れてくれる。 ---------- */ |
僕のサイトにサンプルと説明をアップしました。
http://nobu-69.com/study/cluc_201306/cluc.html
今日は、高橋先生がお菓子（by カバヤ）をたくさん提供してくれました。
ランサーしょうじさん、sa-kaさんは今日もお休みです。。。寂しいな。。。待ってます。。。
勉強会の概要