【レスポンシブ基本】スマホ閲覧の時だけ表示またはパソコンの時だけ表示するCSS最短テクニック

2019-04-04

レスポンシブでサイトを制作することは今や当たり前ですよね。 googleが推奨していることもありますし、なによりサイトのメンテナンスがラクです。 レスポンシブ最高!というわけで早速表題の件に。 <レスポンシブの1番お手軽な組み方(CSSを三つ用意する)> レスポンシブでサイトを作る場合、スマホで表示するボタンをパソコン版では表示しないようにしたい部分がでてきます。ですので、分かりやすい名前のクラスをつけておくと便利です。 pc.css htmlStart .sp-only{ display:none;} htmlEnd 逆にスマホ用のCSSにパソコン版だけの部分を非表示に...

管理画面などにて画像が切り替わらない場合の対処法

2014-08-14


管理画面で画像を変更する処理をした際に、変更後の画面で画像がキャッシュのせいで古い状態のままになることがある。その場合の一番簡単な方法は、画像にランダムなパラメータを付け、新しい画像だとプラウザに認識させるといい。 phpStart $rand = rand(0,999999); echo ''; phpEnd これは管理画面での基本的なテクニックなので、必ず覚えておかないといけない。 ...

頻繁に使うシーンがある文字列操作群の関数

2012-08-23

文字列の一部分を取り出すsubstr関数は使用するシーンが多いです。長い文章の最初だけを表示する時や、URLから一部分を切り出す時などなど。 <substr()関数 - 最後の2文字を取り出す> phpStart $str = 'https://sample.jp/cate.php?id=06'; echo substr($str, -2); //結果「06」が出力されます。 phpEnd 第2引数にマイナス値を入れれば最後からの文字が取得できます。先頭から2文字を取得する場合は正数を書けばOK。文字列が日本語の場合はmb_substr()を使用しないとバグが起きます。...

【デザイナーによるデザイン指南】色使いはキレイなサイトから盗めば簡単!しかも早い!ビジネスではデザインの効率性も重要

2012-08-18


▽デザインの3大要素を理解できないと始まらない ▽デザインの一番最初の肯定派「素材の選定」 ▽何年デザインをやっていても難しい「レイアウト」 ▽「色使い」は初心者でも簡単!せめてここはクリアしよう! デザインの3大要素を理解できないと始まらない デザインで重要な要素は「素材の選定」「色使い」「レイアウト」の3つ。 これが全てうまくいけば違和感のない美しいデザインに仕上がります。 3つの要素ともにどれも重要で、一つ欠ければダサいものになってしまいます。 またほんの少し間違うだけでもダサくなってしまうことがあるので、デザインは本当に繊細なものです。美しいデザインは感覚だ...

写真をイラスト風に加工する

2012-08-10


今一番売れてるバラドルの大島麻衣の写真を元にPhotoShopでイラスト風に加工しました。やり方は下記の参考サイトをご覧下さい。写真付きですごく分かりやすく説明されています。 ザッと言葉だけで説明すると、元画像を3枚ほど複製して、それぞれにカットアウト・鉛筆・輪郭検出のフィルター加工をし、加工したレイヤーを乗算やスクリーンなどのレイヤースタイルにして元画像になじませるというものです。 写真素材に困ったときはイラスト風に化けさせれば、タレントの画像を使っちゃっていいかも!?元がばれなければね。ただ、写真をイラスト調にするとサイト全体をイラスト調のデザインにしないと統一感がとれなく...

floatで横並びにしたli(リスト)をセンターにする方法

2012-08-04


ページャを作る時に重宝するテクニックです。floatで横並びにした場合、text-align:center;ではセンターにはなりません。potosion(ポジッション)を使って実現させます。 <CSS> htmlStart div.pager { font:14px Arial,Helvetica,sans-serif; position:relative; overflow:hidden;} div.pager ul{ float:left; position:relative; left:50%;} div.pager ul li { float:left; position...

この記事がお役に立てましたら是非シェアのご協力お願いします。