おおはようございます。りんごです。
今日は、趣味とゆうか勉強で、
リキットデザインによるショップサイトを制作しようと思います。
制作ブログはまた随時日記に書いていきたいと思います！！
にしても、今日は天気が悪いですね・・・；；
うーん。
インク買いに行きたいのに！
こんにちわ。りんごです。
今回はリンク部分の指定についてです。
一般にリンクはa要素で表現し、リンク部分は状態によって変化します。
（マウスオーバーやクリック済みリンクなど）
そこで、状態別のリンク指定方法を、別々にＣＳＳで指定してあげます。
a要素で使用できる「疑似クラス」は
a:link {～表示方法の指定～}
a:visited {～表示方法の指定～}
a:hover{～表示方法の指定～}
a:activ {～表示方法の指定～}
この順序を守らないと、崩れるので注意しましょう。
夏にむけて
ケアはいかがですか？？
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
ただいま、なんと
3600円!!!!
で、脱毛プランが受けられます!!!
お得ですよ!!!
夏に向けて、
お肌のケアはいかがですか？？
両ワキ・ビキニライン脱毛1,800円
です。
また、両ワキ脱毛無期限6回1,800円
も、こんなにお得です！！
新店舗OPEN記念！両ワキ脱毛6回1,800円
では、また明日お会いしましょう！
ランキングクリック応援も宜しくお願いいたします。
今回はリンク部分の指定についてです。
一般にリンクはa要素で表現し、リンク部分は状態によって変化します。
（マウスオーバーやクリック済みリンクなど）
そこで、状態別のリンク指定方法を、別々にＣＳＳで指定してあげます。
a要素で使用できる「疑似クラス」は
a:link {～表示方法の指定～}
a:visited {～表示方法の指定～}
a:hover{～表示方法の指定～}
a:activ {～表示方法の指定～}
この順序を守らないと、崩れるので注意しましょう。
夏にむけて
ケアはいかがですか？？
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
ただいま、なんと
3600円!!!!
で、脱毛プランが受けられます!!!お得ですよ!!!
夏に向けて、
お肌のケアはいかがですか？？
両ワキ・ビキニライン脱毛1,800円
です。また、両ワキ脱毛無期限6回1,800円
も、こんなにお得です！！新店舗OPEN記念！両ワキ脱毛6回1,800円
では、また明日お会いしましょう！
ランキングクリック応援も宜しくお願いいたします。
上記のように 5000円 を消したいときの方法
ＨＴＭＬ
<p class="price">5000円</p>
<p class="offprice">1980円</p>
ＣＳＳ
span.price{
text-decoration:line-through;
fount-size:16px;
}
span.offprice{
color:#cc0000;
font-size:20px;
}
になります。
spanとは
要素自身は特別な意味を持ちません。
しかし、class属性、id属性などの汎用属性を使うことができます。
極めて汎用性の高いインラ
イン要素です。
特定のまたは任意の範囲だけにスタイルを適用するのに使われます。
また、span要素の中にstyle属性を配置することも可能です。
みなさんは！
読者様、通りすがりの皆様。
4月になりましたね＾＾
皆様からいろいろメッセージを頂き励みなります！
ありがとうございます＾＾ 現在ＫＯＫＩＡの「ありがとう」を聞いております。
つぶやきでも流しましたが、自分のサイトがもうすぐで完成になります。
ＵＰしたらお知らせいたしますね！ 早く横浜にも桜が咲くと良いです。
クリック応援宜しくお願いいたします。
↓ ↓ ↓ ↓ ↓ ↓ ↓
それでは皆様、
4月も宜しくお願いたします。
りんご
読者様、通りすがりの皆様。
4月になりましたね＾＾
皆様からいろいろメッセージを頂き励みなります！
ありがとうございます＾＾ 現在ＫＯＫＩＡの「ありがとう」を聞いております。
つぶやきでも流しましたが、自分のサイトがもうすぐで完成になります。
ＵＰしたらお知らせいたしますね！ 早く横浜にも桜が咲くと良いです。
クリック応援宜しくお願いいたします。
↓ ↓ ↓ ↓ ↓ ↓ ↓
それでは皆様、
4月も宜しくお願いたします。
りんご
トップページの構成要素について
●トップロゴ
すべてのページにロゴは使われていて、トップページへのリンクが貼ってある
●メインビジュアル
●新着情報
●ナビゲーション
各ページに進むボタン
●サイトの主要メニュー
ナビゲーションとかぶっても良い
●お問い合わせ/サイトマップ
●おすすめコンテンツ
●トップロゴ
すべてのページにロゴは使われていて、トップページへのリンクが貼ってある
●メインビジュアル
●新着情報
●ナビゲーション
各ページに進むボタン
●サイトの主要メニュー
ナビゲーションとかぶっても良い
●お問い合わせ/サイトマップ
●おすすめコンテンツ
お久しぶりです！
昨日は相棒を連れてみなとみらいまで散歩していました。
デジタル一眼レフは10万円前後するんですが、オリンパスは
なかなかお手軽な値段です。
私も買うとき悩んだのですが、初心者だったのでオリンパスさんを
利用することにしました！
私は黒を購入したんですが、白もすごく可愛いですよね！
レンズキットをわたしは買いました。
↓これが安くてオススメですよ！
三万円台でデジタル一眼レフはホントにお買い得ですよ！
興味のある方はぜひデジタルシアター倶楽部楽天市場店でお買い求めください！＾＾
宜しくお願いします。
昨日は相棒を連れてみなとみらいまで散歩していました。
こちら ↑ が相棒のOLYMPUSちゃん。デジ一です＾＾！
春が近づいてきて、晴れてる！花が咲いてる！
ってことで、デザイン写真素材を・・・・パシャ！っと集めてきました。
晴れてて気持ちよかったです！
こんな写真を撮りました！
やっぱりデジ一は必需品ですね。
デザイナーさん目指している人は、絶対あったほうが良いですよ！
デジタル一眼レフは10万円前後するんですが、オリンパスは
なかなかお手軽な値段です。
私も買うとき悩んだのですが、初心者だったのでオリンパスさんを
利用することにしました！
私は黒を購入したんですが、白もすごく可愛いですよね！
レンズキットをわたしは買いました。
↓これが安くてオススメですよ！
 【送料無料！・代引き手数料無料！】【中古】《美品》OLYMPUS PEN mini E-PM1レンズキット(ブラ... |
 【facebook『いいね！』＆エントリーでポイント5倍！】[3年保険付き]【送料無料】OLYMPUS PEN L... |
 【SALE】【お買い得商品】【人気商品】デジタル一眼レフカメラ★オリンパス ★オリンパス・ペン... |
 【中古】 OLYMPUS E-PL2 WKIT BK【ミラーレス一眼】 |
 【送料無料！・代引き手数料無料！】【中古】《美品》OLYMPUS PEN E-P2パンケーキキット (ブラ... |
 【facebook『いいね！』＆エントリーでポイント5倍！】[3年保険付] 【送料無料】[数量限定特価]... |
三万円台でデジタル一眼レフはホントにお買い得ですよ！
興味のある方はぜひデジタルシアター倶楽部楽天市場店でお買い求めください！＾＾
宜しくお願いします。
letter-spacing
文字の感覚を制御するプロパティ。
:first-letter
特定要素の先頭文字を大きくするプロパティ。
文字の感覚を制御するプロパティ。
:first-letter
特定要素の先頭文字を大きくするプロパティ。
↑
こんなかんじ（わかりにくい？
例）
p{
linehignt: ;
color: ;
}
p:first-letter{
font-size: ;
float-left: ;
font-weight: ;
padding-right: ;
display: block;
}
大きさを指定するところは、好きな値を入れて実験してみてください！
ナビゲーションバーの制作
HTML
<ul id="***">
<li>***</li>
<li>***</li>
<li>***</li>
<li>***</li>
<li>***</li>
</ul>
CSS
#ulのid名{
width:横幅を指定;
list-style-type:none; ←リストのマークタイプを指定(noneでなしにする)
margin-left: 0px;
padding-left: 0px;
font-size:フォントサイズを指定 px;
}
#ulのid名 li{
width:ここのボタンの横幅指定;
float:left;
text-align:center;
border: ボーダーを好みのものを指定;
}
#ulのid名 li a{
display:block;
width:横幅指定;
padding: px;
text-decoration: none;
background-color: #背景色を指定;
color: #文字色を指定;
}
HTML
<ul id="***">
<li>***</li>
<li>***</li>
<li>***</li>
<li>***</li>
<li>***</li>
</ul>
CSS
#ulのid名{
width:横幅を指定;
list-style-type:none; ←リストのマークタイプを指定(noneでなしにする)
margin-left: 0px;
padding-left: 0px;
font-size:フォントサイズを指定 px;
}
#ulのid名 li{
width:ここのボタンの横幅指定;
float:left;
text-align:center;
border: ボーダーを好みのものを指定;
}
#ulのid名 li a{
display:block;
width:横幅指定;
padding: px;
text-decoration: none;
background-color: #背景色を指定;
color: #文字色を指定;
}
デザイナー見習いとして、日頃から注意していることは
街や電車の中雑誌などのデザインに敏感になることです。
1つ1つが自分のセンスや作品に繋がっていくと思います。
最近特に気になったのが
金麦の広告。
わかりやすく・遊び心があり・斬新
あと、あのブルーと”金”の文字を見ると
もう金麦かな？金麦だよ！
・・・とわかってしますインパクトと凄さ
ビール関連ですが
「グリーンラベる？」のCMも良いキャッチコピーだと思います。
CMの色合いもおしゃれですよね。
街や電車の中雑誌などのデザインに敏感になることです。
1つ1つが自分のセンスや作品に繋がっていくと思います。
最近特に気になったのが
金麦の広告。
わかりやすく・遊び心があり・斬新
あと、あのブルーと”金”の文字を見ると
もう金麦かな？金麦だよ！
・・・とわかってしますインパクトと凄さ
ビール関連ですが
「グリーンラベる？」のCMも良いキャッチコピーだと思います。
CMの色合いもおしゃれですよね。
ｊこんにちわ！りんごです＾＾
なんだかんだでもうすぐ春ですね！！
可愛い春服見つけたので紹介します。
デザインとはまったく関係ない日記です・・・orz
です！
Point.1すそ広がりのプリンセスライン。Point.2高めに設定されたウエストの切り替え♪。Point.3...なので大人っぽく着れそう＾＾
この春はガーリーを目指してみようと思います。！！
では！
次回はちゃんとデザイン日記やりますよ～
↑ ↑ ↑ 応援クリックよろしくお願いいたします！！
なんだかんだでもうすぐ春ですね！！
可愛い春服見つけたので紹介します。
デザインとはまったく関係ない日記です・・・orz
 Point.1すそ広がりのプリンセスライン。Point.2高めに設定されたウエストの切り替え♪。Point.3... |
Point.1すそ広がりのプリンセスライン。Point.2高めに設定されたウエストの切り替え♪。Point.3...なので大人っぽく着れそう＾＾
この春はガーリーを目指してみようと思います。！！
では！
次回はちゃんとデザイン日記やりますよ～
↑ ↑ ↑ 応援クリックよろしくお願いいたします！！