WEBデザイナーがHTML

WEBデザイナーがHTML

ホームピグアメブロ

芸能人ブログ人気ブログ

17May
- ドットインストールで動画学習 #12
  #12 box-shadowで影をつけよう.icon { border-radius: 50%; border-color: white; border-width: 5px; border-style: solid; box-shadow: 0 0 5px gray}→　1文で書く事が可能border: 5px solid pink;box-shadow:x　方向のズレy　方向のズレblur　ぼかし具合color　色
14May
- アメンバー限定記事ビケット　top_popular
13May
- アメンバー限定記事ビケット　top_good　
09May
- ドットインストールで動画学習 #10　#11
  #10 marginの相殺について理解しようsection { text-align: center;}section h1 { font-weight:normal;}マージンの相殺マージンが隣接した場合は、幅の広い数値と幅の狭い数値の場合広い数値が優先される#11 border-radiusを使ってみよう.icon { border-radius: 50%;}半径が1辺の50%でまんまるになる！1辺の半分のpxでも指定可能。コントロール＋シフト＋D　複製コントロール＋／　コメントアウト
01May
- アメンバー限定記事ビケット　top_mainimage　スライダー
30Apr
- ドットインストールで動画学習 #9
  #9背景画像を設定しようheader{ background-imag: url(img/○○○.jpg); height: 240px; background-size: cover; background-position: 50% 50%;}background-size: cover;　→縦横比を保持したまま大きく表示background-position: 50% 50%;→ブラウザの幅を変化すると画像の左上を起点に画像のサイズが変わるので画像の中央を指定---background-image : url( );　　background-image : url( ); の ( ) 内に画像パスを指定background-repeat : ;　　background-repeat : ; の : ; 内に画像の表示パターンを指定background-position : ;　　background-repeat : ; の : ; 内に画像の座標位置を指定background-attachment : ;　　background-repeat : ; の : ; 内にブラウザスクロール時の画像動作を指定HTMLの基本のタグで指定した場合は、画像は繰り返し表示HTMLは基本的に構造や内容を表すもの一枚の画像を全画面で表示したい、背景を固定したいとなどといった場合は、CSS！！！
29Apr
- ドットインストールで動画学習 #8
  #8セレクターの指定方法header li > a { text-decoration: none;}半角空白で区切るとヘッダー内の全ての要素不等号記号で区切ると（li > a） liの直下にある要素という指定ができるセレクタとは…スタイルを適用する対象を指定するものHTML<p class="sample1 sample2">2種類のスタイルが同時に適用されます</p>CSSp.sample1 { color:red;}p.sample2 { font-size:18px;}その他○ > ○　（子要素にのみ適用）○ + ○　（隣接している要素に適用）○~ ○　（後にある要素に適用【CSS3】）:first-line　（最初の行にだけ適用）:first-child　（最初に現れる要素にだけ適用）:first-letter （最初に現れる文字にだけ適用）
26Apr
- ドットインストールで動画学習 #7
  #7リンクに初期値で下線aタグを修正a { text-decoration: none;}bodyに色を指定したのに、aタグの中の要素の色が変わらない。要素を引き継ぎたい時color: inherit;a:hover { color: blue;}疑似クラス…ユーザーがポインティングデバイスで要素に反応したものの、アクティブ化する必要がないもの（よくわからん…）背景の色が変わるa:hover { background-color: gold;}透明に近づける.hover1:hover { opacity: 0.6;}色が反転.hover2:hover { background: #333; color: #fff;}凹むボタン.hover3:hover { border-bottom-color: transparent; transform: translateY(0.1875em);}浮き上がって影.hover4:hover { box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.25);時計回りに回転.hover7:hover { transform: rotateZ(360deg);} transform: translateY(-0.1875em);}画像が拡大.hover10:hover { cursor: pointer; transform: scale(1.1, 1.1);}アンダーラインが登場.hover9:hover { cursor: pointer;}.hover9:hover::after { width: 100%;}
