target=”_blank” の正しい使い方講座 » SEO Japan
無料で資料をダウンロード SEOサービスのご案内 専門のコンサルタントが貴社サイトのご要望・課題整理から施策の立案を行い、検索エンジンからの流入数向上を支援いたします。 無料ダウンロードする ＞＞ 言われてみると、余り深く考えずに使っていたことってありますよね。この記事タイトルを見て、自分たちが普段やっていることが正しいのかどうか、確かめてみたくなりました。 — SEO Japan リンクにtarget=”_blank”を使用し、そのリンクを新しいウィンドウで表示してサイト上に訪問者をキープしておくようにするサイトはますます多くなっている。 実を言えば、私もこれを使っている。なぜなら、訪問者はそれらのリンクを新しいウィンドウで開くFireFoxブラウザを使用していると想定しているからだ。 しかしこれは本当に賢いやり方なのだろうか？ Target=”_blank” を使っても良い時、使うべき
JavaScript: window.open() 小窓の基礎
window.open()で小窓 いわゆる小窓です。これはJavaScriptの window.open() というメソッドで 小窓となるウィンドウを生成します。 各引数の文字列は一重引用符または二重引用符で括って指定します。 第１引数「URL」は生成されるウィンドウに表示するページのURLです。 ※ ウィンドウに表示するページ（別のファイル）は別途作成して用意しておきます。 第２引数「ウィンドウ名」は特に指定する必要がなければ null で良いでしょう。 ウィンドウ名を指定するときは引用符で括ります。 ※ null を指定するとウィンドウ名の設定されていない新規ウィンドウとなります。 (HTMLの属性 target="_blank" と同等です) 例: window.open('example.html', null); 第３引数「オプション」はウィンドウの特徴を設定する文字列です。 こ
もう逃げない。HTMLのviewportをちゃんと理解する
<meta name="viewport" content="width=device-width,initial-scale=1"> と呪文のように書いてきたが、いい加減ちゃんと整理して理解しよう。 いろいろ調査した結果、以下の考え方で理解できると思う。 まず、実際の液晶の解像度は一旦忘れろ。 <meta name="viewport" content="width=480">と指定したとする。 するとそこに幅480pxの仮想的なウインドウが作られる。幅480pxの液晶モニターがあることをイメージして欲しい。これをviewportと呼ぶ。 ブラウザはviewportにレンダリングする。viewportの中では、あたかも本当に480pxのモニターを使っているかのような環境になっている。なので、JSのdocument.documentElement.clientWidthなんかも480を返す
まちづくりデザインなら包むデザイン｜地域の魅力を広げるデザイン事務所
地域には『何もない』に思えて実はたくさんの良きところがあります。良き点は日常に埋もれてしまい、その地域の人以外の人が知って初めて「へーすごいんだ！」なんて気づく事があります。 厳かなお祭りや絶景の大自然といってイベントだけではなく、よく通っているお店や毎年続いている地域のイベントなども良きところになりえます。 そんな地域の良きところをデザインやホームページ制作を通してスポットを当てる力なることを信念としています。
Bootstrap使い方メモ１（基本＋CSS） - Qiita
公式サイトを一通り動かしてみたときのメモ。 まずは CSS。 Hello World Bootstrap を入手する ここ から zip ファイルをダウンロードする。 HTML を書く <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="bootstrap.min.css" /> </head> <body> <h1>Hello Bootstrap!!</h1> </body> </html> HTML5 の DOCTYPE を記述する。 css ファイルを読み込むだけで使い始められる。 モバイル用に viewport を設定する meta タグを記述する。 user-scalable=n
ソースコード検索エンジン「NerdyData」で世界1.4億のサイトから実用コードが探せる
NerdyDataというソースコード検索エンジンを最近知りました。 通常の検索エンジンは、タグを取り除いたページ内のコンテンツが検索結果に表示されます。けれど、NerdyDataは、サイトにある生コードを検索することができます。 これを、使うことにより、コードの具体的な利用例なども見ることができ、便利だったので紹介です。 photo by Ruiwen Chua NerdyDataとは NerdyDataは、世界中の1億4000万サイト以上のソースコードの中から、HTML、CSS、JavaScriptのコードを直接検索できる、ソースコード検索エンジンです。 Nerdyという単語は、あまり聞き慣れなかったので「どういった意味だろう？」と調べてみたら以下のような意味でした。 オタクっぽい Ａ系, エー系, 秋葉系, アキバ系 おそらく、いい意味でPCオタク向けのデータが詰まった、ギーク御用達の
HTML5とCSS3で何ができるかを実際に動かして学べる「The Expressive Web」
「HTML5」や「CSS3」を導入することで、ウェブサイトの作成やウェブデザインがさらに便利になります。そんなHTML5とCSS3で追加されている新しい要素で「何ができるのか？」ということが、実際に試したり動かしたりしつつ学べるAdobeの「The Expressive Web」です。 HTML5 and CSS3 - Adobe - The Expressive Web - Beta http://beta.theexpressiveweb.com/ 「The Expressive Web」は左側に各コンテンツのメニューがあり、1つずつ見ていくことでCSSやHTML5の動作が分かっていくというウェブサイト。一番上の「CSS3 Animations」をクリックすると、青いキャラクターと背景がCSS3アニメーションで動いている様子を見ることができます。CSS3アニメーションはHTMLにキーフ
シンプルなHTMLで実装することにこだわったレスポンシブ対応の汎用性に優れたフレームワーク -Turret
シンプルなHTMLでセマンティックに実装することにこだわった、アクセシブルでレスポンシブ対応のサイトをより簡単に制作するためのフレームワークを紹介します。 MIT Licensesで、個人でも商用でも無料で利用できます。 Turret Turret -GitHub Turretの特徴 Turretはアクセシブルで、セマンティックで、レスポンシブ対応のサイトをより簡単に制作するためのフレームワークです。 レスポンシブ対応 読みやすいマークアップを使い、レスポンシブ対応のグリッドやエレメントを汎用性に優れたclassを使って実装しています。 Design First 直感的なユーザインターフェイスのために、文字の定義とカラーパレットにフォーカスしています。 No JavaScript スクリプトは使用せず、LESSベースでネイティブのWeb要素を採用しています。 セマンティック マークアップは
cssとは？使い方と学び方の基礎まとめ - プログラミング学習の窓口
プログラミングの基礎であるhtmlを勉強していると、必ず出てくる言葉がcss。 現代のwebサービスにおいて、htmlとcssはいわば兄弟のようなもので切っても切れない関係と言えるでしょう。 では、cssとはいったいどういうものなのでしょうか。 簡単に言うと、Webページの文字の色や大きさ、背景、配置といった見た目を設定する言語の一種です。 静的ページも動的ページも見た目の部分の多くはこのcssで制御されています。 もしcssを詳しく学ぶなら、独学もいいですがプログラミングスクールがおすすめです。費用は当然かかりますが、アドバイスがもらえることと、学習スケジュールが管理されるので、強制的に頑張れる仕組みが作れるのもメリットと言えるでしょう。 The post cssとは？使い方と学び方の基礎まとめ first appeared on プログラミング学習の窓口.
効率的に学べた！Webデザインを「職種別」に基礎から勉強出来る総まとめ | コムテブログ
作成：2014/01/6 更新：2014/11/01 Webデザイン > Web制作において、Webデザイナーに関係するものを職種別にまとめました。会社によって分け方は違うと思います。今回は参考サイトとスライドを掲載しています。 エンジニア速報は Twitter の@commteで配信しています。 もくじ アートディレクター １．アクセシビリティ ２．ユーザビリティ ３．UX（ユーザーエクスペリエンス） ４．IA（情報アーキテクチャ） ５．画面設計（ワイヤーフレーム） ６．進行管理 Webデザイナー ７．レイアウト・フォントの知識 ８．配色 ９．Illustratorの使い方 １０．Photoshopの使い方 １１．バナー作成 １２．ボタン作成 フロントエンドエンジニア １３．HTML5 １４．CSS3／Sass １５．javascript １６．jQuery １７．WordPressテー
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
HTML5＋CSS3の「カンタン装飾設定」で今風デザイン
基本的にグラデーションや角丸はジェネレータからコピペして設定できるので、作業自体は簡単です。HTML5＋CSS3サンプルを使って表現してみましょう。 （1）装飾のキモは「グラデーション・線・角丸・影・テクスチャー」 前回HTML5＋CSS3の「レイアウトを自在に使いこなす」では、限られたいくつかのCSSプロパティを組み合わせて、さまざまなレイアウトができることをお見せしましたが、今回はそれに装飾を加えていきます。 いざ装飾しようとすると、どこから手を付ければ良いのか迷ってしまうかもしれませんが、アイコンなどの絵を除けば、装飾の要素は「グラデーション」「線」「角丸」「影」「テクスチャー」くらいなものです。それらを整理して組み合わせることで、全体として一体感のあるデザインに仕上げられます。 「それが難しいんだよ！」というお叱りの声が聞こえてきそうですが（笑）、以下の2つを見比べてみましょう。上
scss (sass) + compassがスーパー便利でびっくりしすぎて今さら環境を作ったり。Koalaで。 – 林家次男
※2013.06.19 に書いた Preprops が Koala より便利っぽいです。 連休中にテーマを作ろうそうしよう。あ、ついでにscssってのとcompassってのがなんかどうも便利っぽいのでちょっと調べてみよっかな。 から始まって。 結論から言うと「狂おしいほど便利で今までぼくは何をしてたんだ」というレベルでした。 環境作るのを忘れないためにφ(｀д´)ﾒﾓﾒﾓ… 環境作るのはちょっとめんどうですががんばりましょう。 ※今回は全てwindows7 x64環境になります。 compassとscssは何がどういいのか 論よりなんちゃら、もう見たらわかります。scssはsassの派生らしく、scssのほうが使いやすかったのでぼくはそちらを選択。 compassとscssが何なのかは各々のページを読んでみてください。 ここではさらっとだけ書いてみます。 scss (sass) にできるこ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5 と SVG で考える、これからの画像アクセシビリティ
Rin 5 - A lean HTML & SASS boilerplate by sanographix
HTML5 UP! Responsive HTML5 and CSS3 Site Templates
ソニック速報
IDEA * IDEA