タグ

ブックマーク / www.webcreatorbox.com (9)

  • JavaScriptで水や波、パーティクル等、ふわふわゆらゆら系の動きを表現 | Webクリエイターボックス

    2018年8月6日 JavaScript, jQuery Webサイトのアクセントに、ちょっとした動きをつけたい時ってありますよね。一から作り込むのは大変ですが、プラグインを使えば意外と簡単に実装できますよ。夏らしい涼し気なデザインになりそうです。サンプルがうまく動かない時はデモ画面右上の「EDIT ON CODEPEN」をクリックして別タブで表示してみてください! ↑私が10年以上利用している会計ソフト! wavify See the Pen wavify Demo by Mana (@manabox) on CodePen. GitHub wavifyはjQueryのプラグイン。ふよふよと動く波を表現できます。jQueryとTweenMax、wavifyのファイルを読み込み、SVGコードを用意すればOK。 HTML <body> コンテンツ ・・・ <!-- SVG --> <svg

    JavaScriptで水や波、パーティクル等、ふわふわゆらゆら系の動きを表現 | Webクリエイターボックス
  • IE8・9にもFlexboxを対応させる、flexibility.jsがとっても便利!

    2016年1月5日 CSS, JavaScript 昨年からいろんなサイトで続々と実装されてきているFlexbox。従来の方法とは違い、簡単にCSSでレイアウトを組めちゃう素敵技です。しかし、Internet Explorer8や9等の古いブラウザーには対応しておらず、Flexboxを使いたくても使えない…というWeb制作者さんも少なくないはず。そんな悩みを今回の記事で解消します! ↑私が10年以上利用している会計ソフト! Flexboxって何? FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃうボックスです。具体的には主に以下のような事を手軽に実装できます。 CSSを一行プラスするだけで横並びにできる! 横並びになった要素の高さが最初から揃ってる! 要素を上下左右、好きな順序に並び替えられる! スペースの

    IE8・9にもFlexboxを対応させる、flexibility.jsがとっても便利!
  • 少しのコードで実装可能な20のWordPress小技集

    2016年10月27日 Wordpress CSSの小技やjQueryの小技、スマートフォン対応など、これまで様々な小技集を紹介してきました。そこで今回はWordPressの小技を紹介しようと思います!基から応用まで、簡単なコードで設置可能なので、WordPress初心者さんでも大丈夫!みなさんのサイトに合わせてカスタマイズしてくださいね! ↑私が10年以上利用している会計ソフト! 目次 カスタムメニューの設置 アイキャッチ画像(サムネイル画像)を利用する 検索ワードをハイライト Twitterのユーザー名を自動的にリンクさせる デバイスによってコンテンツ変える 画像を挿入する際、P タグで囲まないようにする 「続きを読む」リンクをカスタマイズ ショートコードを作成 ショートコードをテンプレートファイル内で実行する 古い記事にメッセージを表示する RSSフィードに画像を追加 記事に含まれ

    少しのコードで実装可能な20のWordPress小技集
  • かわいい系デザインに使えるフォントや素材、デザインアイデアを集めました

    2019年6月4日 Webデザイン, ダウンロード, フォント 女性Webデザイナーにとっては「かわいいと言えばこんな感じ!」という基的な概念が自然と身についているものの、男性デザイナーにとってはなかなか難しい女性テイストのデザイン。でも大丈夫!今回紹介する無料素材やフォント・配色例を組み合わせれば、きっと女子力の高いかわいいデザインができあがるはずです!紹介する素材はすべて商用利用OK!参考になるデザインのWebサイトもいくつか紹介します!(あ、ちなみによく誤解されますが、私、Webクリエイターボックスの中の人は女ですw) ↑私が10年以上利用している会計ソフト! 目次 無料フォント 無料アイコン・イラスト素材 無料の背景パターン素材 「かわいい」を実現する配色例 かわいい系デザインのWebサイト実例 無料フォント 曲線をうまく使うと女性らしいデザインに仕上がります。そこで、使用するフ

    かわいい系デザインに使えるフォントや素材、デザインアイデアを集めました
  • The Basic Idea of Symmetrical Design

    2014年1月28日 Webデザイン デザインをする上でシンメトリー(対称性)は頻繁に使われる手法のひとつです。古代から様々な場面で使われてきた美の構図、シンメトリーをうまく取り入れることで、安定感のあるレイアウトを生み出すことができます。今回はこのシンメトリーに焦点をあて、具体例とともに構成方法を考えてみようと思います! ↑私が10年以上利用している会計ソフト! シンメトリー(対称性)とは シンメトリーは広く「左右対称・反転」として知られていますが、他にも「回転」や「平行移動」、「拡大・縮小」も含んおり、これらの手法を取り入れた構成のことを言います。シンメトリーには規則性があり、バランスのよい安定した調和を感じさせます。シンプルで一度法則を覚えたら様々なデザインに取り入れられるので、デザイン初心者な方でも比較的容易にまとまったレイアウトを構成することができます。 シンメトリーとは異なる、

    The Basic Idea of Symmetrical Design
  • Photoshopをより便利に利用できる無料プラグインいろいろ

    2013年12月17日 Photoshop, 便利ツール デザイナーにはかかせないツール、Adobe Photoshop。Creative Cloudになってどんどん便利になってきましたね!そんなPhotoshopをさらに使いやすくしてくれる無料プラグインが多数配布されています。私はPhotoshop CC ver. 14を使用しており、そのバージョンで使えるプラグインを中心に紹介していきます! ↑私が10年以上利用している会計ソフト! Photoshopプラグインの使い方 最新版のAdobe Extension Managerをダウンロード&インストール ダウンロードしたPhotoshopプラグイン(.zxpファイル)をダブルクリック 自動的にAdobe Extension Managerが起動するので、そのままプラグインをインストール。自動的に起動しない場合はAdobe Extensi

    Photoshopをより便利に利用できる無料プラグインいろいろ
  • Basic Logo Design Process

    2013年3月25日 Webデザイン 企業のイメージを明確にすることを「ブランディング」と呼びます。企業ロゴはそのブランディングが色濃く反映され、企業のイメージを左右する重要な部分です。今回は「ロゴとはなんぞや?」というところから、私のロゴを実例に、ロゴの制作手順を紹介しようと思います。 ↑私が10年以上利用している会計ソフト! 先日「ロゴデザインする時の参考に!ロゴデザインギャラリーのオンパレードと注目記事色々!」という記事内で、なるほどな、と頷ける文章に出会いました。 WEBサイトは、エンドユーザーに伝わらないデザインだとわかればリニューアルするけど、ロゴデザインはエンドユーザーに伝わらないからと言って作り変えることは殆ど無い。それはつまり、ロゴはお客様の為に作るんじゃないと、ロゴは自分たちの意思や考えの象徴でもあるからそんなに簡単に変えるわけにはいかない、自分たち(ロゴに込められた物

    Basic Logo Design Process
  • How to Create a Website Using Only iPad

    2013年11月28日 Webサイト制作, 便利ツール 病院の待合室で何時間も待たされ、「暇だしWebサイトでも作ろっかなー」なんて思った事はありませんか?きっとあまりないと思いますが、今年にはいっていろいろあった私はそんな機会がたくさんあったので、いくつかのiPadアプリを使って作ってみました。作ったHTMLテンプレートは無料配布しています!そうです、アレ、iPadで作ったものだったのです。ふふ。 ↑私が10年以上利用している会計ソフト! あると便利なスタイラスペン スタイラスペンはiPadなどのタブレットで使えるペンです。iPadを使ってお絵かきしたい人は持っているとなにかと便利。カナダのボクシングデーで$5位になっていたのでノリで買ったのがこのコ。ちょっとメーカーは覚えていないのですが、よくある無難なタイプの物ですね。書き心地は悪くないのですが、ペン先が太いので、細かい字や絵は書きづ

    How to Create a Website Using Only iPad
  • オリジナルテーマの作り方 3.0+

    2014年8月22日 Wordpress WordPressのオリジナルテーマの作り方について説明していきます。2010年1月に書いた記事とはバージョンが違い、コードも変更されたため、新たに記事にしてみました。慣れると簡単なのですが、初心者には少し難しいWordpressのカスタムデザイン。Wordpressのテーマがどのように動くのか、スタティックのHTMLテンプレートにどうやってWordpressの機能をつけるのかを説明していきます。PHPの知識は必要ありませんが(もちろんあった方が楽ですが)、自分でデザインをするためのPhotoshopとCSSの知識は必要です。 ↑私が10年以上利用している会計ソフト! WordPress オリジナルテーマの作り方 3.0+ WordPress オリジナルテーマ作成 完璧ガイド WordPressをローカルにインストールする WordPress オリ

    オリジナルテーマの作り方 3.0+
  • 1