カテゴリー：HTML・CSS

  1. Table Tag Generator

    07.24

    複雑なtableを組むときには、とても便利です。 https://tabletag.net/ja/…

  2. mobiriseのエクステンション

    07.24

    bootstrapベースのサイト構築ツール「mobirise」のエクステンション http://users.skynet.be/fc296525/mbrext.html…

  3. Hタグのタイトルを改行したい

    07.16

    通常、WordPressのHタグでは、改行コードを入れても無視されてしまいます。 でも、どうしても見栄え上、改行を入れたいときに使えそうです。 [crayon-5b75a52a520e4482056229/] Hタグのタイトルは、以下…

    • HTML・CSS, WordPress
    • Hタグのタイトルを改行したい はコメントを受け付けていません。

  4. 内側にborder

    07.03

    javascriptでカレンダーを作成した際に、 内側にborderを入れたい場面が出てきまして。 cssで対処できました。 [crayon-5b75a52a52631974551666/] 上記の記述を、該当要素のcssに追加すれ…

  5. ContactForm7 入力欄の幅・高さを調整

    03.30

    ContactForm7の入力欄は、デフォルトの設定で使うと、幅、高さともに小さいので 下記のCSSを適用して調整します。 [crayon-5b75a52a5295b659740789/]…

  6. スマホで表示した時にフッターに電話をかけるボタンを表示させたい

    02.08

    店舗系のスマホサイトでは、スクロールした時に画面の下のほうに 電話をかけるボタンが表示されると便利。 ある程度スクロールしたときに、出現するようにしてみた。 　 wordpressのテーマに設置する手順をメモ。 （１）f…

    • HTML・CSS, WordPress
    • スマホで表示した時にフッターに電話をかけるボタンを表示させたい はコメントを受け付けていません。

  7. リストdl,dt,ddで、table表組みをcssで実現する

    01.22

    サンプルコード HTMLコード [crayon-5b75a52a52f85984013061/] CSS [crayon-5b75a52a52f8e058989705/] …

    • HTML・CSS
    • リストdl,dt,ddで、table表組みをcssで実現する はコメントを受け付けていません。

  8. アメブロのヘッダー画像をカスタマイズする

    01.11

    アメブロのヘッダー画像をカスタマイズした時のメモ。 （１）アメブロにログインしたら、 　　　右上の「設定」->アメブロ設定のブログデザイン「デザインの変更」をクリック。 （２）適用中のデザインが「CSS編集…

  9. Youtubeの埋め込みをレスポンシブ対応するCSS

    04.30

    youtube動画の埋め込みを、レスポンシブ対応させる場合のCSSです。 [crayon-5b75a52a5367e256586122/] 埋め込むyoutubeのコードは、 [crayon-5b75a52a53688…

    • HTML・CSS
    • Youtubeの埋め込みをレスポンシブ対応するCSS はコメントを受け付けていません。

  10. CSS3で斜線・ストライプで背景装飾

    03.13

    http://blog.re-sta.com/?p=292 [crayon-5b75a52a5393a495628297/] …

    • HTML・CSS
    • CSS3で斜線・ストライプで背景装飾 はコメントを受け付けていません。

  11. おすすめフォントファミリー

    03.13

    ゴシック系 [crayon-5b75a52a53c03990178870/] 明朝系 [crayon-5b75a52a53c0c249701762/] …

    • HTML・CSS
    • おすすめフォントファミリー はコメントを受け付けていません。

  12. レスポンシヴwebデザインでの改行位置を変更したい場合

    03.28

    パソコンとスマホの画面では、 表示幅が異なるので、 パソコンで改行したい箇所が スマホでは改行したくないことが あります。 そのような場合の対処法について。 cssで「display:none」を設定します。 HTML…

    • HTML・CSS
    • レスポンシヴwebデザインでの改行位置を変更したい場合 はコメントを受け付けていません。

  13. youtubeのタイトルバーとコントロールバーを非表示にする方法

    03.04

    youtubeのデフォルトの設定では、 下図のように「タイトルバー」と「コントロールバー」が 表示されます。 この表示を、非表示にする方法がありますので、 紹介します。 以下のyoutubeのソ…

    • HTML・CSS
    • youtubeのタイトルバーとコントロールバーを非表示にする方法 はコメントを受け付けていません。

  14. 画像の内側に枠線をつける

    02.10

    画像の内側に角丸の枠線をつけるcssです。 　 ポイントは、「box-sizing: border-box;」を入れることです。 これがないと、普通にボーダーをつけても、 一部枠線が表示されなくなってしまいます。 　 枠線の1ピ…

    • HTML・CSS
    • 画像の内側に枠線をつける はコメントを受け付けていません。

  15. スマホ対応のための画像CSS

    02.09

    スマホで画像を見た時に、 幅からはみ出ないためのcss。 　 [css] img { max-width : 100% ; height : auto ; } [/css]…

    • HTML・CSS
    • スマホ対応のための画像CSS はコメントを受け付けていません。

  16. スマートフォン対応（RWD）の設計ポイント（画面幅とメディアクエリ）

    02.05

    画面幅とメディアクエリのサンプル 画面表示の幅 端末・向き 320px iPhone3〜iPhone5系・縦向き時 360px Android系スマートフォン・縦向き時 375px iPh…

    • HTML・CSS
    • スマートフォン対応（RWD）の設計ポイント（画面幅とメディアクエリ） はコメントを受け付けていません。

  17. WordPress人気テーマのstingerのメニューをドロップダウンリストのように階層化する改造

    12.29

    WordPressで人気のテーマ「Stinger」ですが、グローバルメニューバーのデザインが少し弱いので、ドロップダウンリストのように変更する方法。 　 style.cssの最後に、以下のコードを追加で記述します。 [cs…

    • HTML・CSS, WordPress
    • WordPress人気テーマのstingerのメニューをドロップダウンリストのように階層化する改造 はコメントを受け付けていません。

  18. コピーライトの表記に関するまとめ

    12.28

    よくホームページの下に記載されている コピーライトの表記ですが、 正しい記述法はあるのでしょうか？ そこで、このコピーライトについて 調べたのでまとめておきます。 （１）「Copyright」の記述は必要か？ …

  19. CSSで棒グラフを作成する「cssplot」

    04.01

    bootstrapをはじめ、様々なCSSフレームワークが登場し、簡単にかっこ良くデザインできるようになりました。 サイトに棒グラフを使うことがあれば、とても便利なCSSです。 cssで棒グラフを作成するcssセット。 → csspl…

  20. スタイルシートを使って画像を縦横比そのままにリサイズする方法

    02.02

    横幅を指定する場合 [css] img{ max-width: 300px; height: auto; } [/css] 縦幅を指定する場合 [css] img{ width: auto; max-height…

    • HTML・CSS
    • スタイルシートを使って画像を縦横比そのままにリサイズする方法 はコメントを受け付けていません。

  21. Bootstrapで、画像を中央寄せにしたい

    01.24

    img要素に「img-responsive」を指定すると画像がレスポンシブ対応となり、 ブラウザサイズに応じて画像サイズも変更させるようになるが、左寄せになってしまう。 [html] <img src="images/sa…

    • HTML・CSS
    • Bootstrapで、画像を中央寄せにしたい はコメントを受け付けていません。

  22. 【Bootstrap】テキストの寄せ

    12.29

    text-left 左寄せ text-center 中央寄せ text-right 右寄せ text-justify 均等割り付け text-nowrap 自動改行させない …

    • HTML・CSS
    • 【Bootstrap】テキストの寄せ はコメントを受け付けていません。

  23. 画像を横方向の中央に寄せたい

    12.22

    下記の記述をcssに。 [css] .aligncenter { display: block; margin-left: auto; margin-right: auto; } [/css]…

    • HTML・CSS
    • 画像を横方向の中央に寄せたい はコメントを受け付けていません。

  24. スマホで、横スクロールしないようにしたい。

    12.22

    セレクタに以下のコードを記述する。 [css] overflow-x:hidden; [/css]…

    • HTML・CSS
    • スマホで、横スクロールしないようにしたい。 はコメントを受け付けていません。

  25. レスポンシブ対応のCSS記述法

    12.19

    [css] /* bootstrap */ @media(max-width:767px){ スマホ用の記述 } @media(min-width:768px) and (max-width:991px){ タブレット用の記述 } …

    • HTML・CSS
    • レスポンシブ対応のCSS記述法 はコメントを受け付けていません。

  26. class属性とid属性の役割の違い

    10.28

    スタイルシート(CSS)を記述する際、 class属性とid属性の2種類があります。 「class」と「id」では、 ブラウザ上での表示効果は全く同じですが、 役割が大きく異なります。 ■id： 「固有の名前を割り当てる」 → 同じid…

    • HTML・CSS
    • class属性とid属性の役割の違い はコメントを受け付けていません。

  27. style.cssの記述方法

    10.28

    スタイルシート（style.css）の先頭に記述します。 [css] /* Theme Name: テーマ名 Theme URI: テーマのホームサイトの URI Description: テーマの説明 Author: 作者の名前 A…

    • HTML・CSS
    • style.cssの記述方法 はコメントを受け付けていません。

  28. css3で作る、立体ボタン

    10.27

    リンクテキスト [css] /**--------------------------------------------------------------- 立体ボタン（青） -----------------------------…

    • HTML・CSS
    • css3で作る、立体ボタン はコメントを受け付けていません。

  29. CSS3で作る、縫い目風のデザイン

    10.27

    このように、CSS3で縫い目風のデザインにすることができます。 [css] /**--------------------------------------------------------------- 縫い目風のデザイン ----…

    • HTML・CSS
    • CSS3で作る、縫い目風のデザイン はコメントを受け付けていません。

  30. Hタグの見出しをCSSでかっこ良くデザインする

    10.27

    Hタグの見出しデザインは、CSSで見栄え良く！ (さらに…)…

    • HTML・CSS
    • Hタグの見出しをCSSでかっこ良くデザインする はコメントを受け付けていません。

  31. Bootstrapのテーブルを挿入するときのコード

    10.26

    記事にテーブルを挿入するとき、Bootstrapのテーブルを使用すると奇麗に表示できる。 [html] <table class="table table-bordered"> <tr> <…

    • HTML・CSS
    • Bootstrapのテーブルを挿入するときのコード はコメントを受け付けていません。

  32. ウィジェットに使えるデザイン

    05.08

    HTML部分 [php] <!-- ウィジェットデザイン --> <div class="widget"> <h4 class="widgettitle&quo…

    • HTML・CSS
    • ウィジェットに使えるデザイン はコメントを受け付けていません。

トップページに戻る

RETURN TOP

記事の編集ページから「おすすめ記事」を複数選択してください。