Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                

タグ

2018年7月27日のブックマーク (11件)

  • 画像一枚だけで写真を重ねたようにするチュートリアル | コリス

    シンプルなHTMLで画像を配置し、:before, :after疑似要素を使って、写真を重ねたようなエフェクトにするチュートリアルを紹介します。 重ねたエフェクトはホバー時にCSS3アニメーションします。 デモページ ※ホバー時のアニメーションはFirefoxのみです。 実装 HTML HTMLは非常にシンプルです。 ラッパーのdiv要素はWebkit系ブラウザ用で、将来無しでも機能するようになるかもしれません。 <div class="stack"> <img src="image1.jpg" /> </div> [ad#ad-2] CSS スタイルシートは4つのデモのキャプチャと共に、紹介します。 まずは、右端の写真が垂直方向に重なっただけのスタイルシートです。重なりは:before, :afterを使用します。 .stack { position: relative; z-index

  • Gulp node.js 実行時に変数を渡して処理を分岐させたい - かもメモ

    以前 Gulpでタスクを指定して実行することで無理やり処理を分岐させる方法を書いていました。 今回同じような需要が合って調べているとgulp実行時コマンドに直接キーと引数を渡せる素晴らしい方法があったのでメモ。 minimistを使ってコマンドラインから変数を渡す minimistというコマンドラインの引数をパースできるモジュールがあるようです。 var parseArgs = require('minimist') var argv = parseArgs(args, opts={}) EX: コマンドラインの引数 // example.js const options = require('minimist')(process.argv.slice(2)); console.log(options); 例えば上記のようなjsがあり、コンソールから次のようにコマンドを実行してみます。 $

    Gulp node.js 実行時に変数を渡して処理を分岐させたい - かもメモ
    chlono
    chlono 2018/07/27
    リンク

  • ふりがな文庫

    ふりがな文庫は、漢字に対するよみの使用頻度、よみに対する漢字の使用頻度がわかるサイトです。主に文学作品などのふりがなを対象としています。

    ふりがな文庫

  • アクセスエラー | DNP 大日本印刷

    大変申し訳ございませんが、 ご指定のURLが見つかりませんでした。 Sorry. The page you’ve requested does not exist. お探しのページがございましたら、下記ページへお進みください。 DNPサイトマップ Please advance toward the following page when there is a page which it looks for. DNP English Sitemap(別ウィンドウで開く)

    アクセスエラー | DNP 大日本印刷

  • 文章表現を豊かにできるけど使いすぎは禁物！代表的な「修辞法」10選

    ライターとして文章を執筆していると、「稚拙な文章になってしまう...」「抑揚の無い単調な文章になってしまった...」など「表現」に関する課題に一度は直面するのではないでしょうか。 ニュースや解説文のような「情報を伝える」意図の文章であれば事実をシンプルに伝えられれば良いかもしれません。一方で、コラムやエッセイ、批評（レビュー）は書き手の「主観」を含むため、事実を伝えながらも「表現の豊かさ」が重視されることもあるでしょう。 そういった「表現の豊かさ」を文章で表すために用いるのが「修辞法（レトリック）」です。今回は、文章表現方法の1つである「修辞法」をまとめました。用例も合わせて紹介しているので、文章を執筆する際の参考にしてみてください。 目次 「修辞法（レトリック）」とは？ ライターが執筆に活かせる修辞法（レトリック）と用例10選 修辞法（レトリック）を使うときの注意点 「修辞法（レトリック

    文章表現を豊かにできるけど使いすぎは禁物！代表的な「修辞法」10選

  • 文章もムダを削いでダイエット！代表的な"冗長表現"7パターンと改善方法

    Webに関するマーケティングの担当の方は、ここに書かれた記事を読むことで、マーケティングに成功した企業の基本的な事例を学ぶことができます。 皆さんは、この文章を読んで、どう感じましたか？ 意図は理解できるものの、何となく読みづらかったのではないでしょうか。その理由はシンプルです。読みづらく感じたのは、冒頭の文章に「伝えたい意図にとって不必要な語句や表現」が入っていたからです。 ちなみに、こうした表現のことを「冗長表現」といいます。冗長表現を省いたり、違う言葉に置き換えることで、文章はスマートに、且つ読みやすくなります。 今回は、冗長表現のパターンとその改善方法について解説します。 冗長表現とは 冒頭の文章を思い出してください。そして、以下の文章と比較してみましょう。 Webマーケティング担当者は、この記事からマーケティングに成功した企業の事例を学べます。 冗長表現を改善するだけで、だいぶ文

    文章もムダを削いでダイエット！代表的な"冗長表現"7パターンと改善方法

  • セクションや段落の区切り線

    段落の区切りに使うhr要素をちょっと凝ったデザインにするという話は以前書きました。似たような話はCSS-Tricksでも最近取り上げられていますね。しかしこれらはhr要素でのテクニックです。では、例えばsection要素の最後にこういったちょっと凝った感じの区切り線をつけるにはどうすれば良いのでしょうか？ 結論としては::beforeと::after擬似要素を組み合わせて頑張るということになります。例えば上記CSS-Tricksのサンプルの最後の例やCekerholicなどで見られるセクション記号(§)の左右に罫線がつくようなデザインを作ってみます。 Demo: Section/Paragraph Divider hr要素の場合は結構簡単なものです。 hr { border: none; border-top: 1px dotted #666; position: relative; he

    セクションや段落の区切り線

  • 【CSS】hrをCSSでオシャレにスタイリングする方法 ｜ KLUTCHE

    仕切り線を入れたいけど無粋な線は嫌なものです。 CSSでちょこっと飾り付けをしてデザインのアクセントを付けてみます。 hr要素はセマンティックなサイト構築の観点からも有用ですので、オシャレさせて送り込んであげましょう。 デモ こんなのを作ります。半分くらいCSS3を使っているので、デモページはモダーンなブラウザでご覧ください。 デモページ 二重線 hr { border:0; border-bottom:medium double #999; } 立体的な線 hr { height:0; border:0; border-top:1px solid #ccc; border-bottom:1px solid #fff; } 点線 hr { border:0; border-bottom:1px dashed #999; } グラデーション hr { height:3px; border:0

  • [CSS]コンテンツの区切り hr要素を素敵にデザインするスタイルシートのテクニックのまとめ

    <hr class="style**"> <style> hr.style1{ border-top: 1px solid #8c8b8b; } hr.style2 { border-top: 3px double #8c8b8b; } hr.style3 { border-top: 1px dashed #8c8b8b; } hr.style4 { border-top: 1px dotted #8c8b8b; } hr.style5 { background-color: #fff; border-top: 2px dashed #8c8b8b; } hr.style6 { background-color: #fff; border-top: 2px dotted #8c8b8b; } </style>

    [CSS]コンテンツの区切り hr要素を素敵にデザインするスタイルシートのテクニックのまとめ

  • gulp：特定のディレクトリやファイルを対象から除外する方法 - NxWorld

    gulpを使っていると基本的には指定した全てのファイルで処理を実行してほしいけれど、一部ファイルに関しては実行してほしくないというときがあります。 そんなときに使える特定のディレクトリやファイルを対象から除外する方法で、簡易的なものであれば特にプラグイン等も必要なく実装できます。 !（エクスクラメーションマーク）を使う 結論から書くと、除外したいディレクトリやファイルのパス指定前に**!（エクスクラメーションマーク）**を記述すれば除外指定することができます。 何らかの理由でこのファイルはLintさせないとか開発時にしか使用しないディレクトリ・ファイルを公開用にgulp.dest()するのに含めないとかいろいろ使う場面はありますが、そのような時にgulp.src()などで指定するパス前に!を記述すれば特定のディレクトリ・ファイルを除外指定できます。 実際の使用例 「!（エクスクラメーション

    gulp：特定のディレクトリやファイルを対象から除外する方法 - NxWorld
    chlono
    chlono 2018/07/27
    リンク

  • CSS3を使ってできる画像まわりのエフェクトやスタイリング18

    CSS3を使った画像のエフェクトやスタイリングについて、思いつく限り一挙にまとめてみました。 たくさん画像を扱うサイトなどを作る際に、CSSでできる表現のカタログとして使ってもらえたらと思います。 ※ 2/24 「2. めくれた風」を書き忘れていたので追記しました 目次 1. シャドウ 2. めくれた風 3. トイカメラ風トンネル効果 4. カラー調整 5. 回転 6. 角丸 7. 楕円のフレーム 8. 円のフレーム 9. 三角形フレーム 10. 重なった風 11. ぼかし 12. フェード（シャドウ編） 13. フェード（グラデーション編） 14. 反射 15. リボン 16. 差し込んだ風 17. フレームだけを傾ける 18. 半透明フレーム まとめ ※ 実際の表示はこちらから確認できます。 ※ この記事で掲載しているCSSは、シンプルにするためにベンダープリフィックスを付けていません

    CSS3を使ってできる画像まわりのエフェクトやスタイリング18

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2025 Hatena. All Rights Reserved.