ひとみーる

ぶち当たった壁を乗り越えた事例の備忘録。

ひとみーる

ぶち当たった壁を乗り越えた事例の備忘録。

アルファベットを振ったliの中にulを入れたい。

liの前に a.b. とアルファベットを振りたいなあと思いました。文章が長くなり改行された際に「a.」の下に文字の回り込みが嫌だったので、文章自体はpadding-leftで左側に幅を取って、後付けのようにアルファベットを振りたいと思いました。 list-style-type: lower-alphaの記述方法を見つけたのですが、reset.cssにlist-style-type: noneがあるので今回はli::beforeで対処することに。 ※list-style

ひとみーる

    • 【さくらのレンタルサーバ】FileZilaを使ってみた

      お久しぶりです。ひとみーるです。 早速ですが、今回制作したサイトを「さくらのレンタルサーバ」を使用して、FileZilaでアップしました。 いつもは「ロリポップ！」のロリポップFTPを使用しているのでFileZilaを使用は不慣れだったのです。 FileZilaの使用方法は分かり易い説明が記載されているサイトがありますので、そちらをご参考ください。 「【FTPソフト】FileZillaの使い方を初心者向けに解説する」https://miya-system-works.

      ひとみーる

      • faviconを作る！設定する！

        一目見ただけで何のサイトか判断できる「favicon」の設定は必須ですね。パソコンでサイトを開いたときのタブに表示されるマーク。スマホでサイトをホームに置いたときのアイコン。あれです。HTML、CSS、JavaScriptを書くだけでもいいのかと思いきや、その他諸々の重要な作業がありますね。faviconはその中の一つです。いわばサイトの顔。 どんなサイズで作ればいいのか？どのように設定すればいいのか？ハテナだらけですが、まずどの大きさが何に対応しているのか解説していただい

        ひとみーる

        • jQueryスライダープラグイン「ItemSlide.js」

          スライダーに種類は様々ありますよね。自動的に画像が移り変わったり、左右に表示された三角のボタンを押すと隣の隠れた画像を表示するなど。 私が「こんなサイト作りたい！」と思ったのは下記サイトになります。中でも気になったのは商品一覧の表示方法がかっこいい・・・！と思いました。 「FIL - SUMI LIMITED」https://sumi.fillinglife.co 画像そのものをつまみ、スライドさせる。このような方法でどうにか自分の制作するWEBサイトに使えないか検討し

          ひとみーる

          head内の必要タグ、OGP設定

          head内に色々と書いてあるのは分かるが、何を書けばいいの状態。ちゃんとまとめていただいている記事がありましたので共有します。 またhead内にはOGP設定、つまりTwitterやFacebookなどSNSで共有した際に自動的にタイトルや画像が出てくるあれです。URLペーストしただけでポヨン、とカードが出てきてサイトの名刺のようなものの設定も行わなければなりません。 まずは基本的なところ、またOGPの設定は以下のサイトが参考になりました。 「head内に書くべきタグを総

          ひとみーる

          head内の必要タグ、OGP設定

          ひとみーる

          overflow-x:hiddenの邪魔をするposition:absolute

          jQueryスライダープラグイン「ItemSlide.js」を使用し、画面をはみ出る分は非表示にするためoverflow:hiddenを指定。しかし何故か横軸のコンテンツ幅を打ち抜いておりました。 ググってみると解決方法が２つ出てきました。 １、全体を包むwrapperを作り、overflow-x:hiddenを指定する ２、子要素にposition:absoluteがある場合は親要素にposition:relativeを指定する まずは１を試してみる。参考にしたのは

          ひとみーる

          overflow-x:hiddenの邪魔をするposition:absolute

          ひとみーる

          background-attachment:fixedはiOSでは機能しない。

          背景固定をさせた方は誰しもが失敗するのではないでしょうか。background-attachment:fixedの落とし穴。「最初から教えてよーー！！！！」と感じた失敗について書いていきます。 background-attachment:fixedを使えば簡単に背景固定ができますが、実はiOS対応していないので実機(スマホ)で確認するとえらいことになっています。ですが疑似要素でposition:fixedを追加したらOKです。 ググり、参考になった記事は以下になります。

          ひとみーる

          background-attachment:fixedはiOSでは機能しない。

          ひとみーる

          HTML、CSS、 JavaScriptでは終わらない！

          WEBサイトを制作する際にHTML、CSS、JavaScriptを書き終えたからといって安心はできないんですよね。サイト完成！と思ったあと、下記設定を行いました。 ・ファビコン ・OGP ・Google Analytics ・Google Search Console ・Google reCAPTCHA(問合せページをPHPで書いていたため) こんなもんでしょうか？レスポンシブ対応はしていましたが、iPhoneを横に傾けた時にメニューがスクロールできない、崩れてい

          ひとみーる

          HTML、CSS、 JavaScriptでは終わらない！

          ひとみーる

          https化にはリダイレクト設定

          サーバーはロリポップを使っています。独自SSLが無料なので、ロリポップのマイページから設定するも、なぜかサイトは「http://〜」のまま。 なぜ・・・ ググったところ、下記サイトが非常に役に立ちました。 「常時https化に必須、リダイレクト設定方法。ロリポップでの事例！ | 便利なデジタル生活」https://digital-life.club/hp/redirection-to-https-for-lolipop 記載の通り従うと、サイトがhttpsで開かれるよ

          ひとみーる

          https化にはリダイレクト設定

          ひとみーる

          「モバイル　ユーザビリティ」関連の問題が検出されました

          Google Search Consoleより突然メールが届きました。警告の内容は以下になります。 ・コンテンツ幅が画面の幅を超えています ・テキストが小さすぎて読めません ・クリック可能な要素同士が近すぎます WEBサイトを公開してから１ヶ月、今まで何の通知もなかったので焦りました。 早速ググったところ、修正方法を記載してある記事を見つけました。 「コンテンツの幅が画面の幅を超えています」モバイル ユーザビリティ 修正方法 | HCZ BLOG」https://

          ひとみーる

          「モバイル　ユーザビリティ」関連の問題が検出されました

          ひとみーる

          「やりたいこと？」「軸？」迷える就活生へ

          初めまして、ひとみーるです。 そして明けましておめでとうございます。 この時期になると就活に焦っていた自分を思い出します。 「学歴フィルター」なるものが存在しておりましたが、一応フィルターには引っかからない程度の大学に通っておりました。そのため、周囲の「意識高め」の学生を見ては焦って、見かけだけの就活をしていました。 インターンに参加してみたり、合説に行ってみたり。 周りから見れば私も「意識高め」で、こういった類のものにはうまくやる人間には見えていたと思います。

          ひとみーる

          「やりたいこと？」「軸？」迷える就活生へ

          ひとみーる