知っておくと便利なcssの小技 part1
こんにちは、工藤です。 今回は個人的に知っておくと便利だなと思うcssの小技をご紹介します。 ブロック要素（div等）全体にリンクを付ける div等のブロック要素全体にリンクさせたい…なんてことありますよね。 HTML5やjsで解決出来る場合もありますが、そうはいかないなんて時もありますので…自分はよくこの方法に頼ることが多いです。 HTML とりあえずHTMLの記述です。 全体リンクにするaタグを空で置いています。 もし空で置くのが気になるようでしたら中にテキストを置いて、 […]
おすすめのWordPressプラグイン集 part1
こんにちは、工藤です。 今回はこのブログでも使っているWordPressのおすすめプラグインと、簡単ではありますが使い方をご紹介します。 手軽にブログの記事の装飾をしたい Shortcodes Ultimate Shortcodes Ultimate ブログの記事を書いているとボタンなどの装飾やアコーディオンなどをつかいたい…けれどcssやjsに詳しくない…なんて時はないでしょうか。 その時役に立ってくれるのが『Shortcodes Ultimate』です。 なんと、40種類 […]
モノづくりブログをリニューアルしました！
こんにちは、工藤です。 この度こちらの『モノづくりブログ』をリニューアルしました。 コンテンツも多くなってきたため、それらをシンプルかつ見易くまとめることが目的でした。 今回は前のブログと比較しつつ、色々とご紹介できたらと思います。 TOPページ 見た目についてはよりシンプルに、どちらかというとコンテンツの写真や画像を活かすようなものになりました。 前より線が細い印象になったかと思います。 コンテンツの並びについては、以前は新着の記事を並べていただけだったのですが、今回は新着 […]
phpの勉強をしてみました
こんにちは、工藤です。 今回は普段の作業がデザインとHTMLとcssコーディングがほとんどの私がphpの勉強をしたのでその過程でわかったことだとかを載せようかと思います。 私ごとなのですがいかにも『プログラム言語』というものに若干苦手意識がありまして…。 ですが浅くでも知っておいた方が何かしらの役には立つだろう、と思い至ったのでとっつき易い（と言われている）phpを勉強することにしました。 とりあえず今回はお問い合わせフォーム（っぽいもの）の作成をしました。 目標 確認画面を […]
iPhone/Android端末の解像度についてのまとめ（スマートフォン版）
こんにちは、工藤です。 今回は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】フリー写真素材サイト20選
こんにちは、工藤です。 いつもの自分用では若干ありますが、商用利用OKでフリー写真を提供してくださっているサイトをまとめました。（一部有料有） ご利用ガイドや写真ごとにある使用許諾などとあわせてご利用ください。 2015年11月13日現在の情報になります。 ぱくたそ サイトへ 利用規約 高品質・高解像度な写真がたくさんあります。 個人的には綺麗な風景写真が揃っているのがありがたいです。 人物は結構アクが強め…ですが広告などではインパクトがでますね。 写真AC サイトへ ご利用 […]
イラストが魅力的なサイトのまとめ
こんにちは、工藤です。 今回はイラストが魅力的なサイトをまとめました。 STAY HOT いいぞ、もっとやれ。 – 日清カップヌードル サイトへ かなり濃いめのイラストとイラスト風に加工された写真のインパクトがすごいです。 フォトハウス ハピスタ サイトへ 手書きの感じと水彩やクレヨン風の効果がとても素敵です。 旅もじゃ サイトへ さりげなく下の方で船が動いたり電車が走っていたりします。 What is JUNIOR RESIDENT？-日本医科大学千葉北総病 サ […]
Androidでつまずいたバグについて 2
こんにちは、工藤です。 Android4系の標準ブラウザのバグで引っかかったことがありましたので書き留めておきます。 前回：Androidでつまずいたバグについてのまとめ 画像をcssで丸く切り抜ぬくと標準ブラウザでのみ表示が異なる ここ最近よく見る画像の丸い切り抜きです。 ユーザーさんが登録したアイコンなどはcssで切り抜く（ように見せる）のが手っ取り早いですね。 今回は下の画像のように表示させるつもりでcssを設定しました。 IEの古いバージョンなどは今回は置いておいて… […]
hover時に素敵な動きを加えてくれるcss3アニメーション10選
今回は素敵なCSS3アニメーションを用意してくださっているサイトをご紹介します。 2016年1月にIE8のサポートが切れる…とのことなのでいつかバンバンつかえる日が来たらいいなと思います。 Hover.cssサイト・デモ 主にボタンにカーソルを当てた時に使えそうなCSSライブラリです。 綺麗にまとめてくださっているので使いたいものがすぐに見つかりそうですね。 CSSのみで実装するボタンデザインやホバーエフェクト 20＋α 目次 サイト・デモ 使い勝手のよさそうなエフ […]
印象に残った学校サイトを集めました
こんにちは。 今回は学校サイトを集めました。 ここ最近は学校の特色を出すためか様々なこだわりを感じるものがたくさんありますね。 ただその中でも学生さんや親御さんに情報をしっかり見せないといけないと思うので整理するのがなかなか難しそうです。 早稲田大学 サイトへ TOPの背景に動画を使用しているのでちょっと不思議な印象を受けますね。 三田国際学園 サイトへ 三角の要素が印象的です。あまりごちゃごちゃした感じはなく、情報が見やすいです。 大竹学園 大竹高等専修学校 サイトへ すご […]
スマホサイト作成時に役立つプラグイン集
こんにちは。 今回はスマホサイト作成の時に使えそうなjqueryやJS、CSS3で作成されたプラグインを集めました。 jquery Slidebars サイトへ 設置がかなり簡単にできます。 ドロワーメニューはAndroidで不具合が起きることが多い印象なのですがこのプラグインはそういったことはあまり聞かないですね。 Drawer サイトへ よく使いそうなオプションが豊富で便利。 SlickNav サイトへ こちらも簡単に設置できるのが良いですね。 Off-Canvas Me […]
コミュニティサイトのまとめ
こんにちは、工藤です。 今回はコミュニティサイトを色々調べてみました。 デザインで楽しそうな、参加したくなるような工夫な必要なのですがなかなか難しかったりします。 ことりっぷ サイトへ 女性向けガイドブック『ことりっぷ』のコミュニティサイトです。 読者投稿の記事でも写真が豊富で、旅に行った、旅に行きたい！という気分になります。 サイトもあまりごちゃごちゃせず見やすいです。 プレママスクエア サイトへ 妊娠を控えた、または子育て中の方へ向けてのコミュニティサイト。 TOPのコン […]
WordPressのスライダープラグイン10選
こんにちは。 今回はwordpressのスライダー関連のプラグインを調べてみました。 Meta Slider Meta Slider こちらのプラグインだけで4種類のスライダーを用意してくれています。 Easing Slider “Lite” Easing Slider “Lite” 矢印画像など、かなり細かいところまで設定することが出来ます。 Master Slider – Responsive Touch Sli […]
背景を効果的に魅せることができるjQueryプラグイン
こんにちは、工藤です。 背景を効果的に魅せることができるjqueryプラグインをまとめました。 スライド関係 Skippr サイト 指定した背景いっぱいに画像が表示、スライドされるプラグインです。 軽量でレスポンシブにも対応しているのがうれしいです。 MaxImage2 サイト こちらも背景いっぱいに画像が表示、スライドされるプラグインです。 オプションの種類が豊富で 自動でフェードイン/アウトするスライドショー 矢印付のスライドショー 動画再生 など様々なことができます。 […]
便利なCSS3ジェネレーターのまとめ
こんにちは。 またほとんど自分用ですがCSS3生成してくれるジェネレーターを整理したくてまとめました。 うった方がいいのは分かりつつ、やっぱり頼っちゃいますよね…。 グラデーション Ultimate CSS Gradient Generator サイトへ 以前からこちらを使用させていただいています。 使い勝手のいいサンプルが揃っています。 CSS Gradient Generator サイトへ 操作性がだいぶシンプルで使いやすいです。 CSS Sample サイトへ グラデー […]
夏間近！ビールのブランドサイトを集めてみました
こんにちは、工藤です。 そろそろ関東圏はどんどん気温が上がってきましたね。そしてビールがのみたくなります よね？ 弊社サービスのノミトモもそろそろ賑わう時期です。 今回はビールのブランドサイトを集めてみました。 一番搾り – キリン サイトへ 筆で描いたようなイメージが印象に残りますね。雰囲気が出ていてとても素敵です。 ちなみに工場見学で一番搾り麦汁をのんだのですがすごく甘くておいしかったです…。 夏いちばん – オリオンビール サイトへ 夏季限定のビ […]
参考にしたいタイトルデザインまとめ
こんにちは、工藤です。 今回はさりげなく悩んでしまうタイトルのデザインを集めてみました。 ベネッセグループ ベネッセグループ なんばパークス -NAMBA PARKS- なんばパークス -NAMBA PARKS- 英語を使っていても日本語の表記がとなりにあるとうれしいですね。 OPEN-WORLD-ACADEMY OPEN WORLD ACADEMY 斜めの線でクールな印象を受けますね。 武蔵野美術大学 武蔵野美術大学 山崎医院 山崎医院 猿田彦神社 猿田彦神社 株式会社リラ […]
【デザイン】アイコン・イラストをあしらったメインナビゲーション30選
こんにちは、工藤です。 今回はアイコンやイラストをあしらったメインナビゲーションを集めてみました。 01.倉敷芸術科学大学情報発信サイト「つなぐ」 倉敷芸術科学大学情報発信サイト「つなぐ」 アイコンがテキストより大きめです。 マウスオーバーをするとまたちょっと雰囲気の違った画像を見ることができます。 02.渋谷再開発と東急建設 渋谷再開発と東急建設 03.Joha Joha デンマーク発の子供服などを扱うサイト。イラストからマウスオーバー・クリックした際の動きもかわいいです。 […]
Androidでつまずいたバグについてのまとめ
こんにちは、工藤です。 Android4系の標準ブラウザのバグで引っかかってしまったことがいくつかあったのでメモです。 <p>要素が指定した幅に広がらない 原因はおそらくその時のviewportの指定の仕方です。 例えば<p>要素が『100%』としても横幅いっぱいに広がらず、勝手に折り返しされてしまうことがありました。 対策としては『background』の要素を指定してあげると指定したサイズになりました。 背景が白い要素でしたら『backgr […]
[スマホ版]ログイン画面のデザインまとめ
こんにちは、工藤です。 前回が探していて楽しかったので今回はスマホサイトのログイン画面を色々見てみました。 スマホサイトではプレースホルダに注目しながら集めてみました。 プレースホルダを使用していない例 プレースホルダを紹介していない例です。 スマホサイトだと情報量が多い場合に高さを少しでもとってしまうことが難点ですが、ユーザーの立場からすると入力後の確認で正しい情報を入力できているかわかりやすいですよね。 ウィメンズパーク 会員IDのみの保存・両方の保存どちらか選ぶことがで […]
2016年採用サイトを集めてみました
こんにちは、工藤です。 気付けばもう3月でした。今年度の就職活動は3月1日解禁だったり私が学生だった数年前とまた変わってるんですね。 とてもこだわりのあるものがあって見ていて楽しいので今回は気になった採用サイトを集めてみました。 ※2016年3月10日時点の情報です。 ARDEN HOUS [サイトへ] イラストが効果的に使われていてとてもかわいらしいです。 電通 [サイトへ] 電通の採用サイト。気になるカードをめくっていきます。おしゃれ・・。 フジフーズ [サイトへ] ピン […]
パララックス/スクロールでアニメーションさせるjQueryプラグインなど
こんにちは、工藤です。 今回はパララックス効果を表現できるjQueryプラグイン・スクロールでアニメーションさせるjQueryプラグインについてやそれに関する記事を集めました。 ここ最近はパララックスが１番流行っていた時期の物より、アニメーションの表現がさりげないものが主流なのかなという印象を受けます。 Nikebetterworld Parallax Effect Demo [配布サイト][DEMO]パララックスのプラグインでも代表的なものの1つ、とい […]
気になるフリーフォントを集めました
こんにちは、工藤です。 ほぼ自分用…な気もしますがライセンスなどの確認用に気になるフリーフォントをあつめました。 前回も紹介しましたが足りなかったり、増えたりしたので…。 参考になったらうれしいです。 フォントを提供してくださっている皆さま、いつもありがとうございます。 フリーフォント（日本語/ゴシック体） Mgen+ (ムゲンプラス) [Mgen+ (ムゲンプラス)] Adobe から新たにリリースされたオープンなフォントである「源ノ角ゴシック」で漢字を補って作成されたフォ […]
運営会社:株式会社8bit
制作サービス
運営サービス
