2024年6月にXに投稿したCSSテクニックのまとめ – TAKLOG

2024/07/10 12 users TAKLOG center 和文 別枠 見栄え

先月からXにCSSテクニックを定期的に投稿しているので、それのまとめです。 テキストの中央寄せだからといって text-align:center を指定したほうが良いかは考えたほうがいい ポストを別枠で表示する 和文をtext-align:centerで中央寄せすると複数行になった際に見栄えが悪くなるケースが多いです。 inline-size:fit-con... 続きを読む

[CSS]要素を天地左右の中央に配置、最近主流になっている実装方法のまとめ | コリス

2018/03/02 301 users コリス margin CSS center auto

子要素を親要素の左右中央に配置するのは、簡単です。 インライン要素は「text-align: center;」で、ブロック要素であれば「margin: 0 auto;」で中央に配置できます。 難しいのは上下、天地の中央です。 CSS Hackは使用せず、要素を天地左右の中央に配置する実装方法を紹介します。 Absolute Centering with CSS 下記は各ポイントを意訳したものです。... 続きを読む

コピペ+αではてなブログにSNSフォローボタンを設置するカスタマイズ - Yukihy Life

2015/06/26 111 users コピペ Yukihy Life カスタマイズ disp ブログ

2015-06-26 コピペ+αではてなブログにSNSフォローボタンを設置するカスタマイズ ブログ ブログ-カスタマイズ text-small">◯◯</span>」の部分を消去してください。 その後下のコードをコピペです。 .follow-btn{ width: 100%; text-align: left; margin-bottom: 10px; } .follow-btn a { disp... 続きを読む

はてなブログの記事下にアドセンス広告を左右バランスよく置く方法。 - マトリョーシカ的日常

2014/04/17 19 users アドセンス広告 左右バランス 日常 記事下 ブログカスタマイズ

2014-04-17 はてなブログの記事下にアドセンス広告を左右バランスよく置く方法。 ブログカスタマイズ 下のコードを「記事下」に書くだけです。 <div style="width:610"> <div style="text-align:center;margin:10px auto 10px;"> スポンサーリンク</div> <div style="float:left"> <!-- 広告... 続きを読む

jQueryを使って、div全体にリンクを貼る方法。_blank対応も。 | PLUS

2014/04/16 68 users jQuery center margin-right div

例えばボタンなどdiv全体にリンクを貼りたいことがありますが、その際に便利なTipsのご紹介です。 まずは、見た目のみ準備 CSSでボタンを作ります。リンクもdivの中に置いて構いません。CSSでdivの上にマウスがのったときに、カーソルが変わるよう変更しています。 <style> .sbtn{ margin-right:10px; text-align:center; background-co... 続きを読む

均等割り付けで美しい表デザインを実現するjQueryを作ってみました。 | 株式会社LIG

2013/09/13 90 users jQuery justify 株式会社LIG table 両端

ライター内藤です。 本日は日本人の大好きな「均等割り付け」を超軽量jQueryで実現します。 特にtableのthタグなどで利用頻度が高いかと思いますが、block要素でも使えます。 Wordで言うと、これ　　です。 両端揃えではなく均等割り付けが必要な理由 下の図が分かりやすいと思います。 text-align: justify; text-justify: inter-ideograph; 上... 続きを読む

webkit系ブラウザ（Chrome/Safari）で両端揃えはできないの？jQueryで検証 | 株式会社LIG

2013/07/23 81 users jQuery justify 両端 Safari Chrome

p { width: 455px; text-align: justify; } Σ(ﾟдﾟlll)ガーン。 ガッタガタです。 同じChromeでも文字種によって揃い方が違う webkit系でも、text-align: justify;は効いているのです。下をご覧ください。 というわけで問題点は、 全角・半角が混じった際、webkit系のChromeやSafariはの両端揃えをしてくれない！ とい... 続きを読む

Nexus7 32GBモデルが249ドルで販売される 16GB版は値下げ | ガジェット速報

2012/10/29 23 users 値下げ ガジェット速報 Nexus7 32GBモデル 店頭

DroidLifeは28日（現地時間）、米小売チェーン「オフィス・デポ」の店頭において、Nexus 7 32GBモデルが249.99ドル（約1万9900円）で販売されていると伝えています。なお、16GBモデルは199.99ドル（約1万5900円）に値下げされているようです。 <p style="text-align: center... 続きを読む

米グーグル、iOS版Google mapsの審査提出を完了との情報 | ガジェット速報

2012/09/20 44 users Maps MacRumors iOS向け アップル 米グーグル

MacRumorsは20日、英ガーディアン紙の情報として、米グーグルが、iOS向け「Google maps」アプリの審査提出を既に完了している状態と報じています。この情報が正しければ、Google mapsアプリの登場はアップルの審査待ちであり、審査が終わり次第公開されるものとみられます。 <p style="text-align... 続きを読む

テキストを「text-align: centraur;」してくれるサイト・・・ | IDEA*IDEA

2011/03/29 24 users IDEA center テキスト ポスター 日本語

テキストを「text-align: centraur;」してくれるサイト・・・March 29th, 2011Posted in おもしろネタWrite comment「center;」かと思ったら「centraur;（ケンタウルス）」でしたよｗ。↑ これが・・・。↑ こうなりますｗ。ちなみに英文だったら好きなテキストでいけますよ。なんかのポスターに使えるかな・・・？日本語はさすがにだめでした。ご... 続きを読む