web-design
WEBデザインCSSで蛍光ペンっぽい下線を作る方法
ブログ記事などでよく見かける、蛍光ペンっぽい下線処理。実はたった数行のシンプルなCSSで、初心者でも簡単に作れてしまうので紹介したいと思います。
WEBデザインWEBデザイン
WEBデザイン
WEBデザインWEBページのサイズを測れる便利ツール「Page Ruler Redux」
Chromeの拡張機能「Page Ruler Redux」はWEBサイトのサイズをピクセル単位で測れるツールで、参考サイトのコンテンツ幅や、ボタンの大きさなど、手軽に定規感覚で測ることができます。 ダウンロードから使い方…
WEBデザインたった2ステップでElementorに新着記事一覧を表示させる方法
今さらと思われるかもしれませんが、WordPressのページビルダープラグイン「Elementor」が最近のマイブーム。 私は無料版を使っていて、無料版でもコーディング不要でそこそこのページを構築できるのですが、どうやら…
WEBデザイン参考にしたい！WEB広告・バナーデザインまとめサイト
紙媒体よりWEB広告での出稿が増えている昨今、WEBサイトに掲載するバナーデザインの案件も増えてきました。今後デザイナーにとって、WEB広告に関するスキルは必須条件になるのではないでしょうか。 そんなわけで、WEB広告・…
WEBデザインサイトの画像が表示されない時に確認するべき3つのポイント！【HTML初心者向】
後輩に「imgタグで読み込んだ画像が表示されません」と相談を受けました。 自分もHTMLを勉強し始めた頃によくあったなぁと思ったので、<img src=” “>で読み込んだ画像が表示さ…
WEBデザインHTMLの<a>タグを使ってスマホの電話番号リンクを作る方法
社内でHTMLを勉強している後輩がいる事もあり、今更ながらHTMLの<a>タグを使ってスマホの電話番号リンクを作る方法を紹介したいと思います。 あわせてCSS・iQueryを使ったPCサイトでリンクボタンを無…
WEBデザイン意外と知らない埋め込んだGoogleMapの縮尺を変える方法
つい最近、担当していたクライアントさんが事務所移転をしたので、サイト内に埋め込んだGoogleMapも引越し先に変更した際に「周辺の建物をもっと見せたいので、もうちょっと引いた感じにならない？」と依頼を受けたのですが、さ…
WEBデザイン見ているだけで楽しい！GIFアニメを上手に使ったWEBサイト
気づいたら前回の記事アップから3ヶ月前が経っておりました。いやあっという間ですね3ヶ月。 公私共にかなり忙しかったという言い訳をしながらも、今後はできる限りまめに記事を書いていきたいと思います…。 という事で…
WEBデザインHTMLの文章で「<」や「>」をテキストとして表示させたい
HTML内で特殊文字を使いたい時に役立つサイトを紹介という記事で「<」や「>」という記述を使って、文章内に「 < 」や「 > 」を表示させる方法について書きましたが、逆に「&…
WEBデザインWEBデザインの参考にしたい印刷会社のWEBサイト【石川県】
久しぶりのWEBデザインの参考にしたい印刷会社のサイト紹介シリーズ。今回は石川県の印刷会社を紹介します。 WEBデザインの参考にしたい石川県の印刷会社サイト 石川県と言えば「金沢」というイメージが強すぎて、金沢市以外は小…
WEBデザインスクロールでナビゲーションを画面トップに固定させる【jQuery使用】
スクロールしたらヘッダーが画面トップに固定されるサイトってよく見かけますよね。 ちょっと前に関わった案件で、クライアントから「スクロールしたらヘッダーをトップに固定させたい」という要望があったので、備忘録を兼ねて記事にし…
WEBデザインコンテンツを無限スクロールさせるjQueryプラグイン「infiniteSlide.js」が便利
最近は「jQueryはもう使ってないよね」という話もちょこちょこ耳にするようになり、正直今更感があるわけですが… コンテンツを無限スクロールさせるjQueryプラグイン「infiniteSlide.js」が久…
WEBデザイン縦・横・斜めも自由自在！CSSで作るストライプは意外とカンタン！
WEBサイトの背景や、ちょっとした囲み罫で使われているストライプってどうやって作ってるんだろう？と思ったことはありませんか。 斜めのストライプとか初心者にとっては難しいように感じますが、作り方を理解してみると意外と簡単な…
WEBデザイン超簡単！CSSので作る縫い目のようなデザイン【outline-offset】
こないだ「CSSで縫い目のようなデザインってどうやるの？」という質問を受けたので、今更ですがCSSで縫い目のようなデザインを作る方法について解説したいと思います。 CSSで縫い目のようなスタイルを効果をいくつか方法があり…
WEBデザイン構造とスキンを分離して作るメンテナンスしやすいグラデーションボタン
いろんなサイトでよく見かけるグラデーションボタンですが、何も考えずに作ってしまうと背景色やグラデーションの向きに修正が発生した場合に、大変な思いをする事になるんです…サイト内にボタンの種類が多ければ尚更です。…
WEBデザイン知っていると役に立つ！親要素から値を継承するinheritの便利な使い方
通常では継承しないプロパティでも、強制的に継承させるCSSの inherit キーワードをご存知でしょうか？ 普段はあまり意識して使うことがない inherit キーワードですが、知っていると役に立つ便利な使い方があるの…
