サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Pixel 9
www.attend.jp
リンクを別タブで開く事で起こる問題 自身のWebサイトから他サイトへのリンクを設置する場合、「自分のページに戻って来やすいように」という考えから別タブでリンク先ページを開くのが一般的でした。もちろん今でもパソコンでWebサイトを見る場合には、別タブで開いてくれた方が閲覧しやすいと思います。 ですが新しいタブで開くと、その新しいタブでは戻るボタンをクリックして、リンクを押す前のページに戻れなくなります。 これによって「前のページに戻りたいけど戻れない」という混乱を招いてしまいます。 もちろん新規のタブで開いているだけなので、切り替えれば戻れるのですが、Webサイトの閲覧に不慣れな方は必ずといっていいほど混乱するでしょう。 スマートフォンの普及に伴って操作性が変わった 今やほとんどの方がスマートフォンをお持ちかと思います。 いつでも手軽にWebサイトを見る事ができるので、とても便利ですが、パソ
pxとemはどちらもホームページで使われる単位を表すもの メートル・ヤード・フィートなどなど、大きさを表す単位がたくさんありますが、それぞれで大きさが異なりますよね。 例えば1メートルは約1.09361ヤード、約3.28084フィートですね。 単位は物差しの目盛りのようなもので、大きさの基準となるものです。基準が変われば同じ「1」でも単位が変わってしまいます。 pxとemも、大きさを表す単位です。 そしてpxとemの違いは文字の大きさの基準となる物が異なるという点です。 px(ピクセル) pxは画面上にある点の事で、1pxは1ドットという考え方でおよそ大丈夫です。 この単位は環境によって変化しない絶対単位です。 em(エム) emは文字の高さを基準とした単位です。 「エム」と読むそうですが、いままでずっと「イーエム」と間違えて読んでいました・・・ emは使われている書体(フォント)や、CS
Flexboxはスマートフォン用のCSSに適用させる レスポンシブサイトを作る時に便利なFlexbox・・・非常に使い勝手がいいものの、IEなどの一部のブラウザでは対応していないものもいくつかあるので、なかなか使う事ができません。 早く対応するブラウザばかりになってもらいたいものですが、古いOSを使い続ける方がいたり、どうしても前のバージョンのブラウザを使わなければいけない理由があったりと、古いものや対応しきれていないものを切り替えるタイミングが難しいものです。 そうした状況の中で、Flexboxはなかなか使う事ができないなぁと思っていました。以前までは。 CSS3に完全対応していない環境になっているものはさすがに移行できませんが、スマートフォンであれば多くの端末でCSS3に対応したブラウザがインストールされています。 スマートフォン向けのWebサイトなら「Flexboxが使える」という事
透過を使えるPNG画像 画像というとJPGやGIFがメジャーで、あまりPNGを見ない方もいるかもしれません。 印刷物ではあまり使われることのないPNG形式の画像ですが、Webサイトでは多用する事が多い画像形式です。 PNGはJPGやGIFと違い、透過情報・・・つまり透明度を持たせることができます。 なので画像の上に重ねた画像を作る事が出来るので、とても便利な画像形式です。 Webサイトでは背景色をCSSで色付けして、その上にPNG画像を重ねたりして使われることがあります。 背景色を含めたJPG画像でも表現できますが、透過させて置く事で、色の変更などにも柔軟に対応できますし、要素から画像だけが飛び出たような表現も容易になってきます。 ただしPNG画像はRGBの色しか表現できないので、印刷をする場合には使われることはありません。 印刷で使う画像に透過情報を持たせる場合はEPS形式やPSD形式で
br要素を使った改行には問題がたくさん PCページの時はbr要素を使った改行をCSSのdisplay:none;で消したりはしませんが、レスポンシブWEBデザインで作成したページの場合、PCで見た時とスマートフォンで見た時の改行位置を変えたい!なんて思う事もあるはずです。 そんな時にはbr要素をCSSを使って、非表示にすることで改行を無くして対応します。 CSSを一行書いただけでカンタンに対応できる!!と思っている方・・・ 残念ながらそれは間違いです。 意外な動作をするので、もう少し対策が必要になります。 主に出てくる不具合は「br要素の次に来る言葉の前に半角スペースが生まれてしまう」という点です。 この原因と対策についてお話していきます。 半角スペースが生まれてしまうHTML構造 こんな構造になっている場合、br要素を消す事で半角スペースが生まれてしまいます・・・ <p>アテンドがお手伝
IE8以前をサポートする1.X系、IE9以降をサポートする2.X系 jQueryを使った画像スライダーを入れたり、クリックで画像を拡大させたり・・・ホームページに動きを付けたい時に必須となる「jQuery.js」 1.6.8とか2.1.4とか・・・色々なバージョンを目にしませんか? 1.9.9の次が2.0.0とか、そんな風に連番でバージョンアップしているわけではありません・・・1.12とかもありますし。 それではこれらの違いは何なの?と思いますよね。 jQuery1.X系でも2.Xでもスライダーやその他もちゃんと動くので余計わかりにくいですね。 細かく出すと訳がわからなくなりそうなので、最大の違いを一つ挙げましょう。 それはIE8以前をサポートするかどうかという点です。 WindowsXPはIE8までしかインストールできないので、WindowsXPを切り捨てるような格好になりますね。 OS
GoogleMapのマイマップとは GoogleMapって便利ですよね。 建物名や住所を入れるだけでその位置にピンが立ち、場所を知らせてくれます。 またホームページにも埋め込むことができたり、リンクを知らせて共有できたりと本当に便利です。 そんな便利なGoogleMapにも困った事があります。 それは造成間もない住所を調べた時です・・・ 新しく住所が割り振られた場所や、詳細な番地などをGoogleMapで調べても、住所がまだ登録されていないのか、詳しい位置まで調べる事ができない事があります。 おおまかな地域までしか絞り込めず、困ってしまいますね・・・ そんな時に活躍するのがマイマップ! 自分のGoogleアカウントでログインし、自分だけのマップを作成する事ができるので、調べても出てこない地図を作るのに効果的です。 マイマップで設置した地図の縮尺を調整してみる マイマップを設置するにあたって
表組みはレスポンシブWEBデザインでは難しい ホームページの制作でよく使われる表組み。価格表やお問い合わせフォームなど、表を使って配置したほうが見やすく、わかりやすいレイアウトにできる場面はよくありますよね?私もホームページを作っているときに表組みは便利なのでよく使います。 でも表の横幅をある程度取れないと、一つのブロックが狭くなってしまうので一行が短くなってしまいます。その影響で逆に見づらくなる、なんてことはありませんか? 特に横幅の決まらないスマートフォン専用ページやレスポンシブWEBデザインで作られたページの場合、対応がなかなか難しく、悩まされるポイントです。 でも大丈夫です!CSSを使ってレイアウトを可変させることで、きちんと対応できる場合がほとんどです!! これから表組みの作り方についてご紹介します。 表組みのHTMLはこんな具合に作られますよね。 th・td要素の中身が増えるほ
このページを最初にブックマークしてみませんか?
『新潟のホームページ制作会社 (株)アテンド』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く