タグ

design linkに関するbleu-bleutのブックマーク (13)

  • 外部リンクへの属性が変わります - Qiita Blog

    オリンピックが終わり、腑の抜けたようになっている方も多いかと思いますが、お元気でしょうか? 私は元気です。 takorattaです。 この度、QiitaおよびQiita:Teamの投稿記事からの外部リンク(*.qiita.com宛ではないリンク)が含まれていた場合、そのリンクに以下の属性が付与されるように変更いたしました。 rel=”nofollow”target=”_blank”rel="nofollow" はそのリンクを辿らないように、検索エンジンに指示する属性です。QiitaのようなUGC/CGMサイトにおいてそのリンク先の信頼性を保証できない場合に付けるように推奨されており、この度、QiitaとQiita:Teamでもその対応をすることにしました。ただし、実際には、Qiita:Teamに関しては検索エンジンのクロール対象ではありませんので、この変更でも実質的には何も変わりません。

    bleu-bleut
    bleu-bleut 2016/08/28
    Qiitaはこれから外部リンクに、rel="nofollow"とtarget="_brank"をつけることにしたよ。
  • When to Use rel="nofollow"

    July 2, 2021 6 minute read President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for MarketingCloudFX and other key research and development projects at WebFX. Assigning t

    When to Use rel="nofollow"
    bleu-bleut
    bleu-bleut 2015/11/04
    nofollowはもともとスパムコメント対策として使ってたけど、今はページの製作者が関わっていないサイトへのリンクに使われているよ。
  • アンカータグを地味に3Dにする「Jquery.anchor3d」:phpspot開発日誌

    Jquery.anchor3d by w00caSh アンカータグを地味に3Dにする「Jquery.anchor3d」 せっかくの3Dなのになんて地味なんだろうというぐらい地味なエフェクトを実装できます。 他ではないようなエフェクトなので、そういうのが好きな方にはよいかも 関連エントリ 3Dカルーセルが実装できる「Carousel-3d」 CSS&jQueryで作るパネル型の3Dナビゲーション作成サンプル WebGLベースのブラウザ上3Dエンジン「Babylon.js」

  • HTML の linkタグに prefetch 機能が追加され、より便利になるようです - latest log

    linkタグに pre fetch 機能を追加する仕様 (Editor's Draft)が上がってきています。 Chrome - indevelopment IE - サポートするかも Firefox - 不明 Safari - 不明 <link rel="preload" href=“…" as=“…" onload=“…” onerror=“…”> 従来は、new Image や XHR と DOM API を使ってリソース毎に別々のJavaScriptを記述する必要がありましたが、お手軽になりますね。 これまで var img = new Image(); img.onload = function() { document.body.appendChild(img); }; img.onerror = ... img.src = url; var script = document

    HTML の linkタグに prefetch 機能が追加され、より便利になるようです - latest log
    bleu-bleut
    bleu-bleut 2015/06/18
    ライブラリ::画像プリロード。事前読み込みしたいのか、読み込み後イベントを発生させたいのか、よく分からない。
  • HTML の a 要素に target=&#8221;_blank&#8221; をつけるのはもうやめよう

    HTML の a 要素に target 属性をつけて、リンク先の文書をどこで開くのかを指定できますね。 デフォルトは _self で、元のドキュメントと同じフレーム。無指定だとこれになるので、わざわざこれを書くことは少ないと思うけど。 一番よく使うのは target="_blank" じゃないでしょうか。リンク先のドキュメントを新しいタブやウィンドウで開くやつですね。 これ、以前はよくつかってました。ルールとして サイト内リンクは target 指定なし 外部サイトへのリンクは target="_blank" というのが多かったんじゃないかな。 でも最近、これはもうリンク先がどこであろうと指定しない方がいいんじゃないか、と思ってます。 もちろんサイトによってそれぞれ使いわけはあると思うんだけど、少なくともほとんどの手元のサイトの場合はいらない。 target="_blank" を使ってきた

    HTML の a 要素に target=&#8221;_blank&#8221; をつけるのはもうやめよう
  • 外部サイトへの移動やファイルを開く際に警告を簡単に出せる「Jquery.exlink」:phpspot開発日誌

    Jquery.exlink by YupItsZac 外部サイトへの移動やファイルを開く際に警告を簡単に出せる「Jquery.exlink」 他のサイトに移動する際やファイルを開く際に「他のサイトに移動します」などといったワンクッションページを用意するのではなく、ダイアログで実施できるプラグイン。 ダイアログのデザイン等はオプションでカスタマイズ可能。 関連エントリ textareaを入力値によってリサイズできるシンプルなjQueryプラグイン「autoresize-textarea」 画像のズーム&360度回転でプロダクト等をWEB上で可能な限り分かりやすくできるjQueryプラグイン 高機能&高速なテーブル実装jQueryプラグイン「WATable」 画像を並べて動画プレイヤーで動画っぽく表示できる「Jquery image player」 1つのテキストに複数のハイパーリンクを付与で

  • 1つのテキストに複数のハイパーリンクを付与できるjQueryプラグイン「μllinx」:phpspot開発日誌

    μllinx - Multi Directional Links jQuery plugin 1つのテキストに複数のハイパーリンクを付与できるjQueryプラグイン「μllinx」 通常ハイパーリンクは1テキストをクリックで単一URLに移動しますが、こちらを利用すればポップアップでリンクの選択肢が選べるようになる、というものです。 マークアップ的には以下のようにシンプル。 シンプルですが、ありそうであまりなかったかもしれないプラグインですね 関連エントリ タイル上にエレメントを並べられるjQueryプラグイン「jMosaic」 高解像度のディスプレイ用に2-4倍迄の画像に置き換えられる「jQuery.imgx」 リアルなページめくり効果をもったギャラリーが作れるjQueryプラグイン「Onebook3d」 高機能&高速なテーブル実装jQueryプラグイン「WATable」 selectの複

  • What's new for designers, January 2015

    In this month's edition of what's new for designers and developers, we've included new apps for design teams, frameworks and boilerplates, new design resources, JavaScript resources, resources for startups, new podcasts, color resources, and much more. And as always, we've also included some awesome new fonts! Almost everything on the list this month is free, with a few high-value paid apps and to

    What's new for designers, January 2015
    bleu-bleut
    bleu-bleut 2015/01/19
    スクラップ済み。ホバー時のアニメーション、ロード時にaタグ内の文字を一文字ずつspanで囲む。下線は:afterをホバー時に伸ばしてる。
  • When to use target="_blank" | CSS-Tricks

    UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. Anchor links1 may have a target attribute which controls what happens when that link is clicked. One of the possible values of that attribute is _blank, which tells the browser to open a new window (or tab, if that’s the user’s preference) when that link is clicked. This use

    When to use target="_blank" | CSS-Tricks
  • はてなブックマークが直したらいいところ

    @Hamachiya2 さんが 「はてなブックマークのだめなところ」 って記事を書いてたんですけども、これ、はてブの方でちょっと HTML のコーディング (CSS の方でもいいけど) を修正するだけで簡単に直るんですよね。 なので簡単にソースコードの修正案を挙げてみるっていう余計なお世話。 これ、文字と文字のあいだ、行間に、けっこう大きな「すきま」があるんですね。で、そこをクリックしてしまう。 はてなの皆さんは、MacBookとかタブレットばかり使っているリア充オシャレメガネスタバ野郎ばかりだからきっと気づかないのかもしれませんが、ぼくみたいにふつうのVAIOとかマウスとか使ってる人がいることも忘れないでほしいです。 はてなブックマークのだめなところ : ぼくはまちちゃん!(Hatena) から引用 画像は Hamachiya2 さんのサイトから引用しますが、こんな感じで行間をクリックす

    はてなブックマークが直したらいいところ
  • Change Text Link Hover Effect Using CSS3

    2020年2月25日 CSS どのサイトでも見かけるテキストリンク。リンクのついたテキストにマウスオーバーすると文字色を変更する、というシンプルかつわかりやすい効果を実装しているWebサイトが多いかと思います。この装飾をもう少し変更できないかな?と思いCSSのみでプラスすることができるエフェクトをいくつか紹介します。 ↑私が10年以上利用している会計ソフト! 目次 ちょっと予備知識 文字色をふんわり変える 背景色をふんわり変える 文字をぼかす 光を放つグロー効果 背景を角丸に レインボーカラーに 拡大・縮小 角度を変える くるっと回転 1. ちょっと予備知識 今回はjQueryなどのJavaScriptを使わず、CSSのみで実装できる小技を集めています。その中でどの小技にも採用しているのが transition プロパティです。transitionプロパティは、時間の変化を操作するもので、

    Change Text Link Hover Effect Using CSS3
  • Favicons Next To External Links | CSS-Tricks

    UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. Unless we make a custom CSS selector for every single site we want to do this for, CSS isn’t capable of yanking the href off links and using it to plant a favicon next to the link. But if we involved a smidge of JavaScript, we can get it done. The “I Wish” CSS Only Technique

    Favicons Next To External Links | CSS-Tricks
  • 可能性を広げる10のスタイルシート | コリス

    ウェブサイトを制作する際、特にCSSの新しいテクニックにはデザインの可能性を広げるのに役立つものがたくさんあります。 すべてのウェブ制作者が知っておくべき10のスタイルシートを紹介します。 @media screen and (max-width: 960px) { } 「@media」は単に印刷用ページのためだけではありません。最近のウェブサイトで多く見かけるレスポンシブデザインや可変レイアウトでもよく利用されます。 「min-width」などのプロパティを使ってMedia Queryを作る際は、ビューポートのサイズを設定して利用してください。 HTML <meta name="viewport" content="width=device-width, initial-scale=1.0"> スマートフォンでは表示するページの大きさをビューポートの幅に(主に)縮小してフィットさせるため

    bleu-bleut
    bleu-bleut 2012/07/27
    overflow: hidden;が機能しない時って何? / aタグのoutline: none;って必要?
  • 1