当サイトの記事には広告が含まれている場合があります

html・css

html・css

カラーミーのレスポンシブテンプレートは禁則処理解除される

カラーミーのテンプレートを使用してフリーページを作ったりしていて気になったのですが、テキストエリアの文章が変なところで改行されるんです。具体的には、句読点の前で改行されて句読点から文章が始まったりするんですよ。例えば下記の文章の場合書籍はコ...
html・css

bxsliderで両サイドに画像を表示させて横スクロールさせない

bxsliderで両サイドに画像を表示させたことは以前もあったのですが、忘れて思い出すの大変なのでメモしておきます。bxsliderからソースをダウンロードしてきます。html内でjqueryとダウンロードしたjsを読み込みます。scrip...
html・css

簡単!スマホやタブレット閲覧時の右余白を解消する方法

パソコン用サイトをパソコンで見たら問題なかったんですが、スマホやタブレットで見ると、右に余白がでていました。フッターとか横一面に色を変えたりすると、その余白が気になるんですよね。しかも、スマホ用のサイトは作る予算がないということなので、スマ...
スポンサーリンク
html・css

ヘッダー固定してページ内リンク時のヘッダー高さずれを解消する方法

ヘッダー固定してページ内リンクすると、ヘッダーの高さ分ずれてリンク先へ遷移します。jQueryで直す時、最初うまくいかなかったのでメモしておきます。CSSでずれを回避する方法cssで調整するなら、下記のような書き方でずれが直ります。jQue...
html・css

simplePagination.jsで指定ページにリンクする方法

simplePagination.jsは、簡単にページネーションを表示させることができるのですが、そのままだと指定ページが表示されず、1ページ目が表示されます。今回、ページ指定して表示させたかったので、下記ブログを参考にさせていただきました...
html・css

FlexSliderを使って高さを保ったまま幅いっぱいにスライダーさせる

レスポンシブにも対応して画面いっぱいスライダーさせることは今までもやってきたんですが、高さを保ったまま幅いっぱいに画像をスライドするのにてこずったのでメモしておきます。今回使ったのはFlexSlider高さを保ったままで横幅いっぱいに画像を...
html・css

サイズ変更も簡単にできる!Instagramの投稿をサイトに埋め込む方法

Instagramの投稿をサイトに埋め込む方法をメモしておきます。2016年1月24日現在の方法です。まず埋め込みたいInstagramの投稿の右したにある「・・・」マークをクリックします。ポップアップ表示される「埋め込み」をクリックします...
html・css

Windows10にSassをインストールしてみました

Windows10にSassをインストールしてみました。WindowsにはRubyがインストールされていないので、Sassインストールの前にRubyをインストールする必要があります。ついでにCompassもインストールしました。インストール...
html・css

イラレデータがあれば簡単!SVGロゴを表示する

SVGってpngやjpg画像と違ってベクター形式なので綺麗に表示されるという情報は以前から知っていたのですが、実際の業務で使ってきませんでした。しかし、2016年1月12日をもってIE8のサポート終了されることもあり、思い切ってSVGロゴ表...
html・css

画面いっぱいに背景画像を表示して雪を降らせる方法

ブラウザ幅に合わせて背景画像を表示して雪を降らせるページを作成したのですが、なかなかうまく表示されなかったのでメモしておきます。ブラウザ幅に合わせて背景画像を表示する方法cssでbodyタグに背景画像指定し、background-size:...
スポンサーリンク