チャレンジ

HTML&CSS

borderについて「へぇー」と思ったこと

こんにちは、ゆんつです。 CSSの勉強をしていてborderに関して ゆんつ へぇー と思ったことがありました。 今日はそのborderに関して「へぇー」と思ったことについて書きます ...
jQuery

カーテンを開くような感じで文字を出現させる

こんにちは、ゆんつです。 この前Webサイトを見ていたら、面白いアニメーションに遭遇しました。 ページを開いた直後は文字にカバーがかかっていて、ページが開くと間もなく、そのカバーが徐々に外れて文字が現れるというアニメーションです...
HTML&CSS

左から右から、中央からにょろ~ん

こんにちは、ゆんつです。 リンクにマウスカーソルを乗っけたときのアニメーションにはいろんなものがあります そのようなアニメーションの中で良く見かけるのが、リンクにマウスカーソルを乗っけると左側からにょろ~んと下線が伸びるアニメー...
jQuery

三本線からバツ印へ

こんにちは、ゆんつです。 スマホでWebサイトをみていると、画面の右上や左上などにメニュー画面を表示させるための3本線をよく見かけると思います。 この三本線。 見た目がハンバーガーに似ていることから「ハンバーガーメ...
ダイエット記

僕が試した様々なダイエット方法とその成果や感想など

こんにちは、ゆんつです。 約2年前。 増え続ける体重に危機感を感じた僕はダイエットを開始しました。 そして1年9ヶ月かけて76kgあった体重を64.5kgまで落としました。 11.5kg体重が落ちるまでは苦労の連続で、様々なダイエッ...
jQuery

アコーディオンメニューでプラスとマイナスの切り替え

こんにちは、ゆんつです。 企業のWEBサイトではQ&Aのページをよく見かけます。 Q&Aのページでは質問部分をクリック又はタッチしするとスーッと回答が現れ、再びタッチすると回答が閉じるというというものが多いようで...
HTML&CSS

テキストが要素を突き抜けていく原因と解決法

こんにちは、ゆんつです。 この前こんな事態に遭遇しました。 ブロック要素の中に日本語で文字をズラッと入れていくと 何もしなくても要素の端で折り返されて、ブロック要素内に表示されます。 ところが半角英語にすると...
CodePen

CodePenの無料会員で画像を使うには

こんにちは、ゆんつです。 手軽にソースコードとその実行結果を表示してくれるとても便利なサービス「CodePen」。 このCodePenで画像を使いたい場合があります。 有料プランの場合はアップロードサーバーが用意さ...
jQuery

jQueryの導入方法と、導入後の確認方法

こんにちは、ゆんつです。 Webページを作るにはHTMLとCSSが必要になります。 そのHTMLとCSSで作ったWebページに、HTMLやCSSだけでは実現出来ないような動きを付けたり色々な仕掛けをするためにjQueryというプ...
HTML&CSS

画像の高さと親要素の高さが一致せず、空白が出来る時は

こんにちは、ゆんつです。 HTMLで親要素の中に子要素としてimg要素を入れた時。 親要素にも子要素にもheightを設定しなければ、親要素と子要素の高さはピッタリになるはずだと思っていました。 ゆんつ ...