紙っぽいかわいいWebサイト作りたい - Qiita
かわいいWebサイトが作りたい Web上でグラフィックデザインっぽい表現をしてるサイト大好き！ 思いついたら追加する 「版ズレ」風 版ズレ ＝ 印刷の際に、色の版がズレて出力されてしまう現象。（アナログっぽい雰囲気を出すために、あえてズレているように見せるデザイン手法として使ってます） 一番上のレイヤーに紙っぽいテクスチャを乗せて乗算かける 後ろのテキストはaria-hidden="true"でスクリーンリーダーに読み上げられないようにする （疑似要素でやりたかったけど乗算上手くいかなかった・・） ▼ HTML <div class="hanzure"> <img src="紙っぽいテクスチャ" alt=""> <div class="hanzure01"> <p class="front">版ズレ風の表現</p> <p class="back" aria-hidden="true">版ズ
Hamburgers
Table of Contents Usage Sass Customization Accessibility Browser Support Usage Using Hamburgers for your site is easy (well, that was my intention anyway). Download and include the CSS in the <head> of your site: <link href="dist/hamburgers.css" rel="stylesheet"> Add the base hamburger markup: <button class="hamburger" type="button"> <span class="hamburger-box"> <span class="hamburger-inner"></spa
効率よくコーディングを進めるためにChatGPTを使ってみよう
この記事について この記事は、 Web制作の基礎から学べる「Webコーディングスクール」 などの資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。Webデザインをメインにストックイラストレータ、グッズデザインなどしております。 ChatGPTとは ChatGPTはOpenAIが開発した対話型のチャットボットです。質問を入力すると質問に対する回答が出力されます。 今回はChatGPTを使って、効率よくコーディングを進めてみます。 headタグ内のコードをChatGPTで生成しよう HTMLの大枠をChatGPTを使ってコーディングしてみよう グロナビをChatGPTで生成してみよう ボタンをホバーした時のCSSをChatGPTで生成してみよう H
JavaScriptを使った、シンプルなカレンダーの作り方 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
おはこんばんにちは、ハルです。 JavaScriptはなんでもできるんだなぁ、と毎日のように感じています。 PHPでカレンダーを作ったことはあったのですが、JavaScriptで作成したことがなかったので、作ってみました。 今回紹介するひな形さえあれば、みなさんの好きなようにカスタマイズできると思います。 今日の日付の文字が赤く表示される、かなりシンプルな月次カレンダーです。 ここまで作ってしまえば、あとはそんなに悩まずに、カスタマイズ（前月・次月のボタンや、数字自体を押せるなど）ができるはずです。なので、シンプル状態のカレンダーのコードを、ここにメモ…紹介したいと思います。 HTML <h2 class="calendar-title"><span id="js-year"></span>年 <span id="js-month"></span>月</h2> <table class="
cssで作るシェアボタンのデザインパターン36種類 - FOXISM
cssで作るシェアボタンのデザインパターンをたくさん考えてみました。とりあえずシェア数の表示がない、単純なボタンとして36種類あります。（色違いなども若干含みます。） 記述するhtmlはどれも同じようなものですが、一部微妙に異なるものもあります。基本的にはcssだけでデザインを決めています。アイコンフォントに関してもcssだけでほとんどやっていますが、そのコードは省略していますのでソースを見てください。 コピペでもだいたい使えると思いますが、それぞれ微調整が必要なものもあると思います。なのでコピペだけでなく自分のサイトに合わせて調整できるcss中級者以上向けですね。スマホ表示も考えてないし。（スマホで見ると崩れてるやんwと思う人はこの記事の対象外です。） というか、ローカルなhtmlで作っていたものをここにコピペしたらうまく動かないものやフォントが反映されていないものがありました。面倒なの
プログラミング初心者やWeb制作に役立つ例文・資料・規約・早見表などのまとめ
作成：2016/08/8 更新：2016/08/08 ディレクション > Web制作やプログラミングで役立つ初心者向けの例文・命名規則・規約・料金一覧・雛形などをまとめました。ユニークなテンプレートなどもありますのでご活用ください。確実に読んでおきたい資料です。 エンジニア速報は Twitter の@commteで配信しています。 英文例文・命名規則・コード規約 git コミット例文・リリースノート英文 コミットの文を書くための英語例文。追加・切り替え・バグ修正・移動・インデント整形後などのメッセージ文とリリースノートを英語で書くときの英文など、以下のサイトで事足りそうです。 gitにおけるコミットログ/メッセージ例文集100 azu/awesome-commit-english: コミット英語についての記事まとめ 他Web制作に関する英語メールの例文。 海外の問い合わせも簡単に！そのまま
第2回 アコーディオンメニューのアニメーション | gihyo.jp
今回のお題はサンプル1のアコーディオンメニューだ。マウスポインタをメニュー項目に重ねると、サブメニューが広がる。また、サブメニュー項目は、マウスポインタの動きに応じてハイライトする。「アコーディオンメニュー」をネットで検索すると、jQueryを使った作例が多くリストされるだろう。だが、JavaScriptは使わず、CSS3だけでもアコーディオンメニューの基本的な動きはつくれる。 サンプル1 CSS3：Accordion menu by rollover メニューのもとになる静的スタイル まず、<body>要素に書くコードの構成だ。アコーディオンメニューは、つぎのようにclass属性が"menu"の<ul>要素でリストとして組み立てる。メニュー項目をclass属性"item"の<li>要素として、サブメニューはその中にさらに<ul>要素を入れ子にした。サブメニュー項目も<li>要素で、メニ
deconcepter.jp
We’re getting things ready Loading your experience… This won’t take long.
スマートフォンサイト制作における SCSSディレクトリ構成、Class命名について
スマートフォンと呼ばれる端末が世に出て、早。。。何年だ？何年かは忘れましたが、 私はそのスマートフォン端末登場と共に、正式に「フロントエンドエンジニア」と呼ばれる職種につきました。 それまではデザインだったり、構成作成したり、モバイルやったり、Flashだったり、PHP用いてのサーバーサイド等と言わばなんでも屋のwebデザイナーでした。 スマートフォンに特化した「フロントエンドエンジニア」となってからは様々なプロジェクトに参加し、様々なプロダクトを世に放ってきました。 ここ数年でその「フロントエンド」と言われる領域の環境もめまぐるしく変わってきました。 そこで、一旦ここ数年これで落ち着いているな。と思われる SCSSのclass付与とディレクトリ構成についてまとめさせて頂きます。 まず、ディレクト構成についてなんですが、管理するにあたって一番大事なのは、「第三者でも分かる管理法です。」 「
はてなブログで文字のカスタマイズが捗る構成図をつくってみました - Yukihy Life
最近ブログカスタマイズにはまっているゆきひーです。「またかよ！？」うっす。またっす。 はてなブログの文字をカスタマイズする際に、こんなのがあったら便利だなあと思っていたので作ってみました。 はてなブログ文字の構成図 はてなブログのidとかclassとかを直感的に分かりやすいような構成図を作ってみました。今回は文字の編集用につくったので、文字に関するのを抽出しています。全部はないのですが…。 下のキャプチャは、はてなブログの無料テーマの中でも最もシンプルだと思われる「blank」に、それぞれの文字に関するidやclassをふったものです。 ちょっと、いやだいぶ見にくくてすみません…。今回は僕も使わせていただいている「blank」を元にやりましたが、どのテーマでもはてなブログならだいたい同じではないかと思います。間違いあったら教えてください。 注意点としては、「.」「-」「#」「空白」などを忘
もう、class名やid名で悩まないんだからっ！！｜CSS HappyLife
class名やid名って付ける時悩みませんか？ 今でもボクは結構悩むんですが、そんな悩みを解決する為に、人さまのソース覗きまくってよくあるclass名とid名を拾ってきました。 これで、チョットだけ作業効率アップ！？ 2010年6月10日追記： この記事自体、2007年 1月15日に書かれてるんでかなり古いです。 あくまでも参考程度に留めてもらうのが良いかと思います。 今だったら、html5の要素を参考にしたりして付けるのが、今後の事を考えると良いのかなーと思います。 また、善し悪しの判断はせずに公開しているものですが、位置に関するのは仕様変更に弱くなるのでオススメはしません。 全体に使えそうな感じ wrap wrapper top-wrapper wrapperAll frame mframe all-frame container page pagetop all allContent
CSS3とjQueryでオリジナル画像のスプライトアニメーションを実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもですよ、フロントエンドエンジニアのはやちですよ( ˘ω˘)✌ 今回はスプライト画像を使用した、アニメーションの実装方法を2つご紹介いたします(´ʘ‿ʘ｀)✌ 実装する前に準備をしよう まず画像が必要ですね。今回はこのような画像を用意いたしました。 1つの絵に対して100×126で作っております。ズレがないようにご注意くださいまし( ˘ω˘)☝ HTML マークアップはこんな感じで、sectionの中のspriteを動かします( ˘ω˘)☝ <section class="section css"> <h2>CSS</h2> <div class="sprite"></div> </section> 準備はこれで以上になります( ˘ω˘)☝ 実装をしよう お次にそれぞれの実装方法をご紹介します( ˘ω˘) CSS3を使用した形での実装方法 CSS3ではanimationを使用します。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
もし、HTMLのテキスト周りでデザイナーからこんなお願いをされたら... - Qiita
travelbanana.net