カテゴリー:HTML・CSS

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

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

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

    • Hタグのタイトルを改行したい はコメントを受け付けていません。
  4. javascriptでカレンダーを作成した際に、 内側にborderを入れたい場面が出てきまして。 cssで対処できました。 [crayon-5b75a52a52631974551666/] 上記の記述を、該当要素のcssに追加すれ…

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

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

    • スマホで表示した時にフッターに電話をかけるボタンを表示させたい はコメントを受け付けていません。
  7. サンプルコード HTMLコード [crayon-5b75a52a52f85984013061/] CSS [crayon-5b75a52a52f8e058989705/] …

    • リストdl,dt,ddで、table表組みをcssで実現する はコメントを受け付けていません。
  8. アメブロのヘッダー画像をカスタマイズした時のメモ。 (1)アメブロにログインしたら、    右上の「設定」->アメブロ設定のブログデザイン「デザインの変更」をクリック。 (2)適用中のデザインが「CSS編集…

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

    • Youtubeの埋め込みをレスポンシブ対応するCSS はコメントを受け付けていません。
  10. http://blog.re-sta.com/?p=292 [crayon-5b75a52a5393a495628297/] …

    • CSS3で斜線・ストライプで背景装飾 はコメントを受け付けていません。
  11. ゴシック系 [crayon-5b75a52a53c03990178870/] 明朝系 [crayon-5b75a52a53c0c249701762/] …

    • おすすめフォントファミリー はコメントを受け付けていません。
  12. パソコンとスマホの画面では、 表示幅が異なるので、 パソコンで改行したい箇所が スマホでは改行したくないことが あります。 そのような場合の対処法について。 cssで「display:none」を設定します。 HTML…

    • レスポンシヴwebデザインでの改行位置を変更したい場合 はコメントを受け付けていません。
  13. youtubeのデフォルトの設定では、 下図のように「タイトルバー」と「コントロールバー」が 表示されます。 この表示を、非表示にする方法がありますので、 紹介します。 以下のyoutubeのソ…

    • youtubeのタイトルバーとコントロールバーを非表示にする方法 はコメントを受け付けていません。
  14. 画像の内側に角丸の枠線をつけるcssです。   ポイントは、「box-sizing: border-box;」を入れることです。 これがないと、普通にボーダーをつけても、 一部枠線が表示されなくなってしまいます。   枠線の1ピ…

    • 画像の内側に枠線をつける はコメントを受け付けていません。
  15. スマホで画像を見た時に、 幅からはみ出ないためのcss。   [css] img { max-width : 100% ; height : auto ; } [/css]…

    • スマホ対応のための画像CSS はコメントを受け付けていません。
  16. 画面幅とメディアクエリのサンプル 画面表示の幅 端末・向き 320px iPhone3〜iPhone5系・縦向き時 360px Android系スマートフォン・縦向き時 375px iPh…

    • スマートフォン対応(RWD)の設計ポイント(画面幅とメディアクエリ) はコメントを受け付けていません。
  17. WordPressで人気のテーマ「Stinger」ですが、グローバルメニューバーのデザインが少し弱いので、ドロップダウンリストのように変更する方法。   style.cssの最後に、以下のコードを追加で記述します。 [cs…

    • WordPress人気テーマのstingerのメニューをドロップダウンリストのように階層化する改造 はコメントを受け付けていません。
  18. よくホームページの下に記載されている コピーライトの表記ですが、 正しい記述法はあるのでしょうか? そこで、このコピーライトについて 調べたのでまとめておきます。 (1)「Copyright」の記述は必要か? …

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

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

    • スタイルシートを使って画像を縦横比そのままにリサイズする方法 はコメントを受け付けていません。
  21. img要素に「img-responsive」を指定すると画像がレスポンシブ対応となり、 ブラウザサイズに応じて画像サイズも変更させるようになるが、左寄せになってしまう。 [html] <img src="images/sa…

    • Bootstrapで、画像を中央寄せにしたい はコメントを受け付けていません。
  22. text-left 左寄せ text-center 中央寄せ text-right 右寄せ text-justify 均等割り付け text-nowrap 自動改行させない …

    • 【Bootstrap】テキストの寄せ はコメントを受け付けていません。
  23. 下記の記述をcssに。 [css] .aligncenter { display: block; margin-left: auto; margin-right: auto; } [/css]…

    • 画像を横方向の中央に寄せたい はコメントを受け付けていません。
  24. セレクタに以下のコードを記述する。 [css] overflow-x:hidden; [/css]…

    • スマホで、横スクロールしないようにしたい。 はコメントを受け付けていません。
  25. [css] /* bootstrap */ @media(max-width:767px){ スマホ用の記述 } @media(min-width:768px) and (max-width:991px){ タブレット用の記述 } …

    • レスポンシブ対応のCSS記述法 はコメントを受け付けていません。
  26. スタイルシート(CSS)を記述する際、 class属性とid属性の2種類があります。 「class」と「id」では、 ブラウザ上での表示効果は全く同じですが、 役割が大きく異なります。 ■id: 「固有の名前を割り当てる」 → 同じid…

    • class属性とid属性の役割の違い はコメントを受け付けていません。
  27. スタイルシート(style.css)の先頭に記述します。 [css] /* Theme Name: テーマ名 Theme URI: テーマのホームサイトの URI Description: テーマの説明 Author: 作者の名前 A…

    • style.cssの記述方法 はコメントを受け付けていません。
  28. リンクテキスト [css] /**--------------------------------------------------------------- 立体ボタン(青) -----------------------------…

    • css3で作る、立体ボタン はコメントを受け付けていません。
  29. このように、CSS3で縫い目風のデザインにすることができます。 [css] /**--------------------------------------------------------------- 縫い目風のデザイン ----…

    • CSS3で作る、縫い目風のデザイン はコメントを受け付けていません。
  30. Hタグの見出しデザインは、CSSで見栄え良く! (さらに…)…

    • Hタグの見出しをCSSでかっこ良くデザインする はコメントを受け付けていません。
  31. 記事にテーブルを挿入するとき、Bootstrapのテーブルを使用すると奇麗に表示できる。 [html] <table class="table table-bordered"> <tr> <…

    • Bootstrapのテーブルを挿入するときのコード はコメントを受け付けていません。
  32. HTML部分 [php] <!-- ウィジェットデザイン --> <div class="widget"> <h4 class="widgettitle&quo…

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

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