【CSS 3】border 要素にグラデーションを施す方法。
通常これまでは、1px のボーダーのグラデーションを実現する際、背景画像を用意して［background-image］プロパティを利用するのが一般的な方法でした。 しかしレスポンシヴ・デザインやスマートフォン対応のWebサイトの構築などにより、この方法では相応しくないケースが多くなってきました。 何か他の方法を探して代替しなければなりません。 さて。ここでブレイクスルー。 今回は［CSS3］のテクニックの１つとして、ボーダーのグラデーションを、画像を使わずに CSS のみで表現する方法をご紹介します。 まずはサンプルをご覧ください。 綺麗なグラデーションになっていますね。 ボーダー・グラデーション：サンプル HTML の記述は以下のように。 <div id="sample"> <p>このボックスの枠（border）を、CSS3 のテクニックを使ってグラデーション化させます。</p> </d
【CSS】ボックスを［height:100%;］で画面全体に表示させる方法。
CSSを使ってボックスを画面全体に表示させたいとき、通常は［height:100%;］と指定するだけなのですが、なぜか思いどおりの高さにならず、1時間近くもハマってしまいました。 ウェブ制作者ならば誰もが一度は陥るであろうこの問題の解決策を、個人的な備忘録も兼ねて紹介します。 例えば以下のような html があったとします。 <html> <head> <title>ボックスを［height:100%;］で画面全体に表示させる方法。</title> <body> <div id="main"> <h1>親要素の高さに合わせる</h1> 親要素の高さに合わせるには親要素に具体的な高さが設定されている必要がある。 </div> </body> </html> ここで <div id="main">〜</div> の高さをウィンドウのサイズに合わせたいとき。 一見すると body 要素の高さがウ
【Font】使い勝手の良いオススメの Google Web Fonts サンセリフ系 × 11選。
今日は、誰でも無料で利用できる Google Fonts の中から、オススメのサンセリフ体のフォントを11個まとめて紹介します。 サンセリフ（仏: Sans-Serif）とは、セリフのない書体の総称である。セリフとは、文字の線の端につけられる線・飾りで、「うろこ」、「ひげ飾り」、「ひげ」とも呼ばれる。旧来のセリフのついた活字書体（セリフ体・ローマン体とも呼ぶ）と区別するために用いられる用語。「サン」とは、フランス語で「〜のない」という意味で、「セリフのない書体」を表している。グロテスク体とも呼ばれる。 Wikipedia サンセリフ体で有名なものでは『Heveltica』や『Gill Sans』や『Futura』などのフォントが挙げられます。 残念ながらこれらのフォントは版権などの事情があり Google Fonts では扱っていません。しかし似たような書体ならウェブフォントで無料で利用す
【JavaScript】ページをスクロールすると要素が動きながら表示される［SCROLL TRIGGER］の使い方
ページのスクロールに連動して様々なエフェクトで要素が表示されていくJavaScriptプラグイン［SCROLL TRIGGER］を紹介します。 実際に導入したサンプルは以下より。 SCROLL TRIGGER DEMO : https://on-ze.com/demo/js-scroll-trigger/ 各要素のモーションは CSS3 のアニメーションに依存しており、痒いところに手が届く細やかな動作も実装可能。 最小限の手間でクオリティの高いサイトを構築できるのでオススメです。 公式サイトは以下。 ScrollTrigger : https://terwanerik.github.io/ScrollTrigger/ GitHub : https://github.com/terwanerik/ScrollTrigger jQuery不要で動くので、GitHubから動作に必要なファイル［S
【jQuery】ほんの少しのコードでページ読み込み時にフェードインのエフェクトを追加する方法。（改訂版）
【jQuery】ほんの少しのコードでページ読み込み時にフェードインのエフェクトを追加する方法。（改訂版） ウェブページ読み込み時に「フワっ」とした感じのエフェクトでフェードインしながら表示させる方法です。 ここでは「これ以上簡単にはできないよ！」というくらい、ほんの僅かなコードで実装するテクニックを紹介します。 まずは HTML の記述方法から…。と言いたいところですが、今回紹介する方法では何も考えずにフツーにHTMLを書いてしまっても大丈夫です。 スタイルシートも使いません。 すべてをjQueryのコードだけで賄います。 というワケでjQueryの記述方法です。 「fade.js」とでも名付けた JavaScript のファイルを用意して、その中に以下のように記述します。 $('head').append( '<style>body{display:none;}' ); $(window
HTML の 〜 内に書くタグの順番にも気を遣ってみた。
今アナタがご覧になっている、このオンズのウェブサイトでは読み込み速度のスピードアップや各種マークアップのクオリティ維持のために随時徹底した改善作業を行っています。 これまでも本ブログにて様々なテクニックを紹介してきましたが、今日は<head>〜</head>タグ内のコードにフォーカスして、弊社が実際に行っているHTMLマークアップの考え方を紹介していきます。 ブラウザで「要素を検証」して実際にコードを見てもらうのが手っ取り早いのですが、参考までに以下にコードをコピーして記載します。 今日（2016年1月20日）現在のオンズのウェブサイトの<head>〜</head>タグは次のように記載されています。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="author" content="//on
【jQuery】今こそマスターしたい高機能スライダー［Slider Pro］の使い方
数あるjQueryスライダーの中から目的の用途に合ったものを探すのはちょっとした手間ですが、今日紹介する［Slider Pro］は完成度も高く機能も豊富なので、一度試してみることをオススメします。 名前に「Pro」と付きますがMITライセンスで基本的に個人でも商用でも無料で利用できるのでご心配なく。 特筆すべき機能としては以下のようなものがあります。 レスポンシヴ対応 ブレイクポイント設定可能 スワイプ操作、タッチ操作に対応 サムネイル設定 縦・横、両方のカルーセルに対応 フルスクリーン・モードが可能 Retinaディスプレイ用の画像の切り替えが可能 MITライセンス ……などなど。 文字通り「痒い所に手が届く」素晴らしいjQueryプラグインです。 実際に使ってみるとスグにその便利さを感じることができるはず。 試しに実装したサンプルは以下のURLからどうぞ。 ［Slider Pro］：実
【最新バージョン7.3対応】jQuery無しで動く神スライダー［Swiper］が便利すぎて。
今日紹介する［Swiper］は、レスポンシブ対応サイトなどで真価を発揮するJavaScriptベースの「コンテンツ・スライダー」です。 初見の感想は「反応速度が早く軽量でサクサク動く」という印象。 レスポンシブにも対応済み。マウスのドラッグ操作やタッチコントロールのスワイプにも反応して操作性が良く、文句ナシのクオリティでした。 機能が豊富で、ざっと紹介すると以下のとおり。 レスポンシブ対応 フルスクリーン化OK ページネーション設置 縦方向のスライド カルーセル・モード 各スライドの位置を固定しない「フリーモード」対応 複数行のスライドに対応 縦方向・横方向の「入れ子」に対応 マウスのドラッグ操作に対応 スクロールバー表示 ナビゲーションボタン表示 無限ループ対応 フェードイン・フェードアウトによるスライドの切り替え 3D キューブ・エフェクト 3D カバーフロー・エフェクト キーボード・
【jQuery】レスポンシヴ対応の高機能・高品質スライダー［slick］の使い方。Ver.1.8.1対応
【jQuery】レスポンシヴ対応の高機能・高品質スライダー［slick］の使い方。Ver.1.8.1対応 高機能・高品質なjQueryスライダー［slick］の使い方を紹介します。 このjQueryスライダーは「FlexSlider」「BxSlider」「flickity」「Swiper」など、他の優良jQueryプラグインと並んで紹介されることも多く、公式サイトでは「the last carousel you’ll ever need.（訳：あなたが必要とする最後のカルーセル）」と謳われており、実際、オプションの豊富さや安定した挙動が評価され、多くの制作者様がオススメし、また実際のウェブサイトでもよく使われています。 公式サイトは以下。 公式サイト：slick 「get it now」というリンクを押した後、「Download Now」をクリックすると配布されているファイル一式をダウンロ
【jQuery】超万能スライダー FlexSlider の使い方をマスターする。 - ONZE
今日紹介するのは jQuery プラグインの［FlexSlider］です。 これ、かなり便利です。 レスポンシヴ対応、タッチコントロールのフリックスライドにも反応、カルーセルもＯＫ、画像にリンクを貼ることはもちろん、キャプションも表示可能、動画もスライドできる、コントロールボタンやナヴィゲーションも細かく設定できる…。まさに“超万能”のスライダー。 とにかく「なんでもできる」印象で、スマートフォン対応サイトなどでは特に真価を発揮するのではないでしょうか。 まずはサンプルをご覧ください。 【FlexSlider】→サンプルデモ 高機能ですが、その導入方法は比較的簡単です。 ［FlexSlider］の導入方法 まずは以下のサイトから［FlexSlider］のプラグイン本体をダウンロードします。 http://flexslider.woothemes.com 続いて <head>〜</head>
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
