MusicServiceすけどんhtml/cssで2行目以降字下げをするIE11でスタイルシートcssが読まれないshellで空白区切りの文字を分割するここは僕の冷蔵庫。後はあれして食べるだけ。月曜日HTML/CSSITプログラミングwordpressにyoutubeを張り付ける際のテクニックで、紹介したyoutubeのタグに、少し飾りつけをしてみようという記事です。wordpressにyoutubeを張り付ける際のテクニック参考たとえば、こんなタグで表示をかけたとしましょうか。</iframe></div>さてさて、唐突ですが、html/cssは、タグを目安に、装飾を施すわけですよね。iframeの2つのタグについて、色々装飾ができるわけです。こんな工夫からwordpressにyoutubeを張り付ける際のテクニックでも紹介しましたが、まずはこんな工夫から。100%;}横幅いっぱいに広げて、そのサイズ分のyoutube表示をする方法ですねん。装飾ですが・・・こっから装飾ですが・・・・。デザインの話をするつもりはないです(笑)div.youtubeのタグに装飾したりしてください。装飾のアイデアhtmlでは、htmlのタグに対して、css上で新たに子分タグを作ることが可能です。いくつでも作れるわけではないですけどね。先ほどのhtmlとcssでは、下記のようなレイアウトができあがります。このタグに少し特殊な装飾を施すことができます。div.youtubeのタグに紐づける形で表示する前に、表示するデザインを言える表示した後に、表示するデザインを言えるなんて便利な機能なんでしょ。イメージでいうと、こんな感じです。これにより、div.youtubeタグを表示する前後に、div.youtubeで指定したもの以外のものを表示することが出来るというわけですよ。前後で指定する「内容」は、完全に独立したDIVを張り付けるような感じです。元になるdiv.youtubeの前後に表示しなくとも、こんなこともできちゃいます。サンプルたとえば、こんな感じでyoutubeに装飾をつけられますよ。黄色の破線が、「表示する前」「表示した後」の加工をしたデザインです。子分タグですよって感じで「:before」や「:after」を付けてあげればいいだけです。css内容}尚、上記デザインの場所を任意にずらしたい場合は、cssのposition属性を下記のようにしてください。css内容}おためしyoutubeタグでやると、ちょっと難しいので、<p>タグで同じようなことをしてみましょか。<p>タグを表示する前に、左上らへんに「赤い四角」をかいてみましょか。ソースコードはこんな感じです。class="sample">タイトルです</p>下記に出力結果を。タイトルです—-コードの説明cssの説明です。p.sampleでposition属性をrelativeにして、後続に続くタグの位置を指定できるようにしてます。:before属性がついてるp.sampleで、p.sampleを表示する前のレイアウト定義してます。実際の:beforeの中をみていきましょ。position:absoluteは、このデザインの出力位置を、p.sampleの出力位置を起点にしますよーという意味です。実際にp.sampleを表示する際の左上座標を起点として、このデザインは出力しますよと。どこらへんに、どのぐらいの大きさで・・・っていうのが、leftやtopwidthやheightというわけです。上記では、topやleftにマイナスの位置を指定してますよね。これは、p.sampleの出力位置の「左上」の位置を基準にして、それよりも左側であり上側であるという意味です。右側がプラスで左側がマイナスの表記。右側に10ピクセル離すのであれば10pxと指定します。今回は左側に10ピクセル離したかったので、今回は-10pxとしてます。同じように、上下の位置もプラスマイナスで表記します。p.sampleの位置よりも20px下なら、top:20pxと記載し、上ならtop:-20pxです。rightやbottomなんてものもあります。先ほど紹介していたtop・leftは「基準にする位置をp.sampleを左上」にしていたのですが、right・bottomであれば、右下に基準位置がずれます。右下基準にして、どのぐらい離れるかというような感じでデザインするわけです。left・bottomで指定するのもありですし、right・topで指定するのもありです。後者は右上基準ですー。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。Nemuizo.comねむい蔵(nemuizo)へようこそ。Gem-one(ジェムワン)権蔵の冷蔵庫サイトです。私が、勉強した、経験した、頂いた情報を、貯蔵庫(このサイト)にしまっています。好きな時に出して、好きなように再利用していこうかなと。すけどんも絶賛運用中。Gem-one(ジェムワン)権蔵の冷蔵庫サイトです。私が、勉強した、経験した、頂いた情報を、貯蔵庫(このサイト)にしまっています。好きな時に出して、好きなように再利用していこうかなと。