はてなブックマーク

新聞の折り込みチラシで、上のイメージのような文字を立体的に浮き出したような表現を見かけます。これってどうやって作ってるのかなぁ～っ？？？と思ったので色々と試してみましたが、比較的簡単にできる方法がありましたので記載しておこうと思います。 興味のある方はぜひやりながら作ってみてください。 1.適当な文字を配置 「年末大売出し」という、いかにも的なテキストをサンプルとして配置してみました。今回はこの文字を立体的にしてみたいと思います。 2.枠線と配色をしアウトライン化 塗り「C:0 M:0 Y:100 K:0」（黄色）、線「C:0 M:100 Y:100 K:0」（赤色）を指定します。この配色はもちろん任意で決めてもらってOKです。 3.アピアランスを分割 [オブジェクト]→[アピアランスを分割] 右クリックで[グループ解除] 黄色い文字の部分と外枠の赤い部分を別オブジェクトにしていきます。

ブログ記事などでよく見かける、強調表現のひとつ「蛍光ペン」や「アンダーライン」。 ランディングページでもよく見かける手法ですが、背景に画像を使ってリピートさせたりすることで表現するやり方もありますが、今回はCSSのみでテキストの装飾をしてみたいと思います。 ▼デモサンプルを用意しましたので、まずはそちらを確認してみてください。 DEMO それでは見ていきましょう。 <storong>や<b>で強調した場合 まずは、デフォルトの<strong>タグと<b>タグを確認しておきます。通常は下のような表示になりますね。 私は天才になれない。

.btn_a { width: 60px; height: 38px; background: #FFF; border: 1px solid #2a82a3; border-radius: 70px; -moz-border-radius: 70px; -webkit-border-radius: 70px; color: #2a82a3; padding: 42px 20px 20px; display: block; text-align: center; font-weight: bold; font-size: 120%; transition: background-color 0.5s ease-in; -webkit-transition: background-color 0.5s ease-in; } .btn_a:hover { background: #2a82a3

html+cssだけで簡単な「横並び配置のメニュー」を作るときに、よくある3パターンのコードをメモしておきます。そのまま使えるようなシンプルなものになっていますので、ご自由にコピー＆ペーストしてご利用ください。 1.横幅20%のcss背景の場合（※レスポンシブ対応） DEMO1 ウィンドウサイズを変えてみるとわかりますがレスポンシブ対応になっています。 まずは、HTMLを見ていきましょう。 共通HTML <header> <nav> <ul> <li><a href="#">navi1</a></li> <li><a href="#">navi2</a></li> <li><a href="#">navi3</a></li> <li><a href="#">navi4</a></li> <li><a href="#">navi5</a></li> </ul> </nav> <div cla

Illustrator（イラストレーター）でテキストを配置する際に、英字フォントであれば「Italic指定（イタリック）」ですぐに斜体に変換できますが（※フォントのタイプによります）、日本語フォントの場合「Italic」がない。 では、どうすれば斜体文字に出来るの？ という単純な疑問を解消する方法があります。 ▼英字フォントの場合 Italic設定で変換する まずはテキストを用意します。（※フォントはお好みで。サンプルは「Arial」フォントを使用しています。） 文字パレットで「Italic」を選択します。 すると、テキストが微妙ですが斜めに傾きます。 ▼日本語フォントの場合 シアーで表現する まずはテキストを用意します。（※フォントはお好みで。サンプルは「小塚ゴシック」フォントを使用しています。） 変形ツールの「シアー」の値を調整していきます。入力する数値によって斜度が調整できます。 試

CSSを使ってクラス名を指定するだけで要素をブルブル((((；ﾟДﾟ))))震えさせることができる「CSShake」というプラグインを使ってみました。 CSSを読み込んで、クラス名を指定するだけで利用できるのでかなり便利に使えそうですね。 CSShake 使い方はとても簡単で、ダウンロードした「csshake.js」を読み込み、ブルブルさせたい要素にクラスを指定すればOKです。 1.CSSを読み込む

CSSやPHP、JavaScriptを記述する際に、使用できる「コメントアウト」の一覧をまとめて置こうと思います。 他にも格好いいコメントアウトの記述方法をされている方が、いらっしゃいますが一般的によく見かける記述をメモしておきますのでよかったらコピ＆ペーストしてお使いください。 大見出しコメント /*********************************** * コメント * ***********************************/ /* ================================== コメント ================================== */ /* --------------------------------- コメント ---------------------------------- */ /* :::

近年、見かけることも少なくなった「marquee（マーキー）」ですが、元々はIEの独自機能でもあったため、HTMLでは非推奨とされ消えていきました。 そんな「marquee」のテロップ的動きをコンテンツに組み込みたいな～と考えたとき、CSSだけでなんちゃってマーキーが表現できるので、どうしてもって時は“アリ”かもしれません。 まずはサンプルをご用意しましたので確認してみてください。 デモサンプル それでは記述方法を見ていきましょう。 HTML記述 <h2>右から左へ文字が流れていきます。</h2> <div class="imageBox"><img src="images/autumn.jpg" width="100%" /></div> <div class="marqueeRightLeft"><p>ここにマーキー文字を流します。</p></div>

Google HTML/CSS Style Guide (【改正】2016.2.24 ) これまで何となく認識しているルールとか、規則ってありますよね・・・。「決まりがあることは知っているけど、守らなくても成り立っているからまぁいっか・・・そのうち覚えよう…。」とか言い訳をして、宙ぶらりんになっているものをひとつずつ掴んでスッキリしていこう！ということで、今回は、「Googleの定義するHTMLとCSSのガイドライン」を確認してみようと思います。 「知っていること」と「できること」は別の話。 近頃そんなことを痛感していますが、やはりWEBデザインに携わる者としてGoogleの公表するガイドラインは無視できません。ざ〜っと目を通して「理解した気」になっていてはいけない。覚えたことを、隣の人にもわかりやすく説明できてこそ知識と呼べるんじゃないか…と、自分を鼓舞しながら知識を共有できるように努め

レスポンシブサイトを作成するときに、画面サイズによって要素のクラス名を外したり、付与したりする方法をご紹介します。jQueryを使ってクラス指定をコントールしてみましょう。 サンプル1　・・・背景色を指定したクラス名を切り替える。 サンプル2　・・・背景画像に指定したクラス名を切り替える。 以上の２つを見てみましょう。 デモサンプル サンプル1 ↓ウィンドウサイズが640px以下になると・・・ 背景が赤色になります。 サンプル２ ↓ウィンドウサイズが640px以下になると・・・ 朝の風景に切り替わります。 それではコードを見ていきます。 HTML <div id="colorBox" class="bluebox"><p>Red / Blue</p></div> <div id="imageBox" class="morning-a"></div>

スマホサイトの作成においてワイヤーを引く際に、まず悩むのが「メニューをどうするか？」ということ。 サイトの印象を大きく左右するその「メニュー」について、それぞれどういったことを考え、適切なメニューのタイプを決めれば良いのか？ そのメリットやデメリットについて考えてみたいと思います。 2015年8月現在で見られるスマホサイトでよく見られるタイプを7つに厳選してみました。 ドロップダウンメニュー スライドメニュー ヘッダーメニュー モーダルウィンドウメニュー タブメニュー スプリングボードメニュー ドリルダウンメニュー 1.ドロップダウンメニュー 現在最も採用されているのがこのタイプです。左上や右上に「3連ドット」のマークをよく見かけると思いますが、いつのまにかこのマークが「メニュー」であるということが、当たり前のように認知されているのではないでしょうか？ チャンピオン | Champion

画面上をスクロールした際に、メインとなるナビゲーションを常に画面の一番上に表示される形をとりたい時の簡単な方法をご紹介します。常に他のページへのリンクが可能になるので便利ですが、あまり高さを取りすぎてしまうとコンテンツ部分が見える範囲が必然的に狭くなってしまうので、可視エリアを配慮しながら利用したほうがいいかもしれません。 まずは、サンプルをご確認ください。 DEMO ※スクロールすると画面の上部にメニューが固定表示されるかと思います。 それでは見ていきましょう。 1.HTMLを記述 サンプルとして、liタグで横幅25%に指定しfloatさせることで4つのメニューを配置。 <nav id="fixed-navi"> <ul> <li><a href="#">NAVI1</a></li> <li><a href="#">NAVI2</a></li> <li><a href="#">NAVI3

p { background: url("../images/text-bg.jpg"); -webkit-background-clip: text; -webkit-background-size: cover; -webkit-text-fill-color: transparent; -webkit-animation: 10s infinite linear animate; font-size: 100px; font-weight: bold; text-align: center; } @-webkit-keyframes animate{ 0% {background-position: 0;} 100% {background-position: -1000px 0;} }

LightBox風に画像をポップアップして表示するjQueryのプラグインでColorBoxに似たようなビジュアルになっています。レスポンシブに対応していてカスタマイズも出来るので色々と便利に利用できそうですね。 デモサンプル 1.fancyBoxからファイル一式をダウンロード fabcyBox -Fancy jQuery Lightbox Alternative 2.jQuery本体とCSS,JSファイルを読み込む <!--//* CSS読み込み *//--> <link rel="stylesheet" type="text/css" href="css/jquery.fancybox.css" media="screen"/> <link rel="stylesheet" type="text/css" href="css/jquery.fancybox-buttons.css" m

今では、様々なスライダーのプラグインが存在しますが、バリエーションの多さや対応の幅で使いやすいと評価の高い「slick」をご紹介します。スマホやタブレット端末などでの「スワイプ機能」にも対応しているので色々と使い勝手が本当にいいです！ まずはこんな感じ！といった「デモサンプル」を用意しましたので確認してみてください。 デモサンプル1 横幅固定でセンター寄せのスライドになっています。左右にカルーセル付きの仕様になっています。 それでは使い方を見ていきましょう。 1.ファイルをダウンロード はじめに、ファイル一式を公式サイトからダウンロードします。 slick 「slickフォルダ」の中に以下のファイルが入っています。 これを任意の場所に配置して読み込みましょう。サンプルでは、ルート階層に「slickフォルダ」を配置したと仮定して話をしていきます。 2.必要なファイルを読み込む CSSを読み込

通常、デフォルトで用意する「style.css」を読み込んでいますが、「ユーザーエージェントごと（PC/iPad/iPhoneなど）に分けてCSSを利用したい」、「基本設定はstyle.cssに記述して細かい指定はsub.cssとして読み込みたい」など、それぞれ理由は違うと思いますが、そのようにCSSを小分けにして利用したいときに、どのように読み込めばいいのか？という時の参考になればと思います。 まずはじめに「Wordpress」は、テーマフォルダの中に基本スタイルである「style.css」を配置しておかないと作動しませんので注意してください。 1.style.cssから@importで複数読み込む方法 通常読み込んでいる「style.css」を開きます。すると下記のような記述があるのが確認できるかなと思います。 ▼無料テーマTwenty Thirteenの場合 /* Theme Nam

グローバルナビゲーションの仕様は、その時の流行によって左右されやすいものです。その中でも、安定してそのスタイルが良く扱われている「固定ナビゲーション」の指定方法をご紹介しておきます。今回はjQueryを使って、グローバルナビゲーションのデフォルトの位置を取得し、それ以上の値がスクロールされたら上部に固定するというものを作成していきます。 まずはサンプルを確認してみてください。 DEMO スクロールをすると横に5つ並んだグローバルナビゲーションが上部に固定されるのが確認できると思います。 サンプルを見ながら確認していきましょう。 HTMLを記述 まずは、サンプルにも使っている横に5つのボタンを配置した場合のhtmlコードを記述します。 <div id="globalNavi"> <ul> <li><a href="#">Menu1</a></li> <li><a href="#">Menu2

CSS3の新たなプロパティ「transform」と「border-radius」を使って、CSSのみでいろんなカタチを表現できるようになりました。すべてを暗記するのも大変なのでコピペで再利用できるようにメモしておきたいと思います。 DEMO 正方形 -Square- 長方形 -Rectangle- 円形 -circle- 楕円形 -oval- 三角形（上） -Triangle Up- 三角形（下） -Triangle Down- 三角形（右） -Triangle Right- 三角形（左） -Triangle Left- 三角形（左上） -Triangle TopLeft- 三角形（右上） -Triangle Topright- 三角形（左下） -Triangle BottomLeft- 三角形（右下） -Triangle Bottomright- 湾曲した矢印 -Curved Tail

目新しいものではありませんが、スマホサイトなどでよく見かける「左側からスルッっと現れるメニューリスト」を簡単に実現することができるjQueryプラグイン「sidr.js」の使い方を、初めて利用しようとしている人向けにメモしておこうと思います。 ▼まずは、デモサンプルを確認してみてください。 DEMO(dark) DEMO(light) このようなメニューを設置していきましょう。 1.sidrをダウンロード sidrからファイルを一式ダウンロードします。 sidr.js 2.CSSを読み込む デフォルトで用意されているテーマは「dark」「laght」の2種類です。お好きな方を選んでCSSを読み込みます。 <link rel="stylesheet" href="css/jquery.sidr.dark.css" /> <link rel="stylesheet" href="css/sty

唐突ですが、皆さんは「Bootstrap」を利用していますか？ 「何となく聞いたことがあるけれど結局何のことなの？」 「ちょっと使ってみたかったんだよね～。」 そんな方に向けて「Bootstarap」を基本から見ていきたいと思います。 必要性に迫られないと、新しいものやサービスって何かと後回しにしてしまい、「いつかやろう」「そのうち理解しよう」と、いつしか古いものになってしまったりするので、これをいい機会に少しずつサイト制作に取り入れていくキッカケになれば…。と思います。 Bootstrapとは？ Bootstrapとは、CSSの「フレームワーク」と一般的に呼ばれるものになります。そもそも「CSSのフレームワーク」って何？と言うと、Webサイト全体の基本的なスタイルを、はじめからある程度用意してくれている「ライブラリファイル」のことになります。 一般的に使用されるタグに対してある程度デザイ

PhotoShopなどに搭載されている機能のひとつである「描画モード」ですが、多くの方がこの機能を利用しているのではないでしょうか。その便利な「描画モード」がCSSで表現できるようになりました。CSSでこれが実現ができるとなるとPhotoShopがなくても画面上で多くの表現ができるようになってきますね。 描画モードとは？ 2つ以上の画像やカラーを重ね合わせて様々な描画表現ができる機能 対応ブラウザ Can I use で対応状況を確認 ※IEのみ非対応になっています。 ※Android BrowserやiOS Safarなどのスマートフォンも非対応ですのでPCブラウザでご確認ください。 使い方 1.表示エリアを用意します。 空の<div>要素を配置しています。

フルスクリーン画面でスクロールによるコンテンツ遷移と併せて、横にスライドする形式を実装できる「fullPage.js」をご紹介します。 まずは、サンプルをご確認ください。 DEMO それでは見ていきましょう。 1.ファイル一式をダウンロード 「fullPage.js」のサイトにアクセスしてファイル一式をダウンロードします。 fullPage.js: Create Beautiful Fullscreen Scrolling Websites ダウンロードファイルの中には、下図のようなファイルが入っています。 その中で、実際に利用するのは以下の4つになります。 jquery.fullPage.css jquery.easings.min.js jquery.slimscroll.min.js jquery.fullPage.js 2.jQuery本体とファイルを読み込む JavaScript

@keyframes move-twink-back { from {background-position:0 0;} to {background-position:-10000px 5000px;} } @-webkit-keyframes move-twink-back { from {background-position:0 0;} to {background-position:-10000px 5000px;} } @-moz-keyframes move-twink-back { from {background-position:0 0;} to {background-position:-10000px 5000px;} } @-ms-keyframes move-twink-back { from {background-position:0 0;} to {bac