html・css カラーミーのレスポンシブテンプレートは禁則処理解除される
カラーミーのテンプレートを使用してフリーページを作ったりしていて気になったのですが、テキストエリアの文章が変なところで改行されるんです。 具体的には、句読点の前で改行されて句読点から文章が始まったりするんですよ。 例えば下記の文章の場合 書...
html・css
html・css 
html・css bxsliderで両サイドに画像を表示させて横スクロールさせない
bxsliderで両サイドに画像を表示させたことは以前もあったのですが、忘れて思い出すの大変なのでメモしておきます。 bxsliderからソースをダウンロードしてきます。 html内でjqueryとダウンロードしたjsを読み込みます。 sc...
html・css 簡単！スマホやタブレット閲覧時の右余白を解消する方法
パソコン用サイトをパソコンで見たら問題なかったんですが、スマホやタブレットで見ると、右に余白がでていました。 フッターとか横一面に色を変えたりすると、その余白が気になるんですよね。 しかも、スマホ用のサイトは作る予算がないということなので、...
html・css ヘッダー固定してページ内リンク時のヘッダー高さずれを解消する方法
ヘッダー固定してページ内リンクすると、ヘッダーの高さ分ずれてリンク先へ遷移します。 jQueryで直す時、最初うまくいかなかったのでメモしておきます。 CSSでずれを回避する方法 cssで調整するなら、下記のような書き方でずれが直ります。 ...
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-siz...