こんにちは、工藤です。 今回は個人的に知っておくと便利だなと思うcssの小技part7です。 今回はリセット系の2つです。 バックナンバー 知っておくと便利なcssの小技 part4 知っておくと便利なcssの小技 part5 知っておくと便利なcssの小技 part6 目次1 safariのようなwebkit系のモバイル用ブラウザのフォーム要素をリセット2 max-width(height)をリセットする safariのようなwebkit系のモバイル用ブラウザのフォーム要素 […]
—————————– 続編の記事を公開しました→「【SEO対策】itemtype・itempropの調べ方【schema.org】」 —————————– HTML5より、新しいプロパティが追加されました。（実質HTML4でも使えます） i […]
今回はバナーとメインビジュアルを集めました。 個人的には、人物モデルの写真を組み合わせて作るデザインが気に入っています。 普段から、勉強も兼ねてこのデザインいいなと思った時には手元にデザインを残していたりします。
こんにちは、工藤です。 今回はフリーでアイコンを提供してくださっているサイトをご紹介します。 目次1 icooon-mono2 Icon rainbow3 Material icons – Material Design4 iconmonstr5 Metrize Icons6 FLAT ICON DESIGN icooon-mono シンプルで使い勝手のいいアイコンだけではなく、ちょっと変わり種のものまで幅広く扱っているのが魅力的です。 なんと6000種類もあるよ […]
React.jsの理屈は後回し。とりあえずコードを書いてみたい。jQueryが古いと言われているのらしいので「こう書けばこうなる」くらいをやってみたい。 目次1 React.jsが来るらしい2 jsなのでまずはライブラリを読み込む3 文字を出力する React.jsが来るらしい jQueryで表面のベーシックなことだけしていたタイプの私には、React.jsは大変ハードルが高いです。検索して出てくる記事をいくつか読んでみたものの、そもそもの考え方から変えていかなければならない […]
例えばキャンペーン応募受付が夜中の0時までなので、その時間ピッタリにリンクを削除して、終了のメッセージを出したい。しかしその時間には寝ていたい、そんなとき。 「〇月×日△時になったら表示を切り替える」jsを組み込んでみましょう ※ただjsなので、厳密にソースを見られるとリンク先などがバレてしまいます。朝起きたらちょいと書き換えるくらいの温度感で済む場合なんかにご利用ください。 ※もうひとつ。画面を読み込んだタイミングでのみ動作します。表示中に時間が経過しても、リロードしないと […]
こんにちは、工藤です。 今回は背景を魅力的に見せてくれるjsについてまとめてみました。 目次1 covervid2 particles.js3 StickyStack4 SHARDS5 rainyday.js6 multiScroll.js covervid 背景いっぱいに動画を表示してくれるプラグインです。 動画を使用するのにすごく軽量なところが魅力的です。 particles.js 幾何学模様を背景に表示してくれるプラグインです。 マウスの動きに合わせて幾何学模様 […]
こんにちは、工藤です。 今回はCSSジェネレーターのまとめ2017年版です。 コーディングの際にいつも本当にお世話になっています…。 目次1 グラデーション1.1 Ultimate CSS Gradient Generator1.2 Blend1.3 shade1.4 CSS Gradient Generator1.5 Gradient Generator2 ボタン2.1 Grad32.2 CSS3 Button Generator2.3 Css Gradient Butto […]
こんにちは工藤です。 今回はレスポンシブのテーブルの組み方の1例をご紹介します。 PC表示の時はこんな感じです。 目次1 PC表示の時2 スマートフォン表示の時3 ソースコード4 ポイント5 YoutubeChannelのご紹介 PC表示の時 今回はちょっと扱いに困るthead部分について、こんな感じで表現してみます。 スマートフォン表示の時 tbody内のtdの箇所に、theadの項目を表示させてみました。 ソースは下記のようになります。 ソースコード html css ポ […]
2017年のトレンド予測で「ネイティブアプリが減少、WEBアプリケーションに移行が本格化」というものがありました。 確かにAndroidとiOSで言語も異なるし、開発コストはいつもよりかかるし、ARなどの複雑な内容でなければわざわざネイティブアプリを作る必要はありません。 ネイティブアプリは少し前までプッシュ通知が送信可能という大きな利点を持っていたのですが、ついにWEBブラウザでもプッシュ通知が可能になりつつあります。 調べたところ、なんと便利なjsライブラリが存在するそう […]
こんにちは、工藤です。 今回はWebデザインの参考になる、ギャラリーサイトをまとめました。 目次1 日本語サイト1.1 I/O 30001.2 81-web1.3 MUUUUU.ORG1.4 ARTNOC.COM1.5 S5-Style1.6 Japan Web Design Gallery1.7 Web Design Clip1.8 WEB DESIGN GALLERY for WEB DESIGNERS1.9 responsive Web Design JP2 海外サイト […]
今回は人物のレタッチを紹介していきます。 使用するのはこちらの写真。 目次1 ヘアスタイルを修正2 服や小物の色を調整する3 肌や前髪をきれいに ヘアスタイルを修正 まず、看護師さんなので髪をまとてもらいましょう。 必要な箇所を選択し、切り抜いていきます。 とびでている髪の毛なんかも、除外してしまいましょう。 清潔感が欲しいので、耳を出します。 他の写真から耳を切り抜いて、色調を補正し、合成します。今回はカラーバランスで調整しました。 耳合成しました。これでヘアスタイルは完了 […]
こんにちは、工藤です。 今回はローディングアイコを作成してくれるWebサービスをまとめました。 Webサービスだとリアルタイムで色やスピードなどをチェックできるのが嬉しいですね。 目次1 画像で作成1.1 Loader Generator1.2 Preloaders1.3 Loadinfo1.4 Ajaxload2 CSSで作成2.1 SpinKit2.2 Single Element CSS Spinners2.3 CSS Load.net3 SVG/CSS/GIF で作成 […]
案件によっては、撮影などの機会がなく、担当の方が撮った写真を素材としてデザインをまとめるという状況も多々あります。 その時に少しでも写真が美しく見えるよう、写真の補正や簡単なレタッチを行うことがあります。 そのうちによくやる補正の方法をいくつかご紹介したいと思います。 photoshopでどんどんこなしていきましょう。 目次1 全写真共通1.1 写真の輪郭をくっきりさせる2 建物編2.1 主役の建物を垂直にする2.2 建物を切り抜いて背景の天気をよくする 全写真共通 写真の輪 […]
こんにちは、工藤です。 今回はスマートフォン用メニューのプラグインをまとめました。 実用的なものから動きが面白いなと思ったものまで様々です。 目次1 アコーディオンメニュー1.1 slicknav1.2 jQuery slimMenu1.3 MeanMenu2 ドロワーメニュー2.1 Drawer2.2 jQuery.offcanvas2.3 Pure Drawer2.4 Bouncy Material Design navigation drawer in CSS2.5 T […]
前回書いた扇形状にアニメーションする記事、非常に残念な動きをしています。無念としか言いようがありません。 これを機におさらいをしてみようと、過去の薄れかけている記憶を呼び覚まし、高校数学の「三角関数」を調べてきました。 円弧上の点の座標を求める必要がある場合、これの理解がもう必須なんですよね。「Math.sin(x)」とかで値だけ出すことは可能なのですが、そもそも関係を理解していないと正しく関数を組めません。 目次1 sin、cos、tanの基本の公式2 円弧上の点を求める三 […]
勉強も兼ねて、円グラフのようにぐるっと描写するjsを書きたかったのですが、どうにもうまくいきませんでした。。 角度の計算がおかしいんだろうなと思うのですが、どうにも数学が苦手で、もう少し調査してリベンジしたいです。 単純に90度ごとだととても簡単なのですが、終点の座標が曲線の部分にかかってくると三角関数が関わってくるので数学が苦手な人間にとってはとても大変なんですよね。 このソースコードだと、こんな図形になります。90度の単純な扇形。 pathタグの「d=”M 0 […]
こんにちは、工藤です。 個人的に知っておくと便利だなと思うcssの小技part6をご紹介します。 知っておくと便利なcssの小技 part3 知っておくと便利なcssの小技 part4 知っておくと便利なcssの小技 part5 目次1 括弧付きの数字リスト2 文字を省略する 括弧付きの数字リスト 単純に数字だけではなく、括弧付きでリストを作りたいときはありませんか？ そんな時に使える方法です。 今回のポイントはcounter-incrementプロパティを使うことです。 ま […]
こんにちは、工藤です。 個人的に知っておくと便利だなと思うcssの小技part5をご紹介します。 今回はレスポンシブ関連のものです。 知っておくと便利なcssの小技 part1 知っておくと便利なcssの小技 part2 知っておくと便利なcssの小技 part3 知っておくと便利なcssの小技 part4 目次1 ウィンドウサイズによってテキストを改行させたい2 テーブルのレイアウトをウィンドウサイズによって変更する ウィンドウサイズによってテキストを改行させたい レスポン […]
平素は格別のお引き立てをたまわりまして誠にありがとうございます。 当社では以下の日程で年末年始休暇を取らせていただきます。 2016/12/28(水)～2017/1/4(水) 12/28(水)については緊急対応以外の業務以外の通常業務は行いませんので、ご容赦願います。 なお、12/28以降にご連絡いただきましたご依頼については、年明けの1/5(木)からの対応とさせていただきます。 運用中の各種Webサービスについても、緊急性の高い不具合対応以外のサポートについては、年明けの1 […]
こんにちは、工藤です。 今回はページ全体のスクリーンショットを撮るのに便利なプラグインをご紹介します。 Chrome・Firefox向けです。 目次1 Awesome Screenshot Plus2 FireShot3 FireShot4 Firefoxの開発者ツール Awesome Screenshot Plus ChromeFirefox 個人的にお世話になっている『Awesome Screenshot Plus』です。 とにかくかゆいところまで手が届きます。ブラウザの […]
（動かない場合、firefoxまたはChromeで確認すると動きます。） 上記の画像はapng形式のアニメーション画像。 gifアニメーションと違い、アルファ情報を含めることもできます。ファイルサイズもgifアニメと大差はないとのこと。 いつの間にかLINEクリエイターズスタンプにてapngの取り扱いも開始していて、今後アプリの作成なんかではどんどん主流になっていくと思うので今のうちに作り方を確認しておきたいと思います。 目次1 フリーソフトを使って作成します。2 詳細な手順 […]
こんにちは、工藤です。 今回は個人的に設定しておくと便利なcssをご紹介します。 目次1 box-sizing: border-box;をユニバーサルセレクタで設定2 aタグをhover時にふわっと表示させる box-sizing: border-box;をユニバーサルセレクタで設定 初期状態だとpaddingとborderの幅や高さを含めずに計算してしまうのですが、『box-sizing: border-box;』を記述することでpaddingとborderも含めて計算して […]
よくWebシステムの要件定義をまとめていると段階で、拡張性のあるシステムにして欲しい、ということをよく言われます。こういう機能を追加したい、こういう表示を追加したいなど、将来的に追加オーダーを取り入れやすく作って欲しいということです。 これには、改造があったとしても少しの手間で改造が済むようにしたい、改造コストを抑えたいという意図があります。 システム開発を発注した方や実際に開発に携わっている方であれば分かると思うのですが、システムの改造には結構な費用がかかります。 内容によ […]
制作会社でチームでWebサイト制作をおこなっていると、デザインの良し悪しというのはデザイナーさん自身に直接ぶつけてくる方はかなり少ないです。 たいてい、ディレクターなどが伺った感想をオブラートに包みつつ、気を使いながら修正内容を伝える場合が多いのではないでしょうか。 Web制作はディレクター、デザイナー、マークアップエンジニアなど役割分担が詳細化されているので、それぞれの担当者がお客様の生の感想や意見を聞くことが少ないように思います。 率直なお客様の意見や要望というのは、制作 […]
運営会社:株式会社8bit
制作サービス
運営サービス
