レスポンシブ対応のブログ・WebサイトなどにYoutube動画を埋め込む時の備忘録。CSSの設定でYoutubeのサイズをwindow幅に合わせて可変させることができます。
Youtubeの埋め込み動画をレスポンシブに対応させる方法 | WebClips_Design
レスポンシブ対応のブログ・WebサイトなどにYoutube動画を埋め込む時の備忘録。CSSの設定でYoutubeのサイズをwindow幅に合わせて可変させることができます。
ライブドアニュースの「ざっくり言うと」みたいなのを作ってみる - FOXISM
ライブドアニュースの記事は、アクセスするとまず「ざっくり言うと」と記事を3行でまとめたものが表示されます。これがけっこう好きだったりするので、似たようなものを作ってみました。 ライブドアニュースのざっくり言うと こういうやつです。 アイスボックス「グレープフルーツ」8月1日から販売休止 (2018年8月6日掲載) – ライブドアニュース 作ってみた html <div class="zakkuri"> <ul> <li>単にリストの先頭にチェックマーク付けてるだけ</li> <li>cssの疑似要素で最初の吹き出しを作成</li> <li>まぁ難しいことはやってない</li> </ul> </div> リストを<div class="zakkuri">～</div>で囲っているだけです。リスト部分ははてな記法とかで書いてあっても<ul>になるので大丈夫だと思います。 css .zakkur
【HTML/CSS】スマホに特化したテーブルデザイン！コピペで簡単
当サイトでは、Amazonアソシエイトをはじめとした第三者配信のアフィリエイトプログラムにより商品・サービスをご紹介、適格販売により収入を得ています。 比較表第2弾！スマホに特化したテーブルデザインを作りました！ 第1弾がこちら！ 関連 tableタグを使わない比較表デザイン！ 前回はtableタグを使わずに比較表を作る方法を紹介しました。 今回はtableタグを使って表を作りますがtableタグってスマホでみると「ギューっ」って詰まって見にくくなることありませんか？ 調整するのも面倒でなるべく使いたくないって人もいるのではないでしょうか。 そこで今回、HTML、CSSがわからなくてもコピペで使えるレスポンシブのテーブルを作りました。
簡単なタブ切り替え機能の実装
<div class="tab_wrap"> <input id="tab1" type="radio" name="tab_btn" checked> <input id="tab2" type="radio" name="tab_btn"> <input id="tab3" type="radio" name="tab_btn"> <div class="tab_area"> <label class="tab1_label" for="tab1">tab1</label> <label class="tab2_label" for="tab2">tab2</label> <label class="tab3_label" for="tab3">tab3</label> </div> <div class="panel_area"> <div id="panel1" class="ta
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
