こんにちは、工藤です。 今回は個人的に設定しておくと便利なcssをご紹介します。 box-sizing: border-box;をユニバーサルセレクタで設定 初期状態だとpaddingとborderの幅や高さを含めずに計算してしまうのですが、『box-sizing: border-box;』を記述することでpaddingとborderも含めて計算してくれます。 とても便利なクラスですし、初期状態がこれでもいいのでは…と思うのでユニバーサルセレクタで指定してしまいます。 これで […]
こんにちは、工藤です。 今回はデザイン面の魅せ方に活かすことができそうなjQueryプラグインをあつめてみました。 mage Blur Plugin このプラグインを使うと画像をPhotoshopなどで加工をしなくても画像に簡単にぼかしを入れることができます。 なんとなくおしゃれな雰囲気になりますよね。 Space.js パララックス系のプラグインです。 スクロール時に3Dのように飛び出して見えるのが面白いです。 Raphaël.js JavaScriptでSVGを […]
こんにちは、工藤です。 今回はフォーム周りで活躍してくれそうなプラグインを集めました。 icheck チェックボックス・ラジオボタンのカスタマイズを簡単に行うことができます。 用意されているデザインも豊富で、なんだかこれを使うだけで一気におしゃれになります。 .customSelect() cssで行うと割と表示が違って苦労するselect要素の装飾が簡単にできます。 マウスオーバー時やセレクトメニューを開いた時…などの細かい設定も行うことができます。 Validetta リ […]
こんにちは、工藤です。 今回は個人的に知っておくと便利だなと思うcssの小技part4をご紹介します。 知っておくと便利なcssの小技 part1 知っておくと便利なcssの小技 part2 知っておくと便利なcssの小技 part3 display:inline-blockで要素を並べた時に隙間を作らない 以前の記事でさらっと説明してしまったので、改めてご紹介です。 display:inline-blockで要素を横に並べると『text-align』や『vertical-a […]
こんにちは、工藤です。 今回は以前まとめたものが古かったので、jQueryを使ったモーダルウィンドウのプラグインを改めてまとめました。 レスポンシブ対応しているもののみに絞っています。 Boxer（Lightbox） 以前までは『Boxer』というプラグイン単体だったのですが『Formstone』というテーマの1つになり、それに伴い『Lightbox』という名前に変更になったようです。ややこしいです。 ただ比較しても挙動は（見た限りだと）そんなに違わないので好きな方を使ってよ […]
こんにちは、工藤です。 今回は個人的に知っておくと便利だなと思うcssの小技part3をご紹介します。 知っておくと便利なcssの小技 part1 知っておくと便利なcssの小技 part2 テキストに蛍光ペンのようなマーカーをつける 文字の強調に。使い方によっては分かりやすく、おしゃれになります。 方法は非常に簡単です。該当のテキストに とつけるだけ。 linear-gradient(transparent 開始位置, 色の指定 終了位置);といった感じで、開始位置と終了位 […]
こんにちは、工藤です。 今回はおすすめのWordPressプラグインをご紹介します。 前回⇒おすすめのWordPressプラグイン集 part1 ウィジェット部分に独自のclassを付けたい Widget CSS Classes サイトへ ウィジェットで管理している部分にclassを付加して、そこのみにデザインを当てたいときはありませんか？ 確かに追加した順などにclassは付加されたりはしていますが、自分でつけておいた方が管理もしやすいですよね。 そんな時役に立つのが『Wi […]
こんにちは、工藤です。 今回は個人的に知っておくと便利だなと思うcssの小技part2をご紹介します。 前回⇒知っておくと便利なcssの小技 part1 2行目のインデント以降にインデントを付ける 上の画像のように2行目以降はインデントを付けたい…という時はありませんか？ そんな時に簡単なコードで済ませられる小技です。 『padding-left:1em』『text-indent:-1em』を指定するだけで2行目以降が1文字下がって表示されます。 アイコンなどは適宜backg […]
こんにちは、工藤です。 アプリのアイコンって割とサイズを用意しないといけなくて、何を用意したのか作業中よくわからなくなったりします・・。 今回はアイコンのリサイズを一気に行ってくれるサービスと簡単ではありますが使い方をご紹介します。 App Icon Resizer サイトへ 使い方 使い方はとても簡単です。 まずは赤枠内にアプリのアイコンにしたい画像をアップします。 推奨サイズは1024×1024pxです。 次に画面下部でアイコンを作りたい対象やサイズにチェックを入れます。 […]
こんにちは、工藤です。 今回は個人的に知っておくと便利だなと思うcssの小技をご紹介します。 ブロック要素（div等）全体にリンクを付ける div等のブロック要素全体にリンクさせたい…なんてことありますよね。 HTML5やjsで解決出来る場合もありますが、そうはいかないなんて時もありますので…自分はよくこの方法に頼ることが多いです。 HTML とりあえずHTMLの記述です。 全体リンクにするaタグを空で置いています。 もし空で置くのが気になるようでしたら中にテキストを置いて、 […]
こんにちは、工藤です。 今回はこのブログでも使っているWordPressのおすすめプラグインと、簡単ではありますが使い方をご紹介します。 手軽にブログの記事の装飾をしたい Shortcodes Ultimate Shortcodes Ultimate ブログの記事を書いているとボタンなどの装飾やアコーディオンなどをつかいたい…けれどcssやjsに詳しくない…なんて時はないでしょうか。 その時役に立ってくれるのが『Shortcodes Ultimate』です。 なんと、40種類 […]
こんにちは、工藤です。 この度こちらの『モノづくりブログ』をリニューアルしました。 コンテンツも多くなってきたため、それらをシンプルかつ見易くまとめることが目的でした。 今回は前のブログと比較しつつ、色々とご紹介できたらと思います。 TOPページ 見た目についてはよりシンプルに、どちらかというとコンテンツの写真や画像を活かすようなものになりました。 前より線が細い印象になったかと思います。 コンテンツの並びについては、以前は新着の記事を並べていただけだったのですが、今回は新着 […]
こんにちは、工藤です。 今回は普段の作業がデザインとHTMLとcssコーディングがほとんどの私がphpの勉強をしたのでその過程でわかったことだとかを載せようかと思います。 私ごとなのですがいかにも『プログラム言語』というものに若干苦手意識がありまして…。 ですが浅くでも知っておいた方が何かしらの役には立つだろう、と思い至ったのでとっつき易い（と言われている）phpを勉強することにしました。 とりあえず今回はお問い合わせフォーム（っぽいもの）の作成をしました。 目標 確認画面を […]
こんにちは、工藤です。 今回はiPhone/Android端末の画面解像度について、サイトやアプリ作成用に個人的に簡潔な表が欲しかったので備考録がてらまとめておきます。 スマートフォンのみの情報です。 2016年1月現在の情報となります。 iPhone 本体名 ディスプレイ解像度（横×縦/px） 画面比率 Retina iPhone/iPhone 3G,3GS 320×480 3:2 1 iPhone 4,4S 640×960 3:2 2 iPhone 5,5S,5c 640 […]
こんにちは、工藤です。 今回はちょっと変わった、インパクトのあるメインビジュアルを集めました。 やっぱりサイトに入った時にすぐに目に入るものですから印象に残るようデザインしたいですよね。 にこにこ小児歯科 サイトへ 小児歯科のサイトです。 子どもの口の中がメインビジュアルになっているのが面白いです。 社会福祉法人富士会 富士保育園 サイトへ 水彩風のイラストに囲まれてメインビジュアルが切り替わります。 曲線やイラストからやわらかい印象を受けます。 ペエ歯科クリニック サイトへ […]
こんにちは、工藤です。 今回は参考にしたいヘッダーのデザインをまとめました。 株式会社LITALICO（りたりこ） サイトへ アイコンで色分けされているのが分かりやすいですね。 オンリー（ザ・スーパースーツストア）公式通販 サイトへ junhashimoto（ジュンハシモト）公式通販 サイトへ オーダースーツのHANABISHI サイトへ ていれぎの湯 サイトへ 縦書きのロゴがどんとのっています。サイトを見てみるとヘッダーの下の方が温泉の湯気のようになっていて面白いです。 K […]
こんにちは、工藤です。 いつもの自分用では若干ありますが、商用利用OKでフリー写真を提供してくださっているサイトをまとめました。（一部有料有） ご利用ガイドや写真ごとにある使用許諾などとあわせてご利用ください。 2015年11月13日現在の情報になります。 ぱくたそ サイトへ 利用規約 高品質・高解像度な写真がたくさんあります。 個人的には綺麗な風景写真が揃っているのがありがたいです。 人物は結構アクが強め…ですが広告などではインパクトがでますね。 写真AC サイトへ ご利用 […]
こんにちは、工藤です。 今回はイラストが魅力的なサイトをまとめました。 STAY HOT いいぞ、もっとやれ。 – 日清カップヌードル サイトへ かなり濃いめのイラストとイラスト風に加工された写真のインパクトがすごいです。 フォトハウス ハピスタ サイトへ 手書きの感じと水彩やクレヨン風の効果がとても素敵です。 旅もじゃ サイトへ さりげなく下の方で船が動いたり電車が走っていたりします。 What is JUNIOR RESIDENT？-日本医科大学千葉北総病 サ […]
こんにちは、工藤です。 Android4系の標準ブラウザのバグで引っかかったことがありましたので書き留めておきます。 前回：Androidでつまずいたバグについてのまとめ 画像をcssで丸く切り抜ぬくと標準ブラウザでのみ表示が異なる ここ最近よく見る画像の丸い切り抜きです。 ユーザーさんが登録したアイコンなどはcssで切り抜く（ように見せる）のが手っ取り早いですね。 今回は下の画像のように表示させるつもりでcssを設定しました。 IEの古いバージョンなどは今回は置いておいて… […]
今回は素敵なCSS3アニメーションを用意してくださっているサイトをご紹介します。 2016年1月にIE8のサポートが切れる…とのことなのでいつかバンバンつかえる日が来たらいいなと思います。 Hover.cssサイト・デモ 主にボタンにカーソルを当てた時に使えそうなCSSライブラリです。 綺麗にまとめてくださっているので使いたいものがすぐに見つかりそうですね。 CSSのみで実装するボタンデザインやホバーエフェクト 20＋α 目次 サイト・デモ 使い勝手のよさそうなエフ […]
こんにちは。 今回は学校サイトを集めました。 ここ最近は学校の特色を出すためか様々なこだわりを感じるものがたくさんありますね。 ただその中でも学生さんや親御さんに情報をしっかり見せないといけないと思うので整理するのがなかなか難しそうです。 早稲田大学 サイトへ TOPの背景に動画を使用しているのでちょっと不思議な印象を受けますね。 三田国際学園 サイトへ 三角の要素が印象的です。あまりごちゃごちゃした感じはなく、情報が見やすいです。 大竹学園 大竹高等専修学校 サイトへ すご […]
こんにちは。 今回はスマホサイト作成の時に使えそうなjqueryやJS、CSS3で作成されたプラグインを集めました。 jquery Slidebars サイトへ 設置がかなり簡単にできます。 ドロワーメニューはAndroidで不具合が起きることが多い印象なのですがこのプラグインはそういったことはあまり聞かないですね。 Drawer サイトへ よく使いそうなオプションが豊富で便利。 SlickNav サイトへ こちらも簡単に設置できるのが良いですね。 Off-Canvas Me […]
こんにちは、工藤です。 今回はコミュニティサイトを色々調べてみました。 デザインで楽しそうな、参加したくなるような工夫な必要なのですがなかなか難しかったりします。 ことりっぷ サイトへ 女性向けガイドブック『ことりっぷ』のコミュニティサイトです。 読者投稿の記事でも写真が豊富で、旅に行った、旅に行きたい！という気分になります。 サイトもあまりごちゃごちゃせず見やすいです。 プレママスクエア サイトへ 妊娠を控えた、または子育て中の方へ向けてのコミュニティサイト。 TOPのコン […]
こんにちは。 今回はwordpressのスライダー関連のプラグインを調べてみました。 Meta Slider Meta Slider こちらのプラグインだけで4種類のスライダーを用意してくれています。 Easing Slider “Lite” Easing Slider “Lite” 矢印画像など、かなり細かいところまで設定することが出来ます。 Master Slider – Responsive Touch Sli […]
こんにちは、工藤です。 背景を効果的に魅せることができるjqueryプラグインをまとめました。 スライド関係 Skippr サイト 指定した背景いっぱいに画像が表示、スライドされるプラグインです。 軽量でレスポンシブにも対応しているのがうれしいです。 MaxImage2 サイト こちらも背景いっぱいに画像が表示、スライドされるプラグインです。 オプションの種類が豊富で 自動でフェードイン/アウトするスライドショー 矢印付のスライドショー 動画再生 など様々なことができます。 […]
運営会社:株式会社8bit
制作サービス
運営サービス
