-
-
【CSS】「transition」と「box-shadow」と「transform」で作るマウスオーバー効果
画像にオンマウスすると、影が付いたり拡大する効果を「transition」「box-shadow」「transform」を使って作ってみました。 それぞれの効果について解説していきます。 最初にデモペ ...
-
-
【JS】「simpleParallax.js」で簡単にパララックス効果を与える
2019/11/10 JavaScript, Webデザイン
軽量で実装が簡単な「simpleParallax.js」を使い、パララックス効果を与える方法を解説します。 HTMLの記述もシンプルです。 ◆まずはデモページをご覧ください。 デモページを見る &nb ...
-
-
【CSS】境界線・区切り線を曲線の矢印にして吹き出しのように作る
コンテンツの区切りを直線や三角矢印にするページをよく見かけますが、今回は吹き出しのように矢印を曲線にする方法で作ってみました。 コンテンツの区切りの他に、人物を入れるとコメントしているような表現にもな ...
-
-
【CSS】レスポンシブで境界線・区切り線をモコモコしたデザインで作る
段落の区切りを、線や色分けだけでなく、モコモコとした形でデザインするcssです。 特に1カラムのページで使えそうなデザインです。 デモページを見る ソースもろもろは全てここに書くと長くな ...
-
-
明日から「IE9」と「IE10」を切り捨てよう
2017年4月11日に、マイクロソフトが「Windows Vista」のサポートを終了します。 「Vista」のサポートが終了すると、今後は「Windows7」以降となり、IEも「IE11」だけサポー ...
-
-
webデザイナー・フリーランス・社内web担当者向けお役立ちリンク【8】
webデザイナー、フリーランス、社内web担当者の方などに役立つ記事をご紹介しております。 ◆これから独立する君へ知っておいてほしい15のこと (SEMラボ 様) 「今度相談させてください」、「今度案 ...
-
-
【CSS】アニメーションで色が変わるボタンを作る
オンマウスで色がスライドする、アニメーションボタンをCSSで作ります。 ◆HTML <a href="#" class="btn btn-medium btn-l-r">アニメーション ボ ...
-
-
【CSS】アニメーションでキラッと光るボタンを作る
オンマウスでキラッと動きをつけるボタンをCSSで作ります。 ◆HTML <button class="myButt one"> <div class="insider">< ...
-
-
webデザイナー・フリーランス・社内web担当者向けお役立ちリンク【7】
webデザイナー、フリーランス、社内web担当者の方などに役立つ記事をご紹介しております。 ◆1ページで完結、Web制作者が助かるチートシート・資料・PDFまとめ (コムテブログ 様) ◆どれを選んで ...
-
-
【CSS】グラデーション背景にテキストを乗せる
段落のタイトルによく使われる、グラデーション背景に文字を乗せるCSSです。 ◆HTML <div class="ttl">グラデーション背景にテキストを乗せる</div> ◆C ...
-
-
webデザイナー・フリーランス・社内web担当者向けお役立ちリンク【6】
webデザイナー、フリーランス、社内web担当者の方などに役立つ記事をご紹介。 ◆これからのCSSレイアウトはFlexboxで決まり! (Webクリエイターボックス 様) ◆かつてはJavaScrip ...
-
-
Video.js – HTML5 Video Player for WordPress プラグイン設定・使用方法
WordPressのページに、シンプルな動画を埋め込むプラグインの紹介です。 以下手順です。 1、プラグインの新規追加で「Video.js – HTML5 Video Player for WordP ...
-
-
webデザイナー・フリーランス・社内web担当者向けお役立ちリンク【5】
webデザイナー、フリーランス、社内web担当者の方などに役立つ記事をご紹介。 ◆商用利用OKの無料イラスト配布サイトまとめ10選 (無料イラストIMT公式Blog 様) ◆canvas ...
-
-
「Photoshop CS6」と「Fireworks CS6」のスライス設定
デザイン制作後にパーツをスライスして書き出す際のファイル名の設定方法です。 書き出す前に設定しておくと、ファイル名を変更する手間が省けます。 ◆Photoshopの場合 ファイル ⇒ Web用に保存を ...
-
-
webデザイナー・フリーランス・社内web担当者向けお役立ちリンク【4】
webデザイナー、フリーランス、社内web担当者の方などに役立つ記事をご紹介。 ◆サブドメインとサブディレクトリのSEO対決、2014年の勝者はどちら? (Web担当者Forum 様) サブディレクト ...
-
-
webデザイナー・フリーランス・社内web担当者向けお役立ちリンク【3】
webデザイナー、フリーランス、社内web担当者の方などに役立つ記事をご紹介。 ◆jQueryでスクロールすると表示する系いろいろ (webOpixel 様) 「スライドアニメーションして表示」は、「 ...
-
-
【CSS】1文字分のインデント(スペース)を付ける
全角スペースを使ってインデントを付ける方法がありますが、CSSを使った方が後々文字数が増減しても修正の必要がないためおすすめです。 ◆HTML <ul class="textIndent"> ...
-
-
【CSS】蛍光ペン・マーカーで引いたようなテキスト装飾
蛍光ペン・マーカーで引いたようなテキスト装飾をCSSで表現してみます。 ◆HTML マーカーで引いたようなテキスト装飾です。<br /> <span class="marker"&g ...
-
-
webデザイナー・フリーランス・社内web担当者向けお役立ちリンク【1】
webデザイナー、フリーランス、社内web担当者の方などに役立つ記事をご紹介。 ◆Webデザインが捗るPhotoshopの時短ワザ4つ (ASCII.jp 様) スマートオブジェクトは活用すべきですね ...
-
-
【Photoshop】コンテンツに応じた移動ツールで物体を移動する
以前紹介した「一瞬で背景を消す」と「パッチツールで物体を消す」で紹介した内容に続き、今回もPhotoshop CS6の機能にある「コンテンツに応じた移動ツール」を使用して、物体を移動する方法を紹介しま ...