24Apr
- アメンバー限定記事ドットインストールで動画学習 #5 #6
23Apr
- アメンバー限定記事ビケット　ヘッダー
19Apr
- ドットインストールで動画学習 #3 #4
  CSSを別ファイルに保存して読み込み！<!DOCTYPE html><html><head>　<meta charset="UTF-8">　<title>HTML5サンプル</title>　<link rel="stylesheet" href="css/style.css"></head><body>　<h1>CSSの練習</h1>　<p>TESTTESTTESTTESTTESTTESTTEST</p></body></html>【h1に赤をあてる】h1 {color: red}【Ｐにも赤を当てたい場合】body {color: red}【ピンクの境界線をつける】body {color: redborder: 1px solid pink;}
15Apr
- ドットインストールで動画学習 #1 #2
  ＣＳＳが絡むと、てんで意味わからなくなってします。どうにか早く覚えるコツはないんだろうか…。今日から動画学習も追加。ＨＴＭＬを学んだ人が、ＣＳＳを勉強するのか…https://dotinstall.com/lessons/basic_css_styles/45401まずはＨＴＭＬ<!DOCTYPE html><html><head>　<meta charset="UTF-8">　<title>HTML5サンプル</title></head><body>　<h1>CSSの練習</h1>　<p>TESTTESTTESTTESTTESTTESTTEST</p></body></html>#2 実際の書き方<h1>Title</h1>h1 {　→セレクター　color: red; →宣言（左、プロパティ/右、値）}h1 { color: red; } →これでもよい/* comment */
03Apr
- アメンバー限定記事2019年4月3日　新しいサイト！
01Apr
- 2019年4月1日　floatはもう古い。
  ほうほう、こんなのもあるのか！と思ったら、もうfloatってのは使われていない。との事。古いサイトを見直してたから当たり前なんだけどでも、ＷＥＢの世界では古いサイトだからじゃなくて、当たり前にこんな事がおこってるのかと…そう考えるとＷＥＢデザインの世界はまだまだ目の前の仕事に追われることが多いんだな～昨日のデザインが古臭い！なんていわれることはないし。って事でfloatよりも簡潔なコードで、ボックスの豊富なレイアウトが可能な「Flexboxフレックスボックス」・flex-start → 始端揃え（左揃え、初期値）・center → 中央揃え・flex-end → 終端揃え（右揃え）・space-between → 均等配置（両端ボックスは始端と終端）・space-around → 均等配置（両端ボックスは始端、終端からボックス間隔の半分の距離）・stretch → 親要素と同じ高さに伸びる（初期値）・flex-start → 始端揃え（上揃え）・center → 中央揃え・flex-end → 終端揃え（下揃え）
