こんにちは、工藤です。 今回は個人的に知っておくと便利だなと思うcssの小技part8です。 バックナンバー 知っておくと便利なcssの小技 part5 知っておくと便利なcssの小技 part6 知っておくと便利なcssの小技 part7 目次1 テーブルを均等配置にしたい2 画像を丸く切り抜きたい テーブルを均等配置にしたい テーブルを特にサイズ指定することなく、幅を全部均等にしたい！という時に便利なcssです。 thやtdなどに指定するわけではなく、そのままtableに […]
ここにこういう素材が欲しい…けれどちょうどよい素材が無い。そんな時は自分で素材を作ってしまいましょう。 今日はphotoshopで空を描きたいと思います。素材は沢山作り方のチュートリアルがありますが、今回は私なりの方法をご紹介します。 サイトに使いたい写真の空を思い浮かべて… 慣れれば短時間で作れますし、どんどん応用が利くと思います。 目次0.1 手順1 01.一番下のレイヤにグラデーションオーバーレイをかける2 02.一番上のレイヤーに白色で大まかに雲のベースを描く3 03 […]
その他の記事はこちら↓ トゥイーンモーションが使えるJSフレームワーク CreateJS を使ったアニメーション その1 トゥイーンモーションが使えるJSフレームワーク CreateJS を使ったアニメーション その2 === 基本的な、オブジェクトの生成からトゥイーンモーションをまで設定する方法を作成しました。今回は、オブジェクトを生成する関数をinit関数の外に出して、何度でもパーツ化する手法を記事にしたいと思います。 今まではinitの中にあったものをinit関数の外に […]
前回の記事はこちら↓ トゥイーンモーションが使えるJSフレームワーク CreateJS を使ったアニメーション その1 === 前回はオブジェクトを生成してアニメーションさせるところまでを記事にしましたが、実際に使用するにはもっとたくさんのオブジェクトが必要で、複雑なアニメーションが求められると思います。では、複数のオブジェクトを作るにはどうするか。今回はそちらを書いていきたいと思います。 目次1 単純にオブジェクトを複数作ると…2 たくさんのオブジェクトを生成する3 複数の […]
後学のためにトレンドのJSを調べていたのですが、 jQueryから入って、フロントエンドのアニメーション・マウスイベント程度しか利用しないデザイナーの私でも導入できそうなJSを見つけました。 目次1 CrateJSとは？2 CreateJSの基本のカタチ2.1 HTML2.2 Javascript部分3 円オブジェクトを生成する4 トゥイーンアニメーションで動かしてみる CrateJSとは？ CreatJS こちらのJS、特徴はjQueryのようにメソッドチェーンで複数の処理 […]
こんにちは、工藤です。 今回はグラフを描画できるライブラリをご紹介します。 目次1 vis.js2 D3.js3 cola.js4 CHARTIST.JS5 Chart.js6 Flotr2 vis.js ネットワーク図を引っ張った時の動きが面白くて個人的に好きです。 あまりに複雑なものでなければアニメーションもサクサク動きます。 D3.js かなり自由度が高いライブラリらしく、とにかくサンプルの数が豊富にあります。 慣れている人は自分で細かい作りこみもできそうですね。 […]
————————– 前回の記事 → 「【SEO対策・schema.org】itemscope、itemtype、itempropの基本」 基本についてはこちらの記事をご一読ください。 ————————– 今回は「自分のサイトに合うitemtype、itemprop […]
こんにちは、工藤です。 今回は個人的に知っておくと便利だなと思う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プロパティを使うことです。 ま […]
運営会社:株式会社8bit
制作サービス
運営サービス
