フレークの素 | Web制作・システム開発のCreativeFlakeブログ

こんにちは、クリエイティブフレークです。 Webサイトでパスワードを入力すると自動的にそのパスワードの強さを表示してくれるやつです。 そのシンプルで設置も簡単、オリジナルの強さに書き換えるのも簡単なjQuery「password_strength_plugin」の紹介と解説です。 ↓↓まずはjQuery本体↓↓ jQuery (Google Hosted) ※今回はダウンロードせずGoogleに読みに行かせています。 ↓↓そしてpassword_strength_pluginのダウンロード↓↓ password_strength_plugin まずはHTMLから!! <table cellpadding="2" cellspacing="0" border="0"> <tr> <td align="right"><label>ユーザー名 : </label></td> <td><input type="text" name="user_name" id="user_id"></td> </tr> <tr> <td align="right"><label>パスワード : </label></td> <td><input type="password" name="pass_word" class="password_test"></td> </tr> </table> ・tabelタグじゃなくてもリストでも、何でもいいのですが、ユーザー名とパスワードを入力させるinputボックスを作ります。 ・JavaScriptで必要となるので、ユーザー名のボックスにはidを付けておきましょう。 次にJavaScript↓ $(document).ready( funct...

こんにちは、クリエイティブフレークです。 撮った写真をきれいに補正する方法はいくつもありますが、今回はPhotoshopを使って、顔のシミやシワ、クマまできれいになかったことにする方法をご紹介。 今回使用するのは Human Skin Brushes というブラシです。 ファンデーションのような、コンシーラーのような、自然な感じで補正ができ、Photoshopにありがちなやりすぎ感のないのが特徴です。 ▼使用する元画像 ▼Photoshopで写真を開き、ブラシツールを選びます ※その前に Human Skin Brushes をダウンロードし、ブラシファイルを読み込ませるのを忘れずに。 ▼ブラシの種類で、ダウンロードしたブラシのどれかを選びます。 ※今回はブラシサイズを10pxにしました。写真の解像度や大きさによって、ブラシサイズを変更してください。 ▼ここからが本番。消したいシミのすぐ隣の肌の色を取得します。 ※描画色をクリックするとスポイトが現れるので、クリックすると選択できます。 ▼ブラシでシミの周辺を2,3回クリック ※この色を拾ってブラシで塗るという作業を、補正したい箇所にすべて行います。 ※今回補正するのに新しいレイヤーを１つ追加しました。 ※このとき、一気に色を変更するよりも、消したいシミの周りの色に少しずつ何度も合わせていくと自然な感じに仕上がります。 ▼補正後の写真 ▼並べて比較すると シミ、シワや目の下のクマ、ニキビまで自然にカバーすることができるので、Photoshopしすぎるのはちょっと……という場合にもオススメです。 Written by Creative Flake

こんにちは、クリエイティブフレークです。 コーディングの鉄板、リスト。 横ならびリストで文字を上下左右中央に配置したい、ってことは１度は遭遇したことがあるかと思います。 でも思うようにいかないんだけど……って人も必見、絶対にできます！ ↓↓↓まずは基本はこれだけ覚えましょう。↓↓↓ HTML <ul> <li><p>リスト１</p></li> <li><p>リスト２</p></li> <li><p>リスト３</p></li> </ul> CSS li { float: left; list-style-type: none; margin: 10px; } li p { background: #8AD5DF; border: 1px solid #eee; color: #fff; font-size: 18px; display: table-cell; width: 150px; height: 100px; text-align: center; vertical-align: middle; } "text-align"が左右中央で、"vertical-align"が上下中央。 そこへ "display : table-cell;" で要素の表示方法をtdのような要素に指定します。 あとは、このリストに好きな幅(width)と高さ(height)を指定すると、指定した大きさの上下左右中央に文字が来るはず。 たとえば、背景画像が決まってって、その中に文字を収めたい、ってときにも便利です。 他には文字の長さが決まってないとき、可変にしたいときにも、自動的に上下中央になってくれて便利です。 ありがちなミス 今回<p>タグを内包させ、リストに対して"float : left"を、その中の<p>に対して上下左右中央指定をしましたが、これを一緒のタグ内で行うのはNG。 この "floa...

こんにちは、クリエイティブフレークです。 かねてからサイトの運営管理を担当させていただき、お世話になっているHalu（ハリュウ）新越谷さまの三つ折りリーフレット（チラシ）のデザイン制作を担当させていただきました。 もともとは鍼（ハリ）を中心に施術を行うサロンさまで、国家資格保有の鍼師さんが担当してくれますよ。 サロンで担当していただける先生方はすべて女性の先生なのですが、みなさん美人です！ 女性専用サロンなので、男性の方は紹介が必要です。 チラシは両面カラーの３つ折り、今回はコート紙135kgのやや厚手の紙です。 印刷物もできるの？とよく言われますが通常、Web制作屋さん、ましてやシステム屋さんは印刷物はやらないところが多いと思います。 なんですが、Web＋紙を希望されるケースも比較的多く対応いたします。ぜひご相談ください！ 今回制作担当させていただいた「Halu（ハリュウ）新越谷」さまについて 埼玉県越谷市南越谷4-11-4 セントエルモ新越谷701 東武スカイツリーライン 新越谷駅西口、JR武蔵野線 南越谷駅南口より徒歩1分 URL : http://halu.co.jp 施術内容 : 美容鍼、エステ、痩身、ブライダルメニュー、ヨガ Written by Creative Flake

こんにちは、クリエイティブフレークです。 普段はあえてコードに組み込むことがあまりないtimeタグですが、このtimeタグには利点もたくさん。 timeタグっていうくらいだから、時間に関するタグなんでしょ？ってくらいは分かると思いますが、改めて考えてみます！ <time>タグについて ・機械が「時間」や「期間」として認識できるHTMLタグ ・スケジュールやアーカーイブなどに使用されることが多い ・WordPressではデフォルトのテーマに使われている 一度は消えた<time>タグ <time>タグは2009年、HTML5のタグとして一旦は追加されたもの、2011年に削除されてしまいました。 しかし間もなく、時間要素が改良されたタグとして復活しました。 タグと属性 2014年7月を記す場合。 <time>2014-07</time> オプションとしてdatetimeという属性を追加することができます。 <time datetime="2014-07">雨の多い蒸し暑い夏</time> <time datetime="2014-07">2014年7月</time> これは人間が分かりやすい形式で自由に記述します。 属性に関する10個の方法 ①年月 2014-07 ②日付 2014-07-01 ③年をつけないパターン 07-31 ④時間だけ（秒はオプション） 12:34:10.999 ⑤日付と時刻 日と時間の間に「T」を入れます。（TはスペースでもOK） 2014-07-01T13:50 ⑥タイムゾーン +または-からスタート。:（コロンはオプション） +09:00 ⑦ローカル日時 2014-07-01T23:59:59+09:00 ⑧年と週（週の前に「W」をつけます） 2014-W21 ⑨年だけ 2014 ⑩期間（週:w、日:d、時間:h、分:m、秒:s） 1w 2d 2h 30m 10.501s 使用例 富士山が世界遺産に登録されたのは、<...

こんにちは、クリエイティブフレークです。 子どもの悩み、親の悩み、教師の悩み…… 複雑化する現代の教育現場では、各々の悩みを相談できる場も必要になってきた時代なのかな、と感じます。 少なくとも自分たちが子どもの頃当たり前だったことが、もはや当たり前ではなかったりして、 柔軟に時代に対応していくのも一つ、必要な要素ではないかと思います。 教育って、その人間の一生を左右するかもしれない、とってもセンシティブな分野だと思うんです。 もしそこに問題が発生すれば、自分で解決するのは負担であり、不安でもあり。 そんなとき、安心して専門家にお任せできる、 「埼玉教育サポートセンター」様 のサイトのデザインを担当させていただきました。 対応可能な内容としては ◎人材育成等に関する講演、職場研修、広報戦略 ◎心身の不調などにより、服務・人事上のお悩みを抱えている先生からの相談 ◎退学や転学の悩みを抱えている生徒、保護者の相談 ◎教育委員会や学校との橋渡し、連絡調整 ◎文化施設、文化団体等の経営、事業展開への提案 ◎入社試験、公務員採用試験、各種昇任試験に係る論文やプレゼンテーションの助言 などです。 相談・カウンセリングを選ぶ際のポイントとしても重要な、話しやすさ、対応のよさも◎です。 くわしくは こちら（http://kyouiku-support.com/） から もちろんWebの世界でも同じく、柔軟さって大事で、需要に応じて変化できるとこが必要。 巷で流行っていること、今話題のもの、今年流行のカラーは、若い方々から勉強しています！ そして…… 今回はWordPressのデザインでしたが、こんなサイト作りたいんだけど！という方もぜひお問い合わせください。 CreativeFlake お問い合わせ Written by Creative Flake

こんにちは、クリエイティブフレークです。 Windows XPのサポートが終了してから、国内のIE10のシェア率が急激に高まり、Chromeも急伸しています。 これまでどうしてもIEの古いバージョンのユーザーのことを考慮すると、完全CSS3はまだ先かなと思うところでしたが、そろそろ勉強し始めどきかもしれません。 今回はCSS3だけで動くアニメーションの簡単なサンプルを。 【デモ : DEMO】 CSS3だけでアニメーション そもそも、アニメーションといえば、 ・gif（Photoshopなどでタイムラインでコマ送り。あくまで画像なのでパラパラ漫画と同じ理論。） ・Flash（タイムラインもしくはプログラミングで制御。見るにはFlash Playerのインストールが必要。） ・jQuery（JavaScript言語を使用して動的に制御。） 時代ごとに移り変わってきましたね。 では、こんなにアニメーションは存在するのに、なんでCSS3を使いたがるの？ ・gifの欠点 gifアニメーションの欠点は細かく動かすとファイル容量が大きくなります。 また、滑らかな動きには向いていません。 ・Flashの欠点 FlashはFlash Playerが必要なので、インストールしていないPCや、スマートフォンには対応していません。 ・jQueryの欠点 jQueryはプログラミング可能なので、細かく動作を指示できますが、jQueryを使用する場合、JavaScript単体とjQuery本体の組み合わせで、ファイルは大きくなります。 ここで登場するのがCSS3。以前ならマークアップ言語で動作の指示ができるなんて思ってもみませんでした。 今回の目標 ・CSSで丸や四角などの図形を描く ・CSSで回転させる ・CSSでフェードさせる 【デモ : DEMO】 CSS3だけでアニメーション ▲こんなかんじ 今回のデモのソースコードはすべてHTML内に記述してあります。 ソースコードが長いので、ここでは解説だけを記載します。 サンプルソースコードの解説 div { position: absolute !important; top: calc(50% - 100px); left...