Web制作者はおさらいしたい！CSSの勉強になる実用的な基本テクニックまとめ | コムテブログ
TL;DR 実務で意外と使う基本的なものやトリッキーな小技。少ない記述で済む CSS テクニックなどをまとめました。今回は Web 制作に関わるなら、必ずおさえておきたいものや今後使っていきたいテクニック中心です。 画像 １．画像の下にできる隙間をなくす 画像の下に色などを配置すると、わずかに隙間が出来ることがあります。そんな時は親ブロックにline-height: 0;で OK。他には画像に直接vertical-align: bottom;かdisplay:block;を使えます。 css 画像の下にできる隙間をなくす方法 ２．画像の下にテキストが回り込まないようにする 回り込み解除は親要素か以下の例だとテキストにoverflow: hidden;かoverflow: auto;を指定します。IE 対策で zoom 属性 zoom:1;も同時に設定します。 css ３．float を使わ
必ず設定したい！Googleアナリティクスを導入したら最初に行うべき基本設定
Googleアナリティクスは、Googleが無料で提供しているウェブサイト分析ツールであり、多くの企業や個人が導入しています。 しかし、Googleアナリティクスは、簡単に導入できるということもあり、最初にトラッキングコードだけ設置して設定などは特にしていない、となっているサイトも多いのではないでしょか。 Googleアナリティクスをうまく活用すれば、他の有料の分析ツールに負けないくらいの機能を利用することができます。 今回は、トラッキングコードを設置した後、一番最初に設定しておくべき4つの基本設定をご紹介します。 Googleウェブマスターツールと連携する サイトに関する様々な情報を知ることができるGoogleウェブマスターツールですが、Googleアナリティクスと連携すると非常に便利です。 【Googleウェブマスターツールについては下記参照】 【保存版】Googleウェブマスターツー
かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技
2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す（文字色も変更） ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう！サンプルも作ったのでコードと
iPhoneユーザなら覚えておかないと絶対損する、カッコなどの「記号文字入力」の小ワザまとめ
iPhoneで文字入力をする友人を見ていた時に（どんな時だ） 「あっ、その記号ならこうすればもっと簡単に入力できるのに…」 などと思うことがありましたのでまとめてみました。 「フリック入力のみ」にしておこう まずは設定のお話。 iPhoneで文字入力の速度を上げるには「フリック入力のみ」が欠かせません（指を縦横に動かしたり弾いたりして行う文字入力）。 デフォルトの状態でもフリック入力は当然可能なのですが、更に便利にするために「フリック入力のみ」をONにしておきましょう。 「フリック入力のみ」の設定方法 各種記号の出し方 ではでは、iPhoneを使用していて「この記号、簡単に出せたらなぁ…」とお悩みの方に下記の小ワザを捧げましょう。 「、」を変換 「わ」の左側にあるボタンをタップすると顔文字が色々出てきますが、右側にあるボタンを一度タップして「、」を入力すると、変換候補に ナカグロ（・） カ
iTunesのバカでかいデータを外付けHDDに移行する方法！音楽・ビデオを移行してPCもスッキリ - あなたのスイッチを押すブログ
iTunesが保有しているデータは、放っておくと結構な大きさになります。音楽データ・動画データなどなど、どれも大容量データですからね。 加えて私が使っているのはMacBook Air。PC本体に保存できるハードディスク容量にはかなり限りがあります。 そこで今回、iTunesのデータをごっそり丸ごと外付けHDDに移し替えることにしました。今回はそのやり方についてご説明します。 ① iTunesデータの保有場所 まずは移行させる元データである「iTunesデータ」を見つけましょう。 Finderを開き、「Macintosh HD」→「ユーザ」→「(ユーザー名)」→「ミュージック」の中に、「iTunes」フォルダがあります。これが目的のファイル。 ② iTunesデータを外付けHDDにコピー 該当するファイル「iTunes」を見つけたら、それをそのまま外付けHDDにドラッグ＆ドロップしてコピーし
Advanced Custom Fields で画像を挿入してみる
最近よく使用するWordPressプラグイン「Advanced Custom Fields」で 画像を挿入する際の手順を自分用のメモとしてまとめてみました。 まずは「Advanced Custom Fields」の設定を行います。 ここでのポイントは返り値の設定を「画像ID」にするという事です。 次にテンプレートへの記述は、 <?php $attachment_id = get_field('image'); $size = "full"; // (thumbnail, medium, large, full or custom size) $image = wp_get_attachment_image_src( $attachment_id, $size ); $attachment = get_post( get_field('image') ); $alt = get_post_m
TodoistとEvernoteでつくるフリースタイルな仕事環境
仕事を管理するのにきっちりとしたプロジェクト管理のツールを使うのもよいのですが、もう少しあいまいで、何でもフリースタイルで書き込むことができるほうが性に合っているというひともいるでしょう。 たとえるなら、一枚の大きな紙です。 きっちりとしたリポート用紙に仕事にまつわるタスクやメモを書き込んでゆくよりも、えいっと大きな紙にその場に必要なことを書き込みながら、時には乱暴に消したり上書きしながら仕事を進めるほうがいいということはよくあると思います。 こうした仕事環境をデジタルで作ることができるかが一つの挑戦なのですが、ここでも「人生の仕事場」へと舵を切ったEvernoteが答えを出しています。 それが本家Evernoteブログで紹介されていた、TodoistとEvernoteを使ったこんな方法です。 シンプルが最強な Todoist と Evernote Todoistは私もここ１年ほどメインで
諦めないで…！WordPressでページ送りがうまく行かない時の3つの対処法+究極奥義
WordPress独自テーマを作る際に私がハマりがちなのが、ページ送り。 記事一覧の取得にquery_postsを利用しているとページ数や条件をうまく取得できず、2ページ以降の記事が表示されない事が多々あります・・。 今回はその「ページ送り機能」がうまくいかないときに使える、 私の知るすべての対処法をメモしておこうと思います。 query_postsとは 記事一覧を表示する際、特定のカテゴリだけ表示させたかったり、作成日順ではなく更新日順に並べたかったり。 そんな要望を叶えてくれるのが query_posts ですね。 たとえばカテゴリIDが3の記事を4つずつ表示したい時はこう。 <?php if (have_posts()) : query_posts('posts_per_page=4&cat=3'); ?> <?php while (have_posts()) : the_post(
【保存版】Macが起動しない時に自分でできる7つの対処法 | 男子ハック
@JUNP_Nです。Macが起動しない！そんな時に自分でできる対処方法が7つあります。ジーニアスバーに持ち込んだとしても、これ以上のことは対応できないので自分でここまでやっておけると良いと思います。Macユーザーの人は忘れずに覚えておきましょう。 Macが起動しなかった場合に自分でできる対処法まとめ「Macが起動しなくなった」そんな時にどうしたらいいのか知っていますか？ 「ディスクユーティリティ」を使用したメンテナンスを定期的に行うことも大事ですが、Macが突然動かなくなるという不測の事態が起こった際には、以下の7つの方法を試してみると修復できるかもしれません。 Macが起動しない時の対処法（1）「NVRAM/PRAMリセット」Macに何かしらの問題が発生したらまずやってみてくださいとAppleから言われるのは「NVRAM/PRAMリセット」です。「Macの設定を記憶していNVRAM/PR
【保存版】知らないと損！Amazonで安く買い物するために知っておきたい3つテクニック | カミアプ | AppleのニュースやIT系の情報をお届け
ども！ともぞうです。 ネットでオンラインショッピングをしようとすると「送料無料が多いAmazon」か「ポイントの付く楽天市場」が安いし便利ですよね。 今日はその内の1つであるAmazonで安く買い物するために知っておきたい3つのテクニックをご紹介したいと思います。 これを知っちゃったらもう普通に買うのがバカバカしくなるかもしれませんよ！ Amazonで欲しい物を安く買う3つのテクニック 送料無料で買えるものが多いAmazonですが、知らないだけで実はもっとお得に買い物する方法があるんです。 そんな知っている人だけが得をするテクニックを3つご紹介します。 テクニックその1: タイムセールで限定割引品をゲット 最初にご紹介するのは”Amazonタイムセール“と呼ばれる期間・数量限定で行われているセールです。 Amazonタイムセールのページにアクセスしてみると、現在開催中のセールがずらっと並ん
[WordPress]ダッシュボードの使い勝手を向上させるカスタマイズTIPS 10
ログイン画面のロゴ変更 まずはおなじみのカスタマイズから。 WordPressロゴをサイトのロゴに変更します。複数のメディアを運営している時などに判別しやすいです。 functions.php内 //ログイン画面のロゴ変更 function login_logo() { echo '<style type="text/css"> #login h1 a { background: url('.get_template_directory_uri().'/images/login_logo.png) no-repeat; width: 320px; height: 70px; background-size:100% auto; } </style>'; } add_action('login_head', 'login_logo');
![[WordPress]ダッシュボードの使い勝手を向上させるカスタマイズTIPS 10](https://cdn-ak-scissors.b.st-hatena.com/image/square/1c6e8d439bbe9e018807c9d2af64018ebe3412b1/height=288;version=1;width=512/http%3A%2F%2Fwebimemo.com%2Fwp-content%2Fuploads%2FDashboard-Customize-TIPS-10.png)
【アウトドア活用術】乾電池とガムの包み紙だけで簡単に火をおこせます
アウトドアシーンで火をつけるために、マッチやライター、バーナーなどで火をつけるのは当たりまえですが身近なもので簡単に火を起こすことが出来る方法として知っておいたほうが良いでしょう。 必要なのは乾電池とガムの包み紙（銀紙）だけ。これさえあれば驚くほど簡単に火をおこせます。 ▼どこにでもある単三電池1本と ▼ガムの包み紙 ▼包み紙を三等分して真ん中が2mm程度になるように切ります ▼銀紙側を電池の両端にくっつけるだけ これで簡単に火がつきます この方法で細かく切った新聞紙に火をつけることでアウトドアでは焚き火にすることができますね。 逆に簡単すぎるので、もちろん小さな子にはやらせないことや、電池と銀紙は近くに置かないように気を付けておくことも重要です。 ＜動画はこちら＞
【意外と知らないMac操作】QuickLook（クイックルック）からテキスト（文字）をコピーできるようにする簡単な方法＋PopClip合わせ技＊リンあれ
ブログのネタには困ったことがありません、ゆこびん(@yucovin)です、こんにちは(*‘ω‘ *) 昨年の更新頻度がひどく少なかったため、あのネタもこのネタも腐りそうですがツッコミは入れないでおいてあげてください。 さてさて、今年は私がお気に入りの簡単便利なMacのTipsを書いていこうと思ってまして。先週一つ書いたんですけど、それが結構講評でした。で、シリーズ化しようかと思って「意外と知らないMac操作」ってサブタイトル考えてみたんですけど。うーん。もっと良いタイトルがあれば提案してください（募集！）。それでは第２回目をお送りします！(。´▽`) 本日はQuick Lookネタです。 知らない方は是非これを読んでやってみてください。 知っているよって方は、まわりのMacを使い始めた人に是非教えてあげてくださいね。きっと喜ばれます！ QuickLook（クイックルック）から文字をコピペで
絶対に知ったほうがいいビジネスメールのコツ8項目！メール技術はマジで重要！
上記のように最初に具体的な言葉を持ってくるだけで、すごく中身がわかりやすくなります。 また、僕の先輩がよく使うのですが、【緊急！】【要返信！】といった目立つ表記を最初にもってくるのはうまいです。 カギ括弧で囲むだけで、優先度がすぐに理解できますよね。 2. 箇条書きを使うこれは言うまでもありません。 長い文章でズラズラ説明するよりも、グループ分けした方が頭に入っていきやすいです。 ブログだと使っている人は多いですが、メールでは箇条書きを使っていない人が意外と多いです。メールでも意識して使いましょうよ！ ただ気をつけたいのは、「羅列しすぎない」ということ。あまりに箇条書き項目が多すぎるとわかりずらいです。。 箇条書きはできれば5つまでに抑えたほうがいいと思います。 「じゃあ5つ以上の項目があるときはどうするの？(･ ･?)」 その場合には、「親要素・子要素」を決めます。 例えば10個も箇条書
Illustratorを使うとき、私が手放せない10個のスクリプト｜DTP Transit
最近、セミナーでスクリプトを紹介すると評判がよいので、10個選りすぐってみました。 これらを提供してくださっている作者さんたちに感謝します。 はまりどころを見つけると「むちゃくちゃ早く終わる」「手作業ではムリ」なことが実現できるので、「ここでこういうことができると快適になるのに」をリストアップしておいて、たまに棚卸ししてみるとよいと思います。 追記 2017更新版を公開しました。 Illustratorを使うとき、私が手放せない10個のスクリプト（2017更新版）＋ 入手できるスクリプト一覧 - DTP Transit なぜ、スクリプトを使うの？ Illustratorでの作業を効率化するには、キーボードショートカットやアクションを使う方法がありますが、そもそも次のような場合には、有償のプラグインを使うほか、スクリプトを使う方法があります。 Illustratorではできないこと できるけ
スマートフォンサイトのコーディング Tips あれこれ | バシャログ。
ゴールデンウィークはゴールデンに過ごせそうにない Latin です。 今回はスマートフォンサイトのコーディング周りでのあれこれをまとめてみます。 先日の macky の記事、「スマホサイトの矢印付きメニューをCSSのみで実装する。」もあわせてご覧ください。 viewport 系の設定 描画サイズをデバイスの横幅に合わせる、拡大縮小を不可に これが一番よく見る形式でしょうか？ <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> 文字サイズの自動調整をオフにする 各スマホブラウザでは、横向きにすると text-size-adjust の処理が走り、自動で文字サイズを最適化（拡大）する機能があります。 読
[CSS]テキストの左右に水平ラインをすぅーーーっと引くスタイルシートのテクニック
hn, pなどの要素を使ったテキストの左右に、水平ラインを天地中央に配置するスタイルシートのテクニックを紹介します。 HTMLは非常にシンプル、カラーやサイズの調整も簡単、背景画像も問題ありません。 実装のポイントは5つ。 画像は使用しない。 spanなど、余分なHTMLは使用しない。 フォントのサイズを大きくしても自動で調整される。 可変。 背景が画像でも水平ラインが綺麗に描かれる。 実際の動作は、下記ページで確認できます。 デモは全てのモダンブラウザ、IE9+でご覧ください。 Heading Side Lines HTML HTMLは非常にシンプルで、hnやp要素のみで実装できます。 classを使用すれば水平ライン有り・無しの共存も可能です。 <body> <h2>テキストの左右に</h2> <h3 class="lines-on-sides">水平のラインを描く</h3> </bo
Finderのツールバーにアプリアイコンを追加すると作業が捗る - あなたのスイッチを押すブログ
MacのFinderのツールバーに、アプリの起動アイコンを設置してみましょう。すると非常に作業が捗るんですよ。 今まで、Finderにあるファイルを特定のアプリから起動する際には、わざわざファイルをDockまでドラッグしたんです。しかし、これって結構な距離なんですよ。 特に、マウスを使わずタッチパッドを愛用している私にとっては、長い距離のドラッグ＆ドロップは、なかなかしんどい作業なのです。 そんな時、Finderのツールバーが非常に便利。アプリアイコンを設置することで、ファイルを特定のアプリで開くのがメッチャ楽になりました。 Finderのツールバーにアプリを登録する方法 まず、Finderのアプリケーションフォルダから、設置したいアプリを選択します。そして、Commandキーを押しながら、ツールバーにドラッグ＆ドロップ。これで完了です。 逆に、ツールバーに設置したアプリアイコンを外す場合
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ごりゅご.com
404 Not Found