【Labs】CSS3のプロパティ box-sizing 値 border-boxでレイアウトの計算が簡単に
こんにちは（・∀・） 今日はレイアウトする際に使うと便利なCSS3のbox-sizingプロパティの使い方についてご紹介して行きます。 box-sizingプロパティに関しての解説ページはこちらをご覧ください。 【CSS3リファレンス】box-sizing またflexboxでレイアウトする方法に関しての解説ページはこちらをご覧ください。 【labs】display:flexについて box-sizingプロパティ box-sizingプロパティで指定できる値はcontent-boxとborder-boxの2種類です。 content-boxを指定した場合paddingとborderの大きさは含まないで表示します。要素内容の大きさはwidthで指定したままの大きさで表示され、外側が大きくなります。 border-boxを指定した場合paddingとborderの大きさを含んで表示します。な
[CSS]サイズが分からない要素を真ん中に配置するテクニック
width, heightのサイズが分からない要素を天地左右の真ん中に配置するスタイルシートのテクニックを紹介します。 Centering in the Unknown [ad#ad-2] 下記は各ポイントを意訳したものです。 要素のサイズが分かっている場合 要素のサイズが分からない場合 まとめと対応ブラウザ 要素のサイズが分かっている場合 「真ん中に配置するエレメント」と「その親エレメント」両方の高さと幅のサイズが分かっているのであれば、エレメントを真ん中に置くのは簡単です。 「真ん中に配置するエレメント」を「position: fixed;」にし、topとleftを50%、marginのtopとleftをエレメントの半分のサイズでネガティブマージンで配置します。 CSS .centered { position: fixed; top: 50%; left: 50%; margin-t
スマホサイトに入れると使いやすくなる！おすすめjQuery4選！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうも、はやちです_(:3」∠)_ スマホに使うとよりサイトが見やすくなるjQueryをまとめてみました。 アコーディオン アコーディオンみたく開閉式のメニューが実装できるjsです。 記事の多いコンテンツをまとめるのに便利ですね。 ■動きをみる HTML <dl class="acordion"> <dt class="trigger">アコーディオンメニュー<span class="open-close">open</span></dt> <dd class="acordion_tree">テキストテキストテキストテキストテキストテキストテキストテキスト</dd> <dd class="acordion_tree">テキストテキストテキストテキスト テキストテキストテキストテキスト</dd> <dd class="acordion_tree">テキストテキストテキストテキストテキストテキ
jQueryでスクロールすると上部に固定されるナビゲーション
jQueryでスクロールすると上部に固定されるナビゲーション グローバルナビゲーションはロゴの下に配置されていることが多いですが、スクロールするとナビゲーション部分だけが上部に固定されるようなものをjQueryでやってみたいと思います。 投稿日2012年02月21日 更新日2012年05月10日 html & css htmlです。 html <h1><a href="#">タイトル</a></h1> <div class="nav"> <ul class="clearfix"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">NEWS</a></li> <li><a href="#">LINK</a></li> </ul> <!-- /#nav --></div> <div id="
jQueryでスクロールすると表示する系いろいろ
jQueryでスクロールすると表示する系いろいろ 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 投稿日2012年03月08日 更新日2019年12月19日 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-decoration
スマートフォンサイトのHTMLコーディングメモ12個 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
display:table-cell; を活用する リキッドレイアウトのコーディングにすごく便利。 親要素に display:table; 子要素に display:table-cell; 記事リストなど、画像とテキストを横並びにするときに。 均等に横並びにしたいときに。 タップ時のカラー設定 CSSで以下のように設定。アルファ値も設定可能。 -webkit-tap-highlight-color: rgba(255,105,183,0.6); 画像、iframeに max-width を指定 img・iframeは、サイズが大きすぎて画面からはみ出すことがあるので max-width:100%; を指定する。 word-break:break-all; を指定 スマホは幅が狭いため、長いURLなどが1行に入りきりません。 word-break:break-all; を適宜指定する。 フォ
フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か - IT戦記
みなさん、こんにちは お元気ですか？僕は元気です。 さて 最近よく、「いいね！」ボタンや「ミクシィチェック」ボタンによって、ウェブページを紹介し合う文化が少しずつ定着してきたなーと思います。 そんな中で、今後重要になってくるんじゃないかと思われる OGP （Open Graph Protocol）と言われる仕様があります。今日はそのことについて書いてみたいと思います。 OGP? おーじーぴー？？とはなんでしょうか。 OGP とは 簡単に言うと「このウェブページは何のことを書いているか」という情報を、プログラムから読める形で HTML に付加する記述方法のことです。 まあ、普通のウェブページは人間が読めばだいたい何のことが書いてあるか分かりますよね。 ですが、プログラムは人間ほど頭が良くないので、そのウェブページ内の文章だけではそのページが何のことについて書かれているページなのか正確に識別す
フッターをCSSやjQueryで常に最下部（一番下）に固定表示する方法 | 株式会社WEB企画
ウェブサイトを制作中に、「あれ？コンテンツが少なくてフッターが浮き上がってきてる！？」なんて経験はありませんか？ 弊社は東京と名古屋でホームページ制作を行っている会社ですので、稀にですがそういったシーンがあります。 「そうじゃなくて最下部にフッターを固定表示したいんだーっ！」というあなたのためのエントリーです。 ↓弊社リンク 「株式会社WEB企画」のホームページはこちら CSSで実装する flexbox（CSS3)を使う この記事を公開した際には、存在していなかったのですが、最近では flexbox のお陰でかなり実装が楽になっています。（2019/06/11現在） 下記の内容をコピペで実装できます。HTML5の書き方をしていることが条件になりますね。 【HTML】 <body> <div id="wrapper"> <main> <!-- メインコンテンツ --> </main> <fo
HTMLのアウトライン意識してますか？ - QiitaのSEO事情（前編） - Qiita
「最近Qiitaを検索結果でよく見るようになったなぁ」と感じる人はいませんか？ SEOを頑張ってるWebサービスは数多存在しますが、Qiitaもその中の1つです。 SEOっていうとやれキーワードがどうだこうだ、サイト内リンクがどうだこうだ、という話になってしまいがちですが（そういうのが不要と言っているわけではないですよ）、今回はQiitaがSEOの一環として行なっている数多の取り組みの中で、比較的Web上での言及数の少ない印象のある、HTMLのマークアップについて、外に出せる範囲で、前編と後編に分けて解説したいと思います。 後編はこちら 免責事項的な SEOというのは完全に結果論でしか語ることのできないものです。また時と共に効果的とされるテクニックは変わっていきます。この記事はQiitaの中の人が「効果あるんちゃうか」と試行錯誤しながらあれこれ行なっていることの一部を紹介するものであって、
CSSでfloatを解除する方法のまとめ
CSSのfloatを解除（クリア）する方法をまとめてみました。 以前、floatを解除するテクニックとして以下の記事をエントリーしたのですが、その後色々なテクニックがあることに気がつきました。 CSS の after 擬似要素で回り込みを解除する ということで、そもそものfloatの問題（というか仕様）と、その対処方法についてネットで調べた情報を一通りまとめました。 １．floatにより親要素の高さが出なくなる（＝背景がなくなる）問題 親要素の中にある子要素にfloatプロパティが設定されていると、内容をもたない親要素の高さが0になるという仕様になっています。 例えば、次のCSSとHTMLを例にします。 <style> #container { width: 200px; background: #ddd; } .box { width: 25px; margin: 10px; paddi
Google Sites: Sign-in
Not your computer? Use a private browsing window to sign in. Learn more about using Guest mode
チラシの裏 — Tumblr APIの使い方を勝手に和訳したもの Tumblr,...
Tumblr APIの使い方を勝手に和訳したもの Tumblr, プログラミング 和訳について これは僕がTumblr APIのリファレンスを許可を得ずに勝手に和訳したものです。 英語の原文は、こちらにあります。 https://www.tumblr.com/docs/api 概要 Tumblr APIは一般的なHTTPのリクエストを実行します。ですから、様々なアプリケーションからWebを通じてTumblrを使うことができます。 /api/read Tumblrのデータを読むのは簡単です。http://(you).tumblr.com/api/read からXML形式のデータを取ってくることができます。以下にデータの例を示します。 <tumblr version="1.0"> <tumblelog ... > ... <feeds> <feed ... /> <feed ... /> ..
[使える CSS テクニック] 実案件でも使える！フッターをブラウザ下部に固定する方法 | バシャログ。
暑い夏がやってきそうなので、久しぶりにツーブロック的な刈り上げにしてみましたishidaです。 今回は最近作業した案件で、これまであまり実践的に使わなかったCSSレイアウトを2サイト連続で使ってみたので、ご紹介。自分も忘れないようにメモ的エントリーです。 ページ下部に固定されるフッターを実現するためのCSSレイアウトです。 positionで実現する方法もありますが、コンテンツ量によっては表示が崩れるので今回は直球勝負です。 XHTML ソースはこんな感じになります。 <div id="container"> <div id="header"> ヘッダー <!-- /#header --></div> <div id="content"> <h1>フッターをブラウザ下部に固定するサンプル</h1> <p>本文が入ります。本文が入ります。本文が入ります。</p> <!-- /#content
![[使える CSS テクニック] 実案件でも使える！フッターをブラウザ下部に固定する方法 | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/c76f538a877e78afb07d09e5ff0f87885ac194e9/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fimages%2Fcat_coding.png)
jQueryプラグインを使わずに自前カルーセルパネルを導入してみる | 1：n – DETELU Blog
カルーセルパネル系のjQueryプラグインはかなり数が多いのですが、今回はjQuery本体のみ利用しプラグインを利用せず自作してみます。CSSとJavascriptを数行書き換えるだけで横型、縦型の２つが作れます。 プラグインを使わずにカルーセルパネル 横型 プラグインを使わずにカルーセルパネル 縦型 ではでは横型のカルーセルパネルを作っていきます。まずはHTML、CSSでカルーセルパネルの表示部分をつくります。内容を表示させるボックスを指定して、その中にリスト横並びに並べることにしましょう。両端にはリストを動かすボタン（「id=prev」「id=next」）を置き、これはCSSで配置を制御します。で、できたものは下記↓。 プラグインを使わずにカルーセルパネル HTML、CSSのみ ■HTML <div id="carouselwrap"> <div id="prev" class="hi
HTMLタグ/リンクタグ/起動させたメールに件名や本文を入れる - TAG index Webサイト
リンクで起動させたメールに、予め件名や本文などを挿入しておくことができます。 以下のサンプルコードをコピーする場合は、メールアドレスの書き換えを忘れないようにご注意ください。 <a href="mailto:info@example.com?subject=問い合わせ&body=ご記入ください">メールはこちらへ</a> 値の詳細 mailto:info@example.com?subject=件名&body=本文 info@example.com … 送信先のメールアドレスを記述します ? … メールアドレスとその後に続く情報を ? マークで区切ります subject= … メールの件名を記述します body= … メールの本文を記述します & … 件名と本文を & マークで区切ります（文字参照で & と記述します） サンプル（メールソフトを起動します）
汎用ボタン（button）｜フォーム - 汎用ボタン｜XHTML｜PHP & JavaScript Room
説明 button要素は、汎用ボタンを表すインライン要素です。 type属性には、"button"（通常のボタン）、"submit"（送信ボタン）、"reset"（リセットボタン）の値を指定可能です。 デフォルトは、"submit"（送信ボタン）です。 それぞれ、input要素のtype属性にbutton、submit、resetを指定した時と動作は同じですが、button要素内に画像やHTMLタグを使用できる点が異なります。 ただし、button要素内に、input要素、select要素、textarea要素、label要素、button要素、form要素、fieldset要素、iframe要素、isindex要素を含めることはできませんので注意してください。 属性
CSS(カスケーディングスタイルシート)・CSSのセレクタ
「HTML&CSS入門」の『CSS入門篇』では、CSSのセレクタについて、全称セレクタ, タイプ(要素)セレクタ及び<a>要素の擬似クラスのみを取り上げました。 ここでは、他のセレクタについても見ていきましょう。 ここでは全てのセレクタを紹介しておりません。ここで紹介しているセレクタでも一部のブラウザでは実装されていないものもあります。 クラスセレクタ。 スタイル定義に名前を付ける時に用います。 具体的には特定の要素にクラス名を付けるやり方と、要素を問わないクラス名を付けるやり方の二つがあります。 特定の要素にクラス名を付ける場合。 例えば、<p>要素に「note」というクラスを当てる場合、以下のように記述します。 <p>要素にクラスを付けたセレクタの記述例を読み飛ばす p.note { … } このように、要素名に続けて「.クラス名」と記述します。 「.」の直後に空白を入れないで下さい。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
広告効果測定用リダイレクトページで、広告掲載ページを参照元として取得するには？[アクセス解析Q&A] | 衣袋宏美のデータハックス![広告効果測定用リダイレクトページで、広告掲載ページを参照元として取得するには？[アクセス解析Q&A] | 衣袋宏美のデータハックス](https://cdn-ak-scissors.b.st-hatena.com/image/square/6c7da2e9041cd0eab265a2c698386bec563d2a30/height=288;version=1;width=512/https%3A%2F%2Fwebtan.impress.co.jp%2Fsites%2Fdefault%2Ffiles%2Fstyles%2F1200x630%2Fpublic%2Fimages%2Farticle2009%2Fdatahack%2Fdatahack_icon.gif%3Fitok%3DHzcXGYqr){kind=icon}
新着記事
