2013-01-01から1年間の記事一覧
「FlexSlider」を使用して複数の画像をスライドショーさせる手順をまとめておきます。 「FlexSlider」を設置する際に行なう作業は、以下の三箇所です。 ● htmlのhead内にJQuery本体と各ファイルを読み込ませる。 ● htmlのhead内にスクリプトを記述する。 ● b…
cssでレイアウトをしていく際にpositionプロパティを使う機会は多いので、「static」「relative」「absolute」「fixed」の使い方についてをまとめておきます。 目 次 1. positionプロパティとは 2. 使い方、用途は？ 3. 移動させたい要素に｢ position : stat…
画面をスクロールさせて、指定した要素がトップの位置に来た時に、トップに固定表示させる方法をまとめておきます。 グローバルナビやサイドバーをはじめ、ページ途中にある要素を固定配置させたい時に便利です。 作業内容は以下の三箇所です。 ● htmlのhead…
「 ご宴会予約用チラシ 」の制作。
イベント誘致用のチラシ チラシ作りました。 テーマ・コンセプトは、イベント誘致用。 ・さり気なく控え目に筆文字を入れる・モダンな仕上がりにする・シズル感を出す・筆文字を書く台紙を和紙風にする といったところを表現しました。
新店舗オープンの集客用のチラシの制作。
大感謝祭用のチラシの制作。
JQueryを使うための準備についてをまとめておきます。 手順は以下のようになります。 1 スクリプトを動かすために必要な JQuery のファイル( 本体 )をhead 内に設置する。 2 プラグイン本体を設置し、色々なスクリプト(実行コード) を書いていく。 1. まずは…
CSSで複数のセレクタ名を並べる時の記述で、要素名(タイプ名)やクラス名やID名の間に「半角スペース」を入れたり、入れずに詰めたり、「 , ( カンマ ) 」を入れたりと、いくつかの記述方法があります。 ここは間違えやすいところでもあるので、ミスしがちな …
文字に影をつけるCSSはよく使うので、とくに使用頻度の高い3パターンのコードをまとめておきます。 「text-shadow」プロパティの使い方 【 3パターン 】 文字(テキスト)に影をつけるには、「text-shadow」プロパティを使います。 記述のしかたは以下のような…
「 秋の味覚 」バナーの制作。
ここに挙げた3記事だけでも、色々なデザイン レイアウトに使えそう。 ワンポイントに使えるCSS3マウスオーバーアニメーション5種 | webOpixel 5種類だけだけど、どれも汎用性が高い <a href="http://www.webopixel.net/html-css/831.html…
要素の透明度を指定する際には、「opacity」プロパティを使用する。 透明度は、0.0（完全に透明）～1.0（完全に不透明）の数値で指定していく。 ただ、「opacity」を使った場合は、重なっている文字や子要素まで一緒に(オブジェクト全体が)透過されてしまう…
1 画面左側のツールアイコンの選択範囲ツールの中にある、「長方形選択ツール」を選ぶ。 2 対象となる画像を選択するか、角丸の形で切り抜きたい部分を選択。 3 画面上側の「選択範囲」から「選択範囲を変更」→「滑らかに」を選ぶ。 「半径」の数値を入力す…
切り抜きの方法は色々ある中で、ＣＳ５から追加された「境界線を調整」という機能を使うと、切り抜きたい部分の境界線が複雑なものでもかなり正確に切り抜くことができます。 手順としては、切り抜きたい対象物を選択して「境界線を調整」という機能で微調整…
フォトショップで、画像を配置して、それを修正して保存して、また配置して…と繰り返すと、その画像は劣化するのか？？という疑問があったので、検証してみました。 結論、 「 補正内容によっては劣化する。」 例えば、 1. 色を変える 形を変える → 劣化する…
イラストレータで、スウォッチのデータをカスタマイズしてオリジナルのカラーバリエーションを作った時、それを別のイラレファイルでも使えるようにするための方法です。 1 イラレファイルの画面上側にある｢ ウインドウ ｣をクリック 2 ｢ スウォッチライブラ…
***** リフレクトツールの使い方 ***** Dの地図をトレースする際は、"リフレクトツール"を使う。 対象とするオブジェクトを選んだら "リフレクトツール"に持ち替える。 基準となる点を目分量の所で "Alt"キーを押しながらクリックすると、 そこを基点にして…
***** 回転ツールの使い方 応用編 ***** 回転ツールを使って缶詰めをAからBに移動させる
***** 演習課題-13***** 《html》<html><head><meta charset="utf-8"><title>課題-13</title><link rel="stylesheet" href="kadai-13.css" madia="all"></head> <body> <div id="container"> <div id="content"> <div id="nav"> <ul> <li id="Information"><a href="#"><span>Information</span></a></li> </ul></div></div></div></body></html>
***** 演習課題-12 ***** 《html》<html><head><meta charset="utf-8"><title>課題-12</title><link rel="stylesheet" href="kadai-12.css" madia="all"></head> <body> <div id="container"> <div id="header"> <img src="images-12/logo.gif" alt="サンプルスタイルシートカンパニー"> </div> <div id="nav"> <ul> <li id="top"></li></ul></div></div></body></html>
***** 演習課題-11 ***** 《html》 <html><head><meta charset="utf-8"><title>課題-11</title><link rel="stylesheet" href="kadai-11.css" madia="all"></head> <body> <div id="container"> <div id="header"> <h1>Cafe de la plante</h1> <h2>サブタイトルサブタイトルサブタイトル</h2> </div></div></body></html>
***** 演習課題-10 ***** 《html》 <html><head><meta charset="utf-8"><title>課題-10</title><link rel="stylesheet" href="kadai-10.css" madia="all"></head> <body> <div id="container"> <div id="header"> <h1>Typograpy.71</h1> </div> <div id="nav"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">…</a></li></ul></div></div></body></html>
***** 演習課題-9 ***** 《html》<html><head><meta charset="utf-8"><title>課題-9</title><link rel="stylesheet" href="kadai-9.css" madia="all"></head> <body> <div id="container"> <div id="header"> <div id="sub-header-1"> <h1>Computer Technology Groups</h1> </div></div></div></body></html>
***** 演習課題-8 ***** 《html》 <html><head><meta charset="utf-8"><title>課題-8</title><link rel="stylesheet" href="kadai-8.css" madia="all"></head> <body> <div id="container"> <div id="header"> <img src="images-8/p_mystery.jpg" alt="メインロゴ" width="195" height="102"> <div id="main-title"> <h1>…</h1></div></div></div></body></html>
***** 演習課題-7 ***** 《html》 <html><head><meta charset="utf-8"><title>課題-7</title><link rel="stylesheet" href="kadai-7.css"></head> <body> <div id="container"> <div id="content"> <h1>薬玉文様（くすだまもんよう）</h1> <p>薬玉とは、薬・香料を玉にして錦の袋に入れ、造花や蓬・菖蒲などを飾り、五色の糸を長く垂らしたもの。古代中国で端午の節句に薬玉を柱などに掛け、邪気払いや長寿を祈願する風…</p></div></div></body></html>
***** 演習課題-6 ***** 《html》 <html lang="ja"><head><meta charset="utf-8"><title>初心者課題-6</title><link rel="stylesheet" href="kadai-6.css"></head> <body> <div id="container"> <div id="header"> <h1>フンデルトヴァッサー・ハウス</h1> <p id="sub-title">ウィーンの市営住宅はこんなに元気だ！</p> </div> <div id="content"> </div></div></body></html>
***** 演習課題-5 ***** 《html》 <html lang="ja"><head><meta charset="utf-8"><title>初心者課題-5</title><link rel="stylesheet" href="kadai-5.css"></head> <body> <div id="container"> <div id="header"> <h1>provence</h1> </div> <div id="wrapper"> </div></div></body></html>
***** 演習課題-4 ***** 《html》 <html lang="ja"><head><meta charset="utf-8"><title>初心者課題-4</title><link rel="stylesheet" href="kadai-4.css"></head> <body> <div id="container"> <div id="sidebar"> <p id="main-logo"><img src="images-4/logo.gif" alt="メインロゴ"></p> <p></p> <p> <ul> <li></li></ul></p></div></div></body></html>
