サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
猛暑に注意を
www.materialpot.com
ウェブサイトのデザインといえば、かつてはPhotoshop、自分はFireworksを使っていたりしましたが、近年少しずつトレンドも変わってきました。「Sketch」にはじまり、「AdobeXD」などUI設計に便利な使い勝手の良いソフトが使われるようになり、「figma」も、ブラウザで操作するアプリケーションとは思えないほど多機能で且つ使いやすいソフトです。 そんな中、AdobeXDで作成したファイルをエクスポートしてfigmaにインポート出来ないか、という相談があり、対応した時の覚え書きです。 AdobeXDの.xdからfigmaの.figに変換する いろいろ便利になってきているこのご時世、最初は簡単に出来ると思っていました。しかし、XDからfigmaへの移行は簡単には出来ません。いろいろ調べてみたつもりですが、2020年5月時点では.xdファイルから.figファイルに変換出来そうなのは
リンク先のURLを動的に変更したい場合、jQueryだととても手軽に実装することが出来ます。この記事ではaタグのhrefを指定したURLに差し替える例と、.comから.jpに一部だけ置換する例をご紹介します。 リンク先URLを指定したURLに差し替える例 変更前のHTMLがこのように書かれているとします。 例えばこのaタグのhrefの値を「https://www.google.co.jp/」に変更したい場合、下記のようにjQueryを記述します。 $(function(){ $("#link_text a").attr("href", "https://www.google.co.jp/") }); これでリンク先URLが差し替えられて下記のようになります。 リンク先URLを部分的に置換する例 ドメインや拡張子など、部分的に置換したい場合は下記のように記述します。この例の場合、aタグ全ての
今回は透明度を指定するためのプロパティ「opacity」で発生したバグの解決法を書いていきます。まずは「.opacity」というクラスに、opacityの指定を行ないます。 .opacity:hover{ filter:alpha(opacity=80); /*IE*/ -moz-opacity:0.8; /*Firefox*/ opacity:0.8; /*Opera・Safari*/ } そしてこの「.opacity」を画像に適用します。 <img src="画像パス" class="opacity"> これでオンマウスすると画像が透明になるのですが、Firefoxのみ、オンマウス時に画像が1px動いたり、ひどい時は画像が無くなるような時も。これは背景指定が原因のようで、backgroundの指定を追記する事で解決できます。 background: #fff; これでFirefoxの問
【今回のCSS】 .clear{ clear: both; visibility: hidden; height: 0;} 【詳細】 回り込みを解除する「clear: both;」の指定方法については色々なパターンがあると思いますが、仮に .clear{ clear: both;} というクラスを作ったとします。これを<br />に指定すれば <br class="clear" /> となり改行で回り込みを解除しますが、本来「clear: both;」はブロック要素でしか使う事は出来ません。しかしブロック要素(div等)に指定すると <div class="clear">テキスト</div> <div class="clear"><img src="1px画像など" /></div> という記述になり、続くコンテンツとの間に出来る"隙間"に悩まされる人も多いと思います。 この問題を解決する
【概要】 規約同意ページを作る時などに便利な、チェックボックスでボタンを動的に表示／非表示を切り替えるjavascript。 【サンプルコード】 <form> <input type="checkbox" name="agreement" value="1" onclick="this.form.btn.disabled=!this.form.btn.disabled" id="agreement"> <label for="agreement">同意する</label> <br /> <button type="submit" name="btn" disabled>送信</button> </form> 【サンプル】 同意する 送信
Wordpressの管理画面はカスタムフィールドやプラグインの使用により様々なカスタマイズが可能ですが、「この記事の編集画面で、ここだけ非表示にしたい」といった事、ありませんでしょうか。 ...
このページを最初にブックマークしてみませんか？
『フリーWEB素材集 / 素材の壺』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