14Mar
- 2019年3月14日　letter-spacing:
  今日のデザインはコレ！<div class="concept_midashi"> <p>会社の特徴</p></div><div class="right_greenbox"> <dl> <dt>□□□□□□□□□□□□</dt> <dd>□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□</dd> <dt>□□□□□□□□□□□□</dt> <dd>□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□</dd> <dt>□□□□□□□□□□□□</dt> <dd style="padding-bottom: 0;">□□□□□□□□□□□□</dd><br>　→下の文字との隙間をなくすため <span class="concept_detail"> <a href="/□□□□□□">□□□□□□□□□□</a> </span> </dl> <p>□□□□□□□□□□</p></div>-------------.concept_midashi { background-image: url(/img/concept_□□□□.gif); background-repeat: no-repeat; width: 607px; height: 28px; margin: 30px auto 15px auto;}.concept_midashi p,.news_midashi p { color: #735844; font-size: 15px; font-weight: bold; letter-spacing: 1px;　→文字の間隔を指定 padding: 2px 0 0 15px; margin: 0;}.right_greenbox { width: 585px; border: 10px solid #82c988;　→solid…1本線で表示 margin: 0 auto;}.right_greenbox dl { padding: 30px 20px 0 20px;}.right_greenbox dt { font-size: 15px; letter-spacing: 2px; padding: 0 0 8px 0; color: #000; font-weight: cold;}.right_greenbox dd { font-size: 12px; letter-spacing: 1px; padding: 0 10px 20px 10px; color: #3a3a3a;}.right_greenbox span { color: #5ab461;}.right_greenbox p { margin: 0px; color: #333; text-align: right; padding: 0 25px 15px 0; font-size: 13px;}.concept_detail { font-size: 10px;}.concept_detail a { color: #5ab461;}-------------この3つを分ける意味はなんだろう・・・ひとつにまとめちゃダメなの？？.right_greenbox span { color: #5ab461;}.concept_detail { font-size: 10px;}.concept_detail a { color: #5ab461;}
13Mar
- 2019年3月13日　vertical-align: bottom;
  今日のデザインはコレ！<div class="top_border□□□"> <img src="/img/top_border□□□.gif" alt="会社紹介"></div><div class="□□□_imgbox_cf"> <div class="clinic_img"> <a href="/□□□#jump1"><img src="/img/□□□_img1.jpg" alt="作業風景"></a> </div> <div class="clinic_img"> <a href="/□□□#jump2"><img src="/img/□□□_img2.jpg" alt="作業風景"></a> </div> <div class="clinic_img"> <a href="/□□□#jump3"><img src="/img/□□□_img3.jpg" alt="作業風景"></a> </div> <div class="clinic_img"> <a href="/□□□#jump4"><img src="/img/□□□_img4.jpg" alt="作業風景"></a> </div> <div class="clinic_img"> <a href="/□□□#jump5"><img src="/img/□□□_img5.jpg" alt="作業風景"></a> </div></div><div class="top_border_under"> <img src="/img/top_border_under.gif" alt="会社紹介"></div>---------------.□□□_imgbox_cf { width: 932px; margin: 10px -32px 10px 11px; overflow: hidden;　→ボックスからはみ出した場合は削除}.□□□_img { width: 150px; float: left; margin: 0 32px 0 0;}.□□□_img img { padding: 1px; border: 1px solid #b19e8f;　→グレーの枠線をつける vertical-align: bottom;　→　よくわからぬ}-------------vertical-align: bottom;揃え位置の指定をするようだけど・・・bottom　→　親要素、または先頭行のセルの下端と揃う。下にぴったりくっつくという事ではないのかな？https://dekiru.net/article/13123/今日はこんなところ！
11Mar
- 2019年3月11日　float
  今日はこのデザイン！<div class="topright_stripe cf"> <div class="stripe_left"> <p>□□□□□□□□□□□□□□□□□□□□□<br> □□□□□□□□□□□□□□□□□□□□□<br> □□□□□□□□□□□□□□□□□□□□□<br> □□□□□□□□□□□□□□□□□□□□□<br> </p> </div> <div class="stripe_right"> <img src="/img/□□□□.jpg"> </div></div>--------------.topright_stripe { background-image: url(/img/topright_stripe.gif); background-repeat: no-repeat; width: 608px; height: 180px; margin: 0 auto;}.strioe_left { width: 608px; float: left;}.stripe_left p { margin: 0; padding: 20px 15px 0 23px; color: #735844; font-size: 13px; line-height: 20px;}.stripe_light { width: 204px; float: left; margin-top: 18px;}--------------floatとは…leftボックスを左側に寄せ、右側に後続の内容を回り込まるrightボックスを右側に寄せ、左側に後続の内容を回り込まるnone（初期値）フロート（浮動化）しない要素が回り込んで横並びに出来るらしい…http://taneppa.net/float/
06Mar
- 目標　1ヶ月に1サイト分解すること
  4月→https://3step.co.jp/　3ＳＴＥＰ様5月→http://gotemba-biquette.jp/　ビケット様6月→https://hakone-survival.com/　箱根サバイバルゲーム様今期中に、自社サイトの2、3ページを作らせてもらう。