IT・インターネット 新着記事一覧(143ページ目)

ページを下方向にスクロールしたとき、「ヘッダ部分は消えるのに、メニューバーはウインドウ上部に張り付いて固定される」というデザインの作り方をご紹介。最初から上端にあるものを固定するのではなく、「最初は上端にはない要素(メニューなど)」を「スクロールによって上端に到達した時点で固定する」方法を解説。jQueryプラグインのjquery.sticky.jsを使うと、ほんの数行の追記だけで簡単に作れます。

ページの端にあるナビゲーションメニューは、閲覧者がスクロールすると上方に消えてしまいます。それを防ぐため、スクロールの途中でメニューだけを固定させてみましょう。「メニューを作るボックスの表示位置」と「ユーザのスクロール量」とを比較して、メニューの固定・非固定を切り替えるスクリプトを作ります。jQueryを使えば簡単です。

CSS3で追加された「border-image」プロパティを使えば、枠線の模様を画像で描画できます。しましま柄の画像を枠線として指定すると、とても目立つ「しましま(ストライプ)柄」のボックスを簡単に作ることができます。実線・破線といった平凡な枠線ではなく、もっと凝った枠線を引きたい際に便利です。border-imageプロパティの使い方を解説します。

「ページ内リンク」がクリックされた際の移動を、視覚的に分かりやすくしてみましょう。アニメーションするように滑らかにスクロールさせるスクリプト「smoothscroll.js」と、移動先要素を装飾する「:target疑似クラス」（CSS3）の使い方をご紹介。

ウェブページ上で段組レイアウトを簡単に作る方法の1つとして、「グリッドレイアウトを提供するフレームワーク」を活用する方法があります。とはいえ、大規模なフレームワークを段組作成のためだけに導入するのは不都合もあります。そこで、グリッドレイアウト機能だけを提供してくれるシンプルなCSS「Responsive Grid System」を使って段組レイアウトを作成する方法をご紹介。

左上と右上の角を丸くして「タブ」に見えるデザインをHTMLとCSS(スタイルシート)で作成する方法を解説。リンクに長方形の枠を加えて上側の角を丸くすると「タブ」らしく見え、視覚的に分かりやすいナビゲーション機能が作れます。文字はテキスト・配色はCSSで記述するため、ソースをコピーするだけでいくつでも並べられ、修正も簡単です。

スタイルの適用先を指定する「セレクタ」には、様々な条件で対象を絞り込める書き方が用意されています。うまく活用すれば、いちいちHTML側にclass属性やid属性で名前を割り振らなくても、CSS側だけで柔軟に適用先を限定できます。

Excelを使って、実際の業務でも使用できる本格的な御見積書の作成例を紹介します。御見積書は、最も頻繁にやり取りされる必須文書ですね。ぜひここで、エクセルでの御見積書の作成方法をマスターして下さい！

御見積書をサンプルとして、エクセルで実践的な数式を作成する方法をわかりやすく解説します。ただ計算式を入力するだけでなく、見栄えも考慮した必須テクニックもあわせてご紹介！

CSSの「clipプロパティ」を使うと、画像をソフトウェアで加工したりすることなく、自由なサイズにトリミング(切り抜き)ができます。画像の周囲をカットしたり、画像の中の特定の箇所だけを見せたい場合に、画像を直接加工せずに済むので手軽です。切り抜き範囲を数値で指定するだけで、画像中の任意の部分を四角形に切り取って表示できます。