タグ

2014年11月2日のブックマーク (7件)

  • 要素の幅サイズをすべて取得する方法のメモ【jQuery】

    要素の幅を取得したい時に、jQueryではwidth()でその要素の幅を取得することができます。(時と場合によっては、outerWidth()やinnerWidth()を使います。) 例えばですが、下記図のようなトピックパスのリスト(li要素でマークアップした場合)の幅を取得したい場合には下記のように書きます。 jQuery(function($) { $("#topic-path li").width(); }); しかし、width()は該当する要素の最初にマッチした要素の幅しか取得するができません。なので、一番最初の【ホーム】と書かれている要素しか取得することができません。 そこで、すべての幅を取得するためには以下のことを行います。 取得した幅サイズを格納するために配列を作る 幅取得のために繰り返し処理 取得した幅サイズを配列に加える 取得した幅サイズを格納するために配列を作る 取得

  • CSSだけで画像をトリミングする方法3つとjQueryを使う方法1つ | Cappee Design

    @cappeeです。 特にシステム案件のコーディングだと、縦横比が異なる画像を扱う場合も多いと思います。 例えばユーザー画像などを正方形で表示したい場合、アップされる元画像はユーザに委ねられるので画像のサイズや縦横比は様々になると思います。アップしたタイミングで画像を加工できるならいいですが、そうでない場合、見た目を整えるためにCSSで同じサイズにトリミングしてしまいましょう。 トリミングにもCSSだけで3つのやり方があるので、状況によって使い分けたいですね。 overflow: hidden を使う 一番オーソドックスなやり方がoverflow: hidden を使ってトリミングする方法です。 trimming というクラス名が入ったトリミングする枠用のタグはブロック要素である必要がありますので、もしインライン要素に指定する場合は、CSSに display: block; も追加してく

  • Sublime textでコードをなるべく楽に綺麗に書くための機能紹介 3つ - megane9988のブログ

    1. コードフォーマット パッケージとして提供されている HTML-CSS-JS Prettify を導入する。使い方はソースコードで右クリックして、Prettify Codeを選択。ショートカットは Shift + Command + H。しかるべきところでの改行と、インデントをまとめてしてくれるのでたすかります。 コードフォーマットの設定 Prettify Code コードフォーマットにおけるデフォルトでのインデントの設定はスペースです。設定変更や拡張子の追加などを行う場合は、Performance→Package Setting → HTML/CSS/JS/Prettify → Set Prettify Setting と進むと、設定ファイルが表示されます。(コマンドパレットからも呼び出し可。) インデントの設定を変更する場合は インデントの文字をスペースからタブに dent_cha

    Sublime textでコードをなるべく楽に綺麗に書くための機能紹介 3つ - megane9988のブログ
  • 少しのコードで実装可能な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小技集
  • オリジナルテーマの作り方 3.0+

    2014年8月22日 Wordpress WordPressのオリジナルテーマの作り方について説明していきます。2010年1月に書いた記事とはバージョンが違い、コードも変更されたため、新たに記事にしてみました。慣れると簡単なのですが、初心者には少し難しいWordpressのカスタムデザイン。Wordpressのテーマがどのように動くのか、スタティックのHTMLテンプレートにどうやってWordpressの機能をつけるのかを説明していきます。PHPの知識は必要ありませんが(もちろんあった方が楽ですが)、自分でデザインをするためのPhotoshopとCSSの知識は必要です。 ↑私が10年以上利用している会計ソフト! WordPress オリジナルテーマの作り方 3.0+ WordPress オリジナルテーマ作成 完璧ガイド WordPressをローカルにインストールする WordPress オリ

    オリジナルテーマの作り方 3.0+
  • 【Photoshop入門】Webデザインをはじめよう!第1回 デザイン前に覚えておきたい環境設定とレイヤー機能 - Adobe Blog

    The Blog | Welcome to Adobe Blog アドビのブログでは、Creative Cloud、Document Cloud、Experience Cloudの最新情報や役に立つ情報を紹介しています。

    【Photoshop入門】Webデザインをはじめよう!第1回 デザイン前に覚えておきたい環境設定とレイヤー機能 - Adobe Blog
  • 図解で分かる”コンテンツSEO” : コンテンツ配信→リンク蓄積→流入増のサイクルを作る | ナイルのマーケティング相談室

    土居です。割と個人的にはほぼ死語だと思っていますが多くの人に都合良く遣われている「コンテンツSEO」なるものについて、皆さんにそれがザックリどういう取り組みであるのかをイメージして頂けるように、とりあえず一般化して図解でまとめました。 \疑問や不明点はお気軽にご質問ください!/ コンテンツSEOとは何ですか ユーザー中心の有機的な解釈で語れば、ターゲットユーザーが日々困っていることや興味のある分野の情報などをコンテンツとして発信していくことで、より多くのユーザーとの接点を作り、関係性を構築・育成していく取り組みと言えます。 一方でSEOっぽい解釈をすれば、継続的にコンテンツを発信していくことで露出を増やし、自然なリンクをサイトに蓄積し、総合的なトラフィックを積み上げていく取り組みと言えます。 今回は後者の機械的な解釈でのお話です。前者のお話についてはこちらの記事などをどうぞ。 コンテンツ→

    図解で分かる”コンテンツSEO” : コンテンツ配信→リンク蓄積→流入増のサイクルを作る | ナイルのマーケティング相談室