サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
GPT-4o
morobrand.net
新聞の折り込みチラシで、上のイメージのような文字を立体的に浮き出したような表現を見かけます。これってどうやって作ってるのかなぁ～っ？？？と思ったので色々と試してみましたが、比較的簡単にできる方法がありましたので記載しておこうと思います。 興味のある方はぜひやりながら作ってみてください。 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
CSSの「transform:scale()」を使用することで、マウスオーバー時などで要素を拡大・縮小することが可能になります。 各コンテンツへのリンク用に設置するサムネイル画像などなどによく見られますが、マウスオーバーした際に、そのサムネイル画像を少し拡大させるなどの動きを付けることでクリックを誘導するのにいいかもしれません。 DEMO 【やり方】 サンプルとして3枚のサムネイル画像を縦に並べてみます。サイズは横幅360px,高さ240pxです。 HTMLを記述 <ul class="pan"> <li><img src="images/pan1.jpg" width="100%"></li> <li><img src="images/pan2.jpg" width="100%"></li> <li><img src="images/pan3.jpg" width="100%"></li
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を読み込む
画面上をスクロールした際に、メインとなるナビゲーションを常に画面の一番上に表示される形をとりたい時の簡単な方法をご紹介します。常に他のページへのリンクが可能になるので便利ですが、あまり高さを取りすぎてしまうとコンテンツ部分が見える範囲が必然的に狭くなってしまうので、可視エリアを配慮しながら利用したほうがいいかもしれません。 まずは、サンプルをご確認ください。 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
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
jQueryを扱う上で、よく使用するイベントを簡単にまとめておきます。 イベントって何？ イベントとは、サイトを閲覧しているユーザーが、マウスボタンをクリックしたりスクロールをしたり、Webページ自体を開いたりする何らかのアクションを起こした状態に対し、ブラウザが発生させるものになります。スマートフォン独自のスライドやスワイプ操作なども、イベントのひとつに当たります。 そのイベントによりjQueryの処理を実行するタイミングというものを指定します。 まずはjQueryの基本的な構文を見てみましょう。 $(” “)の部分に対象となる「セレクタ（＝要素）」を入れて、その後ろに「.イベント」として処理をするきっかけとなるアクションを設定します。それから「(function(){ });」の{}の中に処理内容を記述します。 イベント一覧 要素がクリックされたとき
通常、デフォルトで用意する「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
雲や気球など、ふわふわ～っと浮かばせたいイラストなどをWEBサイト上に配置したいときに、jQueryプラグインの「jqFloat」を使えば実現できます。 まずは、デモサンプルを確認してみてください。 DEMO 1.jqFloatをダウンロード jqFloat プラグインを提供している「jqFloat」にもデモ画面が用意されているので、実際の動きを確認してみるのも良いでしょう。 2.jQueryとjqFloatを読み込む jsフォルダの中に「jqfloat.js」を配置しました。 <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="js/jqfloat.js"></script>
今回は、WEBサイトを作成する上でのレイアウト手法のひとつ「グリッドレイアウト」について考えていきたいと思います。最近では「フラットデザイン」や「レスポンシブデザイン」など新たな表現スタイルでそれぞれのWEBサイトの個性を出していますが、その中でも安定して広がりを見せているのが、コンテンツ配置に特徴のある「グリッドレイアウト」です。 以前は、フォトグラファーがポートフォリオを載せるような、ギャラリーサイトで多く見られたスタイルですが、現在では企業サイトなどでもトピックスを一覧で並べたり、制作実績を一覧で表示したりするなど、整然とした印象の中に、少し遊び心を感じさせるようなWEBサイトに採用されている傾向が見られます。 1.グリッドレアウトとは… グリッドとは「格子状の」という意味がありますが、画面を縦と横で分断した方眼のブロックを組み合わせて、コンテンツを配置していく画面設計手法のひとつに
Facebookやtumblr、TwitterなどのSNSサービス等でよく見られる、ページの一番下までスクロールをすると、それ以前のコンテンツを自動的に表示してくれる「jQuery.Bottom.js」をご紹介します。コンテンツが多くなるとページ送りで別ページへ遷移する構造もありますが、自動読み込みにすることでメリットのある場合には、取り込んでみるのも良いかもしれません。 1.jQuery.Bottom.jsをダウンロード jQuery.Bottom.js 2.jQueryとjquery.bottom.jsを読み込む <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascri
唐突ですが、皆さんは「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
次のページ
このページを最初にブックマークしてみませんか？
『morobrand.net』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
