タグ

TIPSとwebに関するsometkのブックマーク (61)

  • 少しのコードで実装可能な20のjQuery小技集

    2016年6月22日 jQuery 素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、以前書いた「少しのコードで実装可能な20のCSS小技集 」に続き、今回はプラグインなしで実装できるjQueryの小技を紹介します!「jQueryってなんだ?」という人もコピペで実装できますよ!サンプルも用意したのでぜひご覧ください! ↑私が10年以上利用している会計ソフト! 追記:この記事で紹介されているいくつかの方法が、今ではCSSのみで実装可能です!詳しくは「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」をご覧ください。 jQueryの基的な使い方 まずはjQuery家からjQueryファイルをダウンロードします。<head> 内に下記を記述し、jQueryファイルを読み込みます

    少しのコードで実装可能な20のjQuery小技集
  • 人気ブログも夢じゃない!ブログのノウハウが詰まりまくった記事まとめ * 男子ハック

    @JUNP_Nです。男子ハックも世間的には成功しているブログと評価していただくことが増えてきました。ありがとうございます。そんな僕らがブログを始める前、始めてから参考にした先輩ブロガーさん達のノウハウがたっぷり詰まった記事をまとめて紹介します。 気でやれば誰でも人気ブログを作れる 人気ブログは誰でも作れる。僕はそう思います。要は「やったか」「やらなかったか」ということだけ。たったそれだけのコトだと思います。少なくとも「男子ハック」を例にとれば、Web上にたくさん散らばっているノウハウを気でやってみた結果です。 実際にWeb上に散らばっているノウハウを正確に実行してきたか?と言えば、そうではないのですが、考え方や手法など参考になることは多くあります。 そうゆう方法があるのに、知っているのにやらないのはもったいない。 今回まとめて紹介する記事は、ブログを始めたばかりの人も、ブログを長く続け

    人気ブログも夢じゃない!ブログのノウハウが詰まりまくった記事まとめ * 男子ハック
  • [CSS]サイズが分からない要素を真ん中に配置するテクニック

    width, heightのサイズが分からない要素を天地左右の真ん中に配置するスタイルシートのテクニックを紹介します。 Centering in the Unknown [ad#ad-2] 下記は各ポイントを意訳したものです。 要素のサイズが分かっている場合 要素のサイズが分からない場合 まとめと対応ブラウザ 要素のサイズが分かっている場合 「真ん中に配置するエレメント」と「その親エレメント」両方の高さと幅のサイズが分かっているのであれば、エレメントを真ん中に置くのは簡単です。 「真ん中に配置するエレメント」を「position: fixed;」にし、topとleftを50%、marginのtopとleftをエレメントの半分のサイズでネガティブマージンで配置します。 CSS .centered { position: fixed; top: 50%; left: 50%; margin-t

  • 見落としがちなHTML5で変更された要素いろいろ

    2013年3月23日 HTML, Webサイト制作 HTML5を勉強していて、section, nav, header, footerなどの新しく追加された要素について説明している記事はよく見かけるのですが、HTML5で変更された要素について触れている記事が少ないように感じたので、よく使うものを中心にちょっとまとめてみます。既存のWebサイトをHTML5化する時は、コンテンツ内に変更された・または廃止された要素がないか確認することも大切ですね! ↑私が10年以上利用している会計ソフト! HTML5の基はここからお勉強! 「ところでHTML5ってなに?」という方は、まずは以下の記事を読んでみてください。このようにHTML5の基について解説している記事はたくさんあるので、詳しい説明は今回は端折らせて頂きます。変更点のみに焦点を当てますよ! Webの3つの問題を解決する「HTML5」とは何な

    見落としがちなHTML5で変更された要素いろいろ
  • 住太陽の「SEO 検索エンジン最適化」

    のWebサイトで、数少ない信頼できるSEOの情報源です。中小規模のWebサイトであればこのサイトだけで十分と思うほど、わかりやすく、情報が網羅されています。特に、まずSEOに取り組もうという初心者の方、しっかり見直そうという初級者の方は、まずはこちらをバイブルにして取り組む事をお勧めします。 SEO(検索エンジン最適化)の意味SEO(Search Engine Optimization: 検索エンジン最適化)とは、自社のウェブページがGoogleやBingなどの検索結果で上位に表示されるようにウェブサイトの内外を改善する取り組みです。SEOを実施することで、自社の事業領域に関心の高い見込み客を効率的に、無料で集客できます。 SEOは特別なものではなく、自分で実践できます。このページは実践のための解説ページです。SEOの概要とステップを紹介しているほか、文中のリンクをたどることでより詳し

    住太陽の「SEO 検索エンジン最適化」
  • SEO屋をブラックからホワイトまで7分類してみた | 初代編集長ブログ―安田英久

    今日は、SEO事業者の話題を。いろんな人が「SEOやります」と言っていますが、その中身は千差万別。ルールを守るところからルール無視のところまで、いろんなタイプのSEO事業者を分類してみました。 SEO事業者といっても、ユーザーのニーズを調査してどんなコンテンツを作りサイトの構造をどうするべきかアドバイスするところもあれば、「リンク1003万2000円」とリンクだけを売るところ、他のSEO事業者にリンクを卸すところなど、いろいろです。 SEOを依頼するならば、何をしてくれるのかを知ったうえで頼むのがいいのですが、今回はその手前、検索エンジンの利用規約やネットの一般的なルールを守るか守らないかと、検索エンジンに対する知識の深さでマッピングしてみました。 上図の横軸に示す「ホワイト」がルールを守るタイプで「ブラック」がルールを守らないタイプを、縦軸が検索エンジンに関する知識の有無を示します。

    SEO屋をブラックからホワイトまで7分類してみた | 初代編集長ブログ―安田英久
  • ずっと使えるデザインテクニック。すっきり美しく見せる『余白』と『文字』の使い方。

    こんにちは、デザイナーの長谷川です。 今回は僕が普段気をつけている、ちょっと意識するだけでスッキリしたデザインになるレイアウトのコツをご紹介します。 デザイナーじゃない方も、企画書や簡単な UI のモックアップ、Web や雑誌のレイアウトなどに応用できると思いますので、ぜひ参考にしていただければと思います。 1. 上下左右のマージンを均一に Web デザインや UI デザインの要素全てに対して隣り合う要素との間隔やバナー、ボタンなどの外側と内側の要素の上下左右マージンをできるだけ均一にすることで、デザインがスッキリ見えます。 2. 内側のマージンは外側のマージンより狭く レイアウトなど一番外側とコンテンツの間隔より文章のかたまりや画像同士の間隔を小さくします。基的にコンテンツのまとまりを作るためですので、デザインによっては広く取って区分ける場合もあります。 3. 段落の下は間隔を広く開け

    ずっと使えるデザインテクニック。すっきり美しく見せる『余白』と『文字』の使い方。
  • Av-jyo.com

    The domain av-jyo.com maybe for sale. Click here for more information. Av-jyo.com Related Searches: Cloud Service Providers Secure Internet Browser Computer Internet Security Web Designing Courses AVI DVD Player Online Data Protection MatchMaking Services Related Searches: Cloud Service Providers Secure Internet Browser Computer Internet Security Privacy Policy

  • 月間100万PV超のボクちゃんが人が集まるブログの秘訣を語っちゃうよ

    ブログのアクセスを増やしたい? okok、その気持ちは十分理解できる。だからブログのアクセス数を増やす秘訣を教えちゃおう。ホントは自分のブログで書いてもいいんだけど、素の言葉で書きなぐりたいから増田で書く。誤字脱字見つけても黙っといてくれよな!同意できる奴だけ次読んでくれ。 内容を絞るあれもこれも書いてねーか? お前の日記と経済ニュースなんか聞きたくねーんだよ。 日記なら日記だけ、コピペならコピペだけ、ニュースならニュースだけ、レビューならレビューだけ。特化したブログを書け。 あれもこれも趣味が被る奴なんていねーし、他の趣味は邪魔なんだよ、邪魔。もっかい言うぞ、邪魔だ。 どうしても複数かきたきゃプラモデルとミニ四駆とか、株と不動産とか、おしべとめしべみたいに関連するジャンルにしろ。でも裏でshare使ってますなんて放言してる人間が著作権論について正しいこと言ってても誰もついてこねーぞ! コ

    月間100万PV超のボクちゃんが人が集まるブログの秘訣を語っちゃうよ
  • IDEA * IDEA

    ドットインストール代表のライフハックブログ

    IDEA * IDEA
  • 最近のインターフェイスデザインから学ぶ、7種類のボタンデザイン

    ユーザーのアクションを誘う購入や送信や検索ボタンなど、最近のインターフェイスデザインでよく見かける7種類のボタンデザインを紹介します。 Common elements used in interface button design [ad#ad-2] 下記は各ポイントを意訳したものです。 また、元記事ではそれぞれのボタンを作成するPhotoshopのチュートリアルも掲載されています。 1. テクスチャを使ったボタン 2. パターンを使ったボタン 3. 3Dを使ったボタン 4. 1ピクを使ったボタン 5. 背景をインデントしたボタン 6. グロウを使ったボタン 7. ハイライトを使ったボタン 1. テクスチャを使ったボタン テクスチャはボタンにわずかな奥行きを与え、クリックが可能であることが分かるようにする素晴らしいテクニックです。

  • サイトやブログの運営でよく使いそうな.htaccessの設定のまとめ

    ウェブサイトやブログの運営でよく使いそうな便利な.htaccessの設定を紹介します。 こういうまとめは定期的にあがってきますが、やっぱり必要なのでシェアします。 10 useful .htaccess snippets to have in your toolbox [ad#ad-2] 下記は各ポイントを意訳したものです。 URLからwwwを削除 hotlinkingの防止 feedをfeedbunnerにリダイレクト カスタムエラーページ ダウンロードファイルの処理 PHPのエラーのログ URLからファイルの拡張子を削除 ディレクトリのファイルリストを見せない ファイルを圧縮して軽量化 文字コードの指定 URLからwwwを削除 SEOなどの理由で、URLからwwwを削除して使うことがあるかもしれません。このスニペットは、あなたのウェブサイトにwww付きでアクセスしてきてもwww無しに向

  • [CSS]IE9対応、IEの各バージョンごとに異なるスタイルシートを適用する方法のまとめ

    IEの各バージョンごとに異なるスタイルシートを適用する方法はいくつかあります。それらの利点・欠点を検討し、さらにIE9へどのように対応したらよいのかを紹介します。 In defense of CSS hacks — introducing "safe CSS hacks" [ad#ad-2] 下記は各ポイントを意訳したものです。 Conditional stylesheets -条件付きコメント:スタイルシート Conditional classnames -条件付きコメント:class名 CSS hack -安全なCSS hackとは 条件付きコメント:class名とCSS hackのコンビネーション [ad#ad-2] Conditional stylesheets -条件付きコメント:スタイルシート 条件付コメントはInternet Explorerの特定のバージョンでロードさせるべ

  • concrete5 の簡単なテーマの作り方 - EC-CUBEのカスタマイズ、ネットショップ制作メモ

    僕が日語化に参加している、直感的CMS、concrete5の簡単なテーマの作り方をFacebookに書いたので、こっちにも書いておきます。 適当にHTML+CSSでページを作る。 HTMLファイルのファイル名をdefault.phpに変える。 DTD宣言の前に魔法の呪文1を追記する。 <?php defined('C5_EXECUTE') or die(_("Access Denied.")); ?> の最後に魔法の呪文2を追記する。 <?php Loader::element('header_required'); ?> ブロックを置きたいところに魔法の呪文3を追記する。 <?php $a = new Area('[area name]');//好きなエリア名を入れる、大体Side barとMain $a->display($c); ?> 直前に魔法の呪文4を追記する。 <?php L

    concrete5 の簡単なテーマの作り方 - EC-CUBEのカスタマイズ、ネットショップ制作メモ
  • 部分的に配信しているRSSフィードを全文配信に変換してくれるサイト「Full Text RSS Feed Builder」 | ライフハッカー・ジャパン

    モバイルバッテリーとは呼べない。「ほぼポタ電」なコレ1台で有事の時もアウトドアも大活躍!【AmazonスマイルSALE】

    部分的に配信しているRSSフィードを全文配信に変換してくれるサイト「Full Text RSS Feed Builder」 | ライフハッカー・ジャパン
  • サービス終了のお知らせ - NAVER まとめ

    サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。

  • ログインフォームに大切な7つの要素と重要な1つの機能

    ログインフォームを実装する際に、大切な7つの要素と重要な1つの機能を紹介します。 元記事では下記のCSS3で実装されたフォームもダウンロードできます。 フォームのタイトル このフォームが何についてのものであるか手短に説明されたタイトル。特に、ウェブサイトの名称を記すことは非常に重要です。 非メンバー用のリンク 非メンバーが偶然、このページを見つけてしまうことがあるかもしれません。そして、メンバーを増やすチャンスもあるので、登録ページへの誘導も行っておきます。 ラベルとフィールド ログインフォームは通常、2つのフィールドで構成されていますが、ラベルは読みやすいようにします。 パスワードを忘れた場合 これは同じく、非常に重要なリンクです。多くのユーザーは多数のアカウントとパスワードをもっているものです。そして、しばしばそれはあなたのサイトでどれなのか忘れてしまうことがあります。 また、配置する

  • 2/3 CSSハックを使わずIEのバグに対処する方法 [ホームページ作成] All About

    CSSハックを使わずIEのバグに対処する方法(2ページ目)特定のブラウザに限定してスタイルを適用する方法として、ブラウザのバグを利用した「CSS Hack(ハック)」がよく使われています。IEでのみ表示がおかしくなる場合の対策なども紹介。

    2/3 CSSハックを使わずIEのバグに対処する方法 [ホームページ作成] All About
  • グラデーションを使用しないでウェブデザインをする方法

    なんとなくグラデーションを使用したり、困ったらグラデーションを使用したり、トレンドだからグラデーションを使用したりしていませんか? グラデーションを使用しないでデザインする方法をBuild Internet!から紹介します。また、グラデーションをより効果的に必然として使用するためのエントリーでもあります。 多くのウェブデザインのブログで周期的にページデザインのPhotoshopのチュートリアルを紹介しています。これらは素晴らしいウェブページを作成するためにグラデーションベースのデザインが一般的であるというおかしな印象を与えてしまいました。こういった記事を書く我々は間違って解釈されてしまう記事を書いたという罪があります。 ウェブデザインはデザイントレンドがどれだけ含まれているかのチェックリストではありません。何を使用するにしても、何をやめて何をアレンジするか学ぶ必要があります。 WeFunc

  • 少しのコードで実装可能な20のCSS小技集

    2019年5月17日 CSS CSSハックに続き、このCSS小技集も私のブックマークにずらりと並んでいたので、整理も兼ねて記事にしてみました。CSSのお勉強を始めたばかりの頃にブックマークしておいたものも多数。。ということで初心者さんからベテランさんまで参考にしてみてください! ↑私が10年以上利用している会計ソフト! コードはサンプル内の「HTML」や「CSS」タブをクリックしてくださいね! 少しのコードで実装可能なCSS小技集 シリーズ 【第2弾】少しのコードで実装可能な20のCSS小技集 【第3弾】少しのコードで実装可能な15のCSS小技集 まずはCSS基礎編 1. divを中央揃えにする ほとんどのサイトが基準となるdivを画面の中央揃えに設定しています。左右のmarginをautoにして中央揃えに。 See the Pen Center Div by Mana (@manabox

    少しのコードで実装可能な20のCSS小技集