タグ

HTMLとcssに関するgazi4のブックマーク (4)

  • pixiv小説のようにCSS3とjQueryでHTMLを縦書き表示する方法【I'll be NET】

    吾輩(わがはい)はである。名前はまだ無い。 どこで生れたかとんと見当(けんとう)がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪(どうあく)な種族であったそうだ。この書生というのは時々我々を捕(つかま)えて煮(に)てうという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌(てのひら)に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始(みはじめ)であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶(やかん)だ。その後(ご)にもだいぶ逢(あ)ったがこんな片輪(かたわ)に

    gazi4
    gazi4 2018/06/01
  • JavaScript を使わず HTML と CSS だけで Todo アプリを書く方法 - Frasco

    HTMLCSS だけで Todo アプリを作りました。TodoMVC(今回デザインを使用使わせてもらいました)と違って JavaScript は使っておらず、すべてのインタラクションが CSS で動いています。 どういう仕組みなのでしょう?簡単に説明すると、HTMLCSS の一般兄弟セレクタ(~)、CSS カウンタ、それから :checked 、:target、:required 疑似セレクタを組み合わせてできています。詳細についてはこれから説明していきます。 アプリを試してみる ソースを見る できること: Todo の追加(最大50件) Todo の完了 Todo の削除 フィルタリング(完了・未完了) 残りのアイテム数をカウントする 空文字の追加を許可しない できないこと: ページリロード後の永続性の維持 「すべての Todo を完了にする(Mark all as done)」

    JavaScript を使わず HTML と CSS だけで Todo アプリを書く方法 - Frasco
    gazi4
    gazi4 2017/11/27
  • LINE風の吹き出しをCSSだけで表示、マークダウンならたった4文字の組み合わせで簡単記述! - 移転→hapilaki.net

    ブログに慣れていない人でも記事の中で簡単にLINE風吹き出しを表示できるCSSを自作した。マークダウン記法なら4文字(「-」「 」「1」「.」)の組み合わせだけで、コピペ不要でLINE風吹き出しの会話形式を簡単に表現できるよ。 見 まずは見を見せてよ。 OK。 こんな感じ。 これが4文字の組み合わせでできるの? この会話例は2文字の組み合わせなんだぜ。 半角ハイフン(-)と半角スペース( )だけ。 まぁ、ステキ💕 解説:見の記述例を図解 上の会話例を入力するときは次のように記述した。(下の記述例はキャプチャー画像) 分かりやすいように、拡大して補足説明を入れるよ。 各行ごとの説明。 改行だけ 半角ハイフン(-)3つで改行 改行だけ 半角ハイフンの後に半角スペース( )で改行 半角スペース2つ、半角ハイフン、半角スペースの後に会話内容 4行目と同じ 5行目と同じ 5行目と同じ 特徴:

    LINE風の吹き出しをCSSだけで表示、マークダウンならたった4文字の組み合わせで簡単記述! - 移転→hapilaki.net
    gazi4
    gazi4 2016/09/12
  • 音声出力環境における擬似要素(::before, ::after)の内容(content)の読み上げについて

    音声出力環境における擬似要素(::before, ::after)の内容(content)の読み上げについて Updated 2015.01.20 / Published 2015.01.19 スクリーンリーダーや音声ブラウザなどの音声出力環境で::before擬似要素、::after擬似要素にcontentプロパティで生成した内容は多くのソフトウェアで読み上げることができます。使い方次第で、薬にも毒にもなりえます。読み上げることがないように制御したい場合は、aria-hiddenをtrueで設定するしか有効な方法がなく、制御できるのは対応しているものに限られます。 CSSの内容生成について HTMLなどで作られた文書内に直接表現されないものを表現するためにCSSには擬似要素というセレクタが用意されてます。CSS2よりcontentプロパティを伴って文書中に内容を生成できる:before擬

    音声出力環境における擬似要素(::before, ::after)の内容(content)の読み上げについて
  • 